이전에 나만의 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-baseindex.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-hookseslint-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/parsertypescript.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.jsonESLint에서는
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 라이브러리를 만들어 보았습니다.
