Portfolio

문제점 및 배경

github action을 통해 자동 lint 검사를 해주던 도중, 계속해서 Image의 특정 comma로 인해 린트 검사 에러를 뱉는 이상한 현상이 발생했다.

해결 과정

먼저 떠오른 것은, package.json에서 scripts의 구문 오류가 있었는지를 검토하는 것이었다.


"lint": "eslint --ext js src && stylelint src",

하지만 검토 결과, yarn lint로 인해 발생했던 문제가 아니었음을 확인했다.

따라서, 현재 설정에 대한 충돌이 있었다는 것인데, comma의 자동 문법 수정 오류로 인해 발생한 것이므로 prettier을 살펴봤다."


"trailingComma": "es5",

현재는 이렇게 써져 있었다.

es5에서의 trailing comma의 특징은 객체리터럴에서도 후행 comma를 작성할 수 있도록 한다는 것이다.

그렇다면 ESLint의 충돌로 인해 발생한 것인지 살펴본 결과, 일단 먼저, eslint-config-prettier에서 권장하는 설정이 아님을 확인했다. [참고]

따라서 다음을 추가해주었다.


extends: [
    ...,
    'prettier',
],

재오류 발생

그럼에도 불구하고, 계속해서 오류가 발생했다.

원인을 다시금 살펴본 결과, stylelint로 fix를 할 경우 충돌이 발생함을 확인했다.

따라서 결국 stylelint와 prettier간의 연결에 있어 충돌이 발생한다는 것이다.

해결 방법

결국 stylelint와 eslint에서의 규칙을 조정하기 위한 룰을 조정해주었다.

생각해보니, stylelint에서는 후행 comma를 해줄 필요가 없다.

왜냐하면, stylelint는 css에 대한 린트 검사를 해주는 친구인데, trailing comma는 css문법에 엄밀히 말하자면 어긋날 확률이 높기 때문이다.


module.exports = {
  extends: [
    'stylelint-config-sass-guidelines',
    'stylelint-config-concentric-order',
    'stylelint-prettier/recommended',
  ],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    'order/properties-alphabetical-order': null,
    'prettier/prettier': [true, { trailingComma: 'none' }],
    'selector-max-id': 1,
  },
};

결과적으로, 잘 해결할 수 있었다!

📝 참고자료

https://www.npmjs.com/package/stylelint-prettier

https://stackoverflow.com/questions/61370583/trailing-comma-after-last-line-in-object

https://prettier.io/docs/en/options.html#trailing-commas

ESLint와 StyleLint 충돌 해결하기

문제점 및 배경

해결 과정

재오류 발생

해결 방법

📝 참고자료