ESLint, Prettier 설치하는 방법

이미 npm install 설치한 뒤..

 

1. package.json

devDependencies에 종속성 업데이트 (없으면 설치할 때 에러남!)

"devDependencies": {
  "eslint": "^8.0.0",
  "@typescript-eslint/eslint-plugin": "^5.5.0",
  "@typescript-eslint/parser": "^5.5.0"
}

 

2. eslint 설치

npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

-> package.json에 추가한 내용 자동으로 바뀜.

 

3. .eslintrc.json 파일 생성

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:@typescript-eslint/recommended',
        'airbnb',
        'airbnb/hooks',
        'airbnb-typescript',
        'prettier',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'
    ],
    plugins: ['@typescript-eslint'],
    parserOptions: {
        project: './tsconfig.json'
    }
}

 

4. prettier 설치

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

-> package.json에 자동으로 추가됨.

 

5. .prettierrc.json 파일 생성

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true
}

 

6. 설정

1) Settings > Prettier
Prettier package 선택
On save 체크

2) Settings > ESLint
Automatic ESLint configuration 체크