eslint & preettier 설정

자바스크립트러 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 소요하는 경우가 생긴다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다.

eslint & prettier 설정하기

• ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다. 쉽게 말해 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구이다.
• Prettier : 코드의 스타일을 잡아주는 포맷팅 기능을 한다.

yarn add -D eslint prettier
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier
yarn add -D eslint-plugin-react eslint-plugin-react-hooks
yarn add -D eslint-plugin-jsx-a11y eslint-plugin-import

패키지 설명

• eslint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능
• prettier : 코드의 스타일을 잡아주는 포맷팅 기능
• @typescript-eslint/eslint-plugin : Typescript 관련 린팅규칙을 설정하는 플러그인
• @typescript-eslint/parser : Typescript 를 파싱하기 위해 사용
• eslint-config-airbnb : airbnb 코딩규칙을 사용(리액트 코딩규칙 포함)
• eslint-config-prettier : prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config
• eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력
• eslint-plugin-react : React에 관한 린트설정을 지원
• eslint-plugin-react-hooks : React Hooks의 규칙을 강제하도록 하는 플러그인
• eslint-plugin-jsx-a11y : JSX 내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공
• eslint-plugin-import : ES2015+의 import/export 구문을 지원하도록 함

ESLint 설정

프로젝트 최상위 경로에 .eslintrc.json 파일을 생성

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended", // 기본 eslint
    "plugin:react/recommended", // react eslint
    "plugin:@typescript-eslint/recommended", // typescript eslint
    "plugin:prettier/recommended", // prettier 사용하기 위해
    "eslint-config-prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "linebreak-style": 0,
    "import/prefer-default-export": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-unresolved": 0,
    "react/react-in-jsx-scope": 0,
    "import/no-extraneous-dependencies": 0,
    "no-shadow": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "jsx-a11y/no-noninteractive-element-interactions": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

Prettier 설정

프로젝트 최상위 경로에 .prettierrc 파일을 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

• singleQuote : single 쿼테이션 사용 여부
• semi : 세미콜론 사용 여부
• useTabs : 탭 사용 여부
• tabWidth : 탭 너비
• trailingComma : 여러 줄을 사용할 때, 후행 콤마 사용 방식
• printWidth : 줄 바꿈 할 폭 길이
• arrowParens : 화살표 함수 괄호 사용 방식