이전에 나만의 eslint-config
만들기 (이론편)을 포스팅했는데요!
사실 이론편이라기 보다는 ESLint의 공식문서의 일부를 번역한 내용입니다!
실제로 eslint-config
를 만들기 위해서는 더 다양한 부분을 이해할 수 있어야할 것 같습니다.
다른 eslint-config
나 eslint-plugin
을 가져와서 사용하는 부분에 대한 설명도 없고, 어떻게 만들 수 있는지에 초점을 두는 문서이기 때문이죠.
그래도 기본적으로 eslint-config
를 만들기 위한 최소 규칙? 정도라고 이해해주시면 될 것 같습니다.
오늘은 많은 분들이 사용하시는 airbnb
관련 plugin
과 config
를 이용해서 나만의 eslint-config
를 만들어보려고 합니다!
개인적으로 React
, Next
, React Native
와 관련된 프로젝트를 주로 진행하기 때문에 airbnb
컨벤션을 선호합니다.
너무 깊게 ESLint를 설정하지 않는다면, 이정도의 설정으로도 충분히 ESLint를 잘 활용할 수 있다고 생각합니다.
만약 본인이 ESLint의
plugin
,config
의 차이,extends
,rule
,recommended
와 같은 키워드를 모르신다면, 정말 리얼 마지막 ESLint 사용법 뿌시기 포스팅을 한 번 보시고 오시는 것을 추천드립니다. 🙏
mkdir eslint-config-mytool
cd eslint-config-mytool
yarn init
// package.json
{
"name": "eslint-config-mytool",
"version": "0.1.0",
"description": "My ESLint Custom Config",
"main": "index.js",
"license": "MIT"
}
명령어를 따라가다 보면 위와같은 package.json
파일이 생성되게 됩니다.
라이브러리 이름은
eslint-config
가 포함되어야 합니다.
이름에 대한 규칙은 ESLint에서 정한 규칙입니다.
eslint-config
라이브러리를 만드는 방식은 한 가지만 있는 것은 아닙니다.
오늘 사용하는 방법은 여러 방법 중 하나라고 생각해주시면 감사하겠습니다. 🙏
airbnb
의 eslint-config
라이브러리는 크게 eslint-config-airbnb
, eslint-config-airbnb-base
로 나뉩니다!
javascript
만 사용한다면, eslint-config-airbnb-base
를 사용하는 것을 권장합니다.
airbnb-base
설정import
, es6
, node
, variables
와 같은 설정이 포함되어 있습니다.
yarn add --dev eslint eslint-config-airbnb-base
index.js
파일 작성// index.js
module.exports = {
env: {
es2021: true,
node: true,
browser: true,
},
extends: ["eslint:recommended", "airbnb-base"],
parserOptions: {
ecmaVersion: 12,
sourceType: "module",
},
rules: {
// custom rules
}
};
위와 같이 설정하면 eslint-config-mytool
라이브러리는 eslint-config-airbnb-base
와 동일한 역할을 하는 라이브러리가 됐습니다!
react
설정여기서 react
와 관련된 설정을 추가하려면 어떻게 해야할까요?
yarn add --dev eslint-config-airbnb \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-react \
eslint-plugin-react-hooks
eslint-config-airbnb
이후의 설치되는 라이브러리들은 모두 eslint-config-airbnb
에서 필요한 의존성들입니다.
eslint-config-airbnb
만 설치했을 때 react
와 관련된 설정을 사용할 수 없습니다.
react.js
파일 작성module.exports = {
extends: ["plugin:react/recommended", "airbnb", "airbnb/hooks"],
plugins: ["react"],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: {
// custom rules
},
};
위와 같이 작성하면 react
와 관련된 설정도 추가해서 사용할 수 있습니다.
typescript
설정yarn add -dev eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser
typescript.js
파일 작성module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
project: ["./tsconfig.json"],
},
plugins: ["@typescript-eslint"],
extends: [
"plugin:@typescript-eslint/eslint-recommended",
// airbnb-typescript
"airbnb-typescript/base",
// airbnb-typescript + react
"airbnb-typescript",
],
};
eslint-config-airbnb-base
와 같이 react
설정을 포함하지 않아도 될 때는 extends
에서 airbnb-typescript/base
로 설정을 추가하면 됩니다.
별도의 파일을 생성하지 않고
index.js
파일에 위의 모든 설정을 한 번에 넣어도 상관없습니다.
크게 확장성을 고려하지 않는다면,index.js
파일에서 한 번에 관리하는 것도 좋아보입니다. 👍
package.json
파일 및 디렉터리 구조{
"name": "eslint-config-mytool",
"version": "0.1.0",
"description": "My ESLint Custom Config",
"main": "index.js",
"license": "MIT",
"dependencies": {
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.40.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.8.8"
},
"peerDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.40.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0"
}
}
eslint-config-mytool
├─ node_modules/
├─ index.js
├─ react.js
├─ typescript.js
└─ package.json
ESLint에서는
peerDependencies
를 명시해주는 것을 권장합니다.
eslint
와 플러그인의 버전마다 추가 된 규칙이나 옵션이 있기 때문에 설정한 규칙을 지원하는 버전을 명시해주는 것이 좋다고 합니다.
npm publish
배포하기 전 어느정도의 과정이 필요합니다.
NPM 배포에 대한 내용은 생략하도록 하겠습니다.
yarn add --peer --dev eslint-config-mytool
yarn add --dev eslint-config-mytool
--peer
명령어를 통해서 eslint-config-mytool
에서 명시한 peerDependency
를 같이 설치하게 됩니다.
default
// .eslintrc.json
{
"extends": ["eslint-config-mytool"],
"rules": {
// custom rules
}
}
react
{
"extends": ["eslint-config-mytool", "eslint-config-mytool/react"]
}
typescript
{
"extends": ["eslint-config-mytool", "eslint-config-mytool/typescript"]
}
위와 같이 필요한 설정들을 extends
필드에 추가해서 사용하면 됩니다.
라이브러리에서 custom rule
을 관리해도 되고 프로젝트의 .eslintrc
파일에서 rules
를 관리하셔도 됩니다!
개인 프로젝트를 많이 하는 것은 아니지만, Lint에 관심이 생기다 보니 위와 같이 만들어보는 작업을 경험해서 좋았습니다! 🤩
회사에서는 개발하느라 바쁘고, 이 부분을 이정도까지 신경써야 하는가? 라는 생각도 했었는데요.
처음 개발을 시작할 때를 생각해보면 요즘 저는 꽤나 많이 협업과 도구에 대한 관심이 생긴 것 같습니다.😎
회사의 여러 프로젝트에 동일한 포맷팅과 컨벤션을 제공할 수 있다는 것은 꽤나 매력적인 것 같습니다. ㅎㅎ
처음에 이 작업을 할 때, ESLint의 룰도 하나씩 만져보면서 개인 혹은 조직에 맞는 라이브러리를 만들어보고 싶었습니다.
하지만 모든 룰들을 확인하면서 규칙들을 적용하는 것은 꽤나 많은 시간이 소요되는 일이었습니다. 😭
왜 사람들이 기존의 컨벤션으로 되어있는 것을 커스텀해서 사용하는지 알게 되었습니다. ㅎㅎ
차라리 이 시간에 해야할 것들과 하고 싶은 것들을 하는 것이 더 가치있다고 생각해서 제일 유명한 컨벤션 라이브러리를 참고해서 나만의 eslint-config
라이브러리를 만들어 보았습니다.