환경 구성 (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/