ESLint & Prettier-1000

ESLint

1. npm ESLint 설치

npm install -D eslint, @eslint/js

// 9.1.1 버전 설치 예시
npm i -D eslint@9.1.1 @eslint/js

2. ESLint 설정 파일

• eslint.config.js 파일 생성 → 프로젝트에 맞는 규칙 정의

import pluginJs from '@eslint/js';

export default [
  pluginJs.configs.recommended,
  {
    rules: {
      semi: 'error', // 세미콜론
      eqeqeq: ['error', 'always'], // 엄격한 연산
    },
  },
];

3. package.json에 추가

"type": "module", <- 추가

4. ESLint 실행

npx eslint index.js

5. ESLint 실행 및 수정

npx eslint index.js --fix

Prettier

1. Prettier 설치

npm install -D prettier

2. prettier 설정 규칙 파일 생성

• .prettierrc 파일 생성

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",   // es5에서 허용하는 곳만 쉼표 추가
  "tabWidth": 2
}

3. prettier 실행 및 수정

npx prettier index.js --write

ESLint와 Prettier 통합 사용

1. 설치

npm i -D eslint-config-prettier eslint-plugin-prettier

2. eslint.config.js에 코드 추가

import pluginJs from '@eslint/js';
import prettier from 'eslint-plugin-prettier/recommended';  <- 추가

export default [
  pluginJs.configs.recommended,
  prettier,  <- 추가
  {
    rules: {
      semi: 'error', // 세미콜론
      eqeqeq: ['error', 'always'], // 엄격한 연산
    },
  },
];

3. ESLint 실행(prettier도 같이 실행됨)

npx eslint index.js --fix

VSCode에서 파일 저장 시 eslint&prettier 자동 실행

1. .vscode 폴더 생성

2. .vscode 폴더 하위에 settings.json 파일 생성

3. settings.json에 코드 작성

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}