[Debug] EsLint, Prettier 마지막 줄 콤마 2개 자동 생성 에러 해결

에러 확인

RN 강좌보며 코딩 중에 저장할 때마다 자동으로 마지막 줄에 콤마가 두개 찍히는 에러가 발생하는 것을 확인하였습니다.

저장 할 때 마다 자동으로 생기기 때문에 prettier에서 발생하는 문제일 것이라고 생각하고 prettier규칙을 수정하기로 하였습니다.

// .prettierrc.js에서 기본으로 설정되어 있던 옵션들

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all' // <- prettier에서 자동(,)콤마 설정 하는 부분
  
  /* trailingComma에서 허용하는 모든 값들
  
  all : 모든 곳에 ,를 붙인다.
  es5 : 객체,배열에서만 ,를 붙인다.
  none : 모든 곳에 ,를 붙이지 않는다.
  */
};

원인 파악

trailingComma="none"으로 변경하였더니 콤마의 자동 생성 기능이 아예 사라진 것을 확인 하였습니다.

하지만 제가 원하는 것은 마지막 줄에서 자동으로 2개 생성이 되는 것이 1개만 생성되게 변경하는 것이였습니다.

그래서 해결방안을 찾기 위한 원인을 찾아보니 eslint와 prettier규칙의 충돌이 원인이였습니다.

바로 eslint에서 콤마 규칙에 대한 것을 수정하였습니다.

eslint 규칙 수정

//.eslintrc.js

module.exports = {
  //...생략
      rules: {
        '@typescript-eslint/no-shadow': ['error'],
        'no-shadow': 'off',
        'no-undef': 'off',
        'comma-dangle': ['error', 'only-multiline'] // 콤마 규칙 추가     
      }
    }
  ]
};

'comma-dangle'옵션의 값들

prettier 규칙 수정

// .prettierrc.js에서 기본으로 설정되어 있던 옵션들

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'es5' // <- prettier에서 자동(,)콤마 설정 하는 부분
  
  /* trailingComma에서 허용하는 모든 값들
  
  all : 모든 곳에 ,를 붙인다.
  es5 : 객체,배열에서만 ,를 붙인다.
  none : 모든 곳에 ,를 붙이지 않는다.
  */
};

✌️ 에러 해결 ✌️

위와 같이 prettier와eslint의 옵션을 수정하여 에러가 해결된 것을 확인하였습니다.