[ESLint] ESLint 개념, 적용 방법

ESLint란?

ESLint 공식 홈페이지에서 캡쳐해왔다. 굉장히 인상적인 소개 방법이다.

Find and fix problems in your JavaScript code
ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.

Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. Customize ESLint to work exactly the way you need it for your project.

공홈 설명은 이러하다. f-Lab는 '자바스크립트 코드에서 발견될 수 있는 문제점을 정적 분석을 통해 찾아내고, 코드 품질과 관련된 문제를 보고하는 도구입니다. ESLint는 코드의 버그를 예방하고, 코드 스타일 가이드를 강제하는 데 사용됩니다.'라고 설명한다.

협업할 때 코드 일관성을 유지하는 데에 큰 도움이 될 것으로 보인다.

궁금해져서 찾아봤는데 ESLint의 ES는 ECMAScript에서 따온 것이라고 한다.

ESLint 적용 시작(Quick start)

📢 주의사항

• Node.js(^18.18.0, ^20.9.0, or >=21.1.0) 필요
• built with SSL support(Node.js에서 공식으로 배포한 걸 사용하고 있다면 SSL은 자동으로 들어가 있다.)

1. ESLint 설치

npm init @eslint/config@latest
yarn create @eslint/config
pnpm create @eslint/config@latest```
셋 중 하나를 돌린다.

만약 공유해야 하는&공유 가능한&npm에서 호스트중인 config가 있다면 아래를 돌린다.
📢** npm init @eslint/config를 사용하려면 package.json이 있어야 한다. 없다면 npm init이나 yarn init을 먼저 돌려야 한다. **
```javascript
# use `eslint-config-standard` shared config
# npm 7+
npm init @eslint/config@latest -- --config eslint-config-standard

이게 완료되면

npx eslint yourfile.js
yarn run eslint yourfile.js

둘 중 하나를 돌리면 된다.

나는 없어서 스킵했다.

2. ESLint 설정

📢 9.0.0 이하의 버전을 사용중이면 ESLint 사이트에서 migration guide를 먼저 보라고 한다

npm init @eslint/config를 돌리면 eslint.config.js 혹은 eslint.config.mjs가 생긴다. 이 파일을 열어보면

// eslint.config.js
export default [
    {
        rules: {
            "no-unused-vars": "error",
            "no-undef": "error"
        }
    }
];

이런 코드가 있다.
no-unused-vars랑 no-undef는 ESLint 규칙 중 일부다. 이 규칙들은 코드에서 사용되지 않는 변수나 정의되지 않은 변수에 대한 검사를 수행한다.

해당 규칙의 에러 레벨을 통해 경고(warning)나 에러(error)로 동작하게 할 수 있다.

"off" 혹은 0: 해당 규칙을 끄는 설정. ESLint가 이 규칙을 적용하지 않는다.
"warn" 혹은 1: 경고로 규칙을 활성화. 규칙 위반 시 경고 메시지를 출력하지만, exit code에는 영향을 미치지 않는다.
"error" 혹은 2: 에러로 규칙을 활성화. 규칙 위반 시 에러 메시지를 출력하며, exit code는 1이 된다.

그러므로 위 eslint.config.js코드는 코드에서 사용되지 않는 변수가 있으면 에러로 처리하고, 코드에서 정의되지 않은 변수를 사용하면 에러로 처리하도록 하는 것이다.

---

일단 나는 eslint를 처음 사용하는 것이기 때문에 가장 많이 사용하는 Airbnb ESLint 규칙을 따르기로 했다. 그리고 Prettier과 통합하기로 했다.
사실 나는 그 동안 VsCode의 beautify를 사용하여 코드 포맷팅을 했는데 어느 순간부터 Prettier이 표준이 되어 버린 것 같아서 이번 기회에 써보려고 한다.

npx install-peerdeps --dev eslint-config-airbnb

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Prettier를 설치했으면 루트 디렉토리에 .prettierrc를 만들어서 코드 포맷을 적어주면 된다.

{
  "semi": true,           // 세미콜론을 사용
  "singleQuote": true,     // 작은따옴표를 사용
  "printWidth": 80,        // 한 줄의 최대 길이 80자
  "tabWidth": 2,           // 들여쓰기 2칸
  "trailingComma": "all",  // 후행 콤마 사용
  "arrowParens": "always"  // 화살표 함수에서 항상 괄호 사용
}

나의 경우에는 이렇게 했다.

그리고 eslint.config.mjs파일을 설정해주면 된다.

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import airbnb from 'eslint-config-airbnb';

export default [
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  airbnb,
  {
    plugins: {
      prettier: prettierPlugin,
    },
    extends: [
      'airbnb', // Airbnb 스타일 가이드 적용
      pluginJs.configs.recommended,
      ...tseslint.configs.recommended,
      pluginReact.configs.flat.recommended,
      'prettier', // Prettier 규칙을 비활성화
      'plugin:prettier/recommended', // Prettier를 ESLint 규칙으로 통합
    ],
    rules: {
      'prettier/prettier': [
        'error',
        {
          endOfLine: 'auto',
        },
      ],
      'no-console': 'warn',
      'react/react-in-jsx-scope': 'off',
      '@typescript-eslint/no-unused-vars': 'warn',
      'import/prefer-default-export': 'off',
    },
  },
];

우선은 이렇게 했다.

3. 설정 확인

eslint가 설정한대로 제대로 작동하는지 확인하려면
package.json에서
scripts에

"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"format": "prettier --write .",

를 추가하면 된다.
이걸 추가하면 npm run lint로 eslint 적용 상태를 확인할 수 있다.
그리고 만약 이걸 돌리고 나서 자동으로 수정할 수 있는 문제들이 있다고 뜨면 npx eslint --fix를 돌려주면 된다. 나머지는 수동 수정해야 한다.

아 그리고 prettier 확인하려면
npx prettier --write .
이걸 돌려주면 된다.

---

eslint 검색하다가 배민에서 airbnb 규칙이 너무 엄격하다고 eslint를 수정하는 글을 보았는데. 나는 일단 eslint 초보니까 airbnb 먼저 써보려고 한다. 쓰다가 너무 제약이 많다 싶으면 하나씩 조정해 나갈 예정이다.

참고자료
https://f-lab.kr/insight/why-use-eslint-and-prettier-together
ESLint 공식 홈페이지