환경 구성 (1) : lint: estlint, stylelint, formatter: prettier

lint와 formatter는 무엇이 다른가.

https://prettier.io/docs/en/comparison.html

 

 

1. eslint 설정

npm install eslint --save-dev

 

- extends와 plugins는 무슨 차이인가?

plugin은 eslint에 추가적인 속성을 부여하는 것이다. 예를 들어 react의 훅에 적용되는 규칙을 위해서 eslint-plugin-react-hooks을 설치하고 plugin에 등록한 뒤 react-hooks/exhaustive-deps 룰을 적용하는 것이 plugin을 사용하는 일반적인 흐름이다.

반면 extends는 plugin 등을 설치하였을 때 추가되는 각종 rule들을 하나하나 수작업으로 설정하기보다는 recommended된 옵션을 넣어서 패키지를 제작한 사람이 추천하는 rule을 그대로 사용할 수도 있다.

 

- 개발과 동시에 린트 검사를 활성화하기 위한 webpack plugin 설정

const ESLintPlugin = require('eslint-webpack-plugin')

// webpack plugins
[
  new ESLintPlugin({
   useEslintrc: true,
  }),
]

 

 

- prettier와의 충돌 방지를 위한 eslint-plugin-prettier

 

 

 

2. prettier 설정

npm install prettier --save-dev

- eslint-plugin-import vs prettier-plugin-sort-imports

import 순서를 조정하기 위한 두 방법이 존재한다. 전자는 eslint를 통해서 import 순서를 조정하는 것이다. 후자는 trivago에서 만든 prettier plugin을 설치하여 formatter를 통해서 소팅하는 방법이다. prettier-plugin을 통한 순서 조정은 정규식을 통해서 순서 조정을 할 수 있기 때문에 좀 더 자세하게 다룰 수 있지만, 간단히 정리하는 용으로는 eslint를 사용하는 방법이 합리적입니다.

 

현재 typed에서는 eslint-plugin-import를 통해 import 순서를 조정 중입니다. 너무 세세한 규칙보다는 작업자의 자율성을 지키면서도 builtin, external만 상단에 위치하도록 그루핑하도록 설정했습니다.

'import/order': [
  'error',
   {
      groups: [
        ['builtin', 'external'],
        ['index', 'sibling', 'parent', 'internal', 'object', 'type'],
      ],
    },
 ],

 

 

3. stylelint 설정 (14버전)

 

npm install --save-dev stylelint stylelint-config-standard

// css-in-js를 사용할 경우
npm install postcss-syntax @stylelint/postcss-css-in-js --save-dev

{
  "plugins": ["stylelint-order"],
  "customSyntax": "@stylelint/postcss-css-in-js", // css-in-js를 위하여 설정
  "rules": {
    "alpha-value-notation": "percentage",
    "order/properties-order": [
      {
        "groupName": "all",
        "properties": ["all"]
      },
      {
        "groupName": "displays",
        "properties": ["display"]
      },
      ... omitted
   ]
}

 

 

4. lint, formatter 이후 script 구동

 

husky + lint-staged 조합을 활용하여 precommit 시점에 git에 잡힌 파일들을 대상으로 처리하도록하자.

"lint": "run-s lint:prettier lint:eslint",
"lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",

"fix": "run-s fix:eslint fix:prettier",
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
"fix:eslint": "eslint . --format stylish --fix",

"npm run lint:eslint -- --rule 'no-console: [2, { allow: [warn, error, debug] }]' --fix",
"npm run lint:stylelint -- --fix",
"prettier --loglevel warn --write"

 

 

ref)

https://velog.io/@kyusung/eslint-config-2

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/