Develop:

ESLint 설정하기 (ft. Airbnb)

칠일오.

본격적인 프로젝트에 임하기 전에 협업에서 중요한 ESLint에 대해 알아보도록 하겠다! 그전에 우선 ESLint와 Prettier의 차이가 헷갈려서 간략하게 정리한 후 들어가 보겠다.

ESLint는 코드 퀄리티를 보장하도록 도와주고,
Prettier는 코드 스타일을 깔끔하게 또는 통일되도록 도와준다.

ESLint는 다양한 코드 작성법 중 일관성 있는 방식으로 구현할 수 있도록, 오류를 분석해 주는 도구이다. Prettier는 텍스트를 일관되게 작성하도록 도와주는 도구이다. 사실 둘 모두 큰 차이 없는 거 아냐?라고 생각했지만, 차이가 있다.

ESLint의 핵심은 코드 에러를 잡고 코드 문법을 강제하여 코드 품질 개선에 중점을 두었다는 것이다. 반면에 Prettier는 작은 따옴표를 사용할 것인지와 같은 코드가 예쁘게 보이는 것에 중점을 둔 도구이다. 즉, 코드의 에러를 잡아내지 못한다.

따라서 이번 프로젝트에서도 두 도구를 모두 사용하여 개발을 하기로 하였다. 그럼 본격적으로 ESLint 설정에 대해 알아보자.

ESLint Setting

사실 Vite로 하면 따로 설치 없이 ESLint가 기본 설정이 되어있다. 그래서 너무너무 편하다... 하지만 조금 더 엄격한 코드 관리를 위해 Airbnb를 선택하게 되었고, 이에 대한 방법을 적어보도록 하겠다.

프로젝트는 React와 TypeScript 기반이며 Vite에 의해 기본 세팅은 모두 되어있다.

 "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
 "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"

한 가지 변경한 점이 있다면, package.json에 위와 같이 변경 및 추가를 해주었다.

이때 이 lint는 npm run lint 명령어로 터미널에서 해당 경로에 있는 모든 파일들의 에러를 확인할 수도 있다. lint:fix는 영어 뜻 그대로 어긋나는 게 생기면 고쳐 준다.

npm install -D eslint-config-airbnb

npm install -D eslint-config-airbnb-typescript

설치가 마무리되었다면, .eslintrc.cjs 파일에 아래와 같이 추가해 주자.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:react-hooks/recommended",
    "airbnb", // 추가
    "airbnb/hooks", // 추가
    "airbnb-typescript", // 추가
  ],
  ...
};

이렇게 추가해 주었더니 다양한 에러(ESLint 설정 규칙과 Prettier가 맞지 않음)가 발생하였고 Prettier도 따로 설정해 주어 해결하였다.

👀 Tip
커밋하기 전에 ESLint를 확인하고 싶다면, VScode의 ESLint extention을 설치하면 코드를 작성하면서 바로바로 검사할 수 있다.

Prettier Setting

최상위 경로에서 .prettierrc 파일을 만든 다음 아래 코드를 붙여 넣었다.

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

하지만 import에 React를 추가하라는 에러는 사라지지 않았고, JSX 문법을 쓰는 만큼 명시해 주면 좋지만 React 17부터는 사용하지 않아도 될 뿐 아니라 빌드에도 실패되어 결국 생략하기로 결정하였다.

ESLint에서 'import React'문 잔소리 없애기

.eslintrc.cjs 파일에서 rules에 아래의 문장을 추가해 주었더니 해결되었다.

rules: {
    ...
    "react/react-in-jsx-scope": "off", // 추가⭐️
  },

끝으로 ESLint에 정의되어 있는 프로퍼티들을 간략히 정리해 보도록 하겠다.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    ...
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: true,
    tsconfigRootDir: __dirname,
  },
  plugins: ["react-refresh"],
  rules: {
    "react/react-in-jsx-scope": "off", 
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    "@typescript-eslint/no-non-null-assertion": "off", 
  },
  ignorePatterns: [".eslintrc.cjs", "vite.config.ts"],
};

root: true일 경우 해당 프로젝트를 기준으로 ESLint 파일을 찾는다. false이면 내 컴퓨터 전체 파일에서 찾는다.
extends: eslint rule 설정이 저장되어 있는 외부 file을 extends 한다.
parser: 각 코드 파일을 검사할 파서(구문 분석(parsing)을 할 프로그램)를 설정한다.
plugins: 추가적인 규칙(rule)을 사용할 수 있도록 만들어주는 다양한 플러그인(plugin)이 제공되며, 새로운 규칙을 단순히 설정이 가능한 상태로 만들어주기만 한다.
rules: 직접 lint rule을 적용한다. 커스터마이징 할 수 있다.

ignorePatterns
위 코드 가장 하단에서 발견할 수 있을 것이다. 수기로 작성된 부분인데 이를 추가한 이유는 import에서 parsing 에러가 발생하여 해당 프로퍼티를 추가하여 린트하고 싶지 않은 디렉토리를 설정해 주었더니 에러가 해결되었다.

📜 출처

luckydayo

ESLint 설정하기 (ft. Airbnb)

ESLint Setting

Prettier Setting

ESLint에서 'import React'문 잔소리 없애기

티스토리툴바