[개발환경] ESLint & Prettier

KJA·2023년 1월 26일

ESLint

Airbnb의 린트 규칙을 사용합니다.

ESLint 설치

npm install eslint --save-dev

npx eslint --init

airbnb JS Style 설치

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

아래와 같이 질문들에 대해 답변 선택합니다.

    ? How would you like to use ESLint? ...
    > To check syntax, find problems, and enforce code style
    
    ? What type of modules does your project use? ...
    > JavaScript modules (import/export)
    
    ? Which framework does your project use? ...
    > React
    
    ? Does your project use TypeScript? » Yes
    
    ? Where does your code run? ...
    √ Browser
    
    ? How would you like to define a style for your project? ...
    > Use a popular style guide
    
    ? Which style guide do you want to follow? ...
    > Airbnb: https://github.com/airbnb/javascript
    
    ? What format do you want your config file to be in? ...
    > JavaScript
    
    eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.3
2.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest

    ? Would you like to install them now with npm? » Yes

.eslintrc.js 생성

위의 질문들을 끝내면 다음 .eslintrc.js파일이 자동으로 생성됩니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 14,
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {},
};

intelliJ 설정

Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint

eslint 플러그인

eslint-config-airbnb-base: 에어비엔비 린트 플러그인
eslint-config-next: Next.js 전용 린트 플러그인
eslint-plugin-react: 리액트 전용 플러그인
eslint-plugin-react-hooks: React Hooks의 규칙을 강제해주는 플러그인
eslint-plugin-import: ES2015+의 import/export 구문을 지원
eslint-plugin-jsx-a11y: JSX 내의 접근성 문제에 대해 즉각적인 AST린팅 피드백을 제공
eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인
eslint-config-prettier: 요건 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인
@typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

기타

인라인으로 규칙 비활성화

// 전체 파일 규칙 경고 비활성화, 파일 맨위에 아래 블록 주석 추가
/* eslint-disable */
alert('foo');

// 경고 비활성화 블록 주석
/* eslint-disable */
alert('foo');
/* eslint-enable */


// 특정 규칙 경고 비활성화
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

파일 그룹에 대해서만 규칙 비활성화

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

Prettier 적용하기

Prettier 설치

npm install --save-dev --save-exact prettier

여기서 -save-exact는 package.json 에 정확한 버전으로 prettier를 설치한다는 의미입니다.

eslint와 충돌 방지

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

eslint-config-prettier는 eslint와 prettier의 충돌을 막기 위해 설치합니다.

.eslintrc.js 수정

extends 항목에 prettier를 추가하도록 다음과 같이 수정합니다.

  extends: [
    'plugin:react/recommended',
    'airbnb',
    'prettier',
  ],

.prettierrc.js 생성

// .prettierrc.js

module.exports = {
    singleQuote: true,
    // 문자열은 singleQuote로 ("" -> '')
    semi: true,
    //코드 마지막에 세미콜론이 있게 formatting
    tabWidth: 2,
    // 들여쓰기 너비는 2칸
    trailingComma: 'all',
    // 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
    printWidth: 80,
    // 코드 한줄이 maximum 80칸
    arrowParens: 'avoid',
    // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
    endOfLine: "auto",
    // windows에 뜨는 'Delete cr' 에러 해결
};