📌 ESLint, Prettier란?

ESLint는 vscode에서 코드를 작성하다가 문법적으로 오류가 발생한 곳을 사전에 미리 알려주는 도구이며, prettier는 ESLint가 알려준 오류를 즉각 고쳐주는 도구이다.

🔨 Prettier 사용 방법

프리티어 패키지를 설치한다.

1
npm i -D prettier

프리티어 구성 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// .prettierrc.cjs
module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: "always",
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: "css",
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: "preserve",
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: "as-needed",
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: "es5",
  // 탭 사용 여부
  useTabs: false,
};
  • 추가적인 부분은 공식문서를 참고하면 된다.

프리티어 제외 파일

1
2
3
4
// .prettierignore
dist;
build;
coverage;

🔨 ESLint 사용방법

ESLint 설치 및 초기화

1
npm init @eslint/config

ESLint 구성 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// .eslintre.cjs
module.exports = {
  // ...
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
  ],
  settings: {
    react: { version: require("react/package.json").version },
  },
  rules: {
    "@typescript-eslint/no-var-requires": "off",
  },
};

ESLint 플러그인

1
npm i -D eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-config-prettier

React 개발에 필요한 패키지와 프리티어 구성 통합을 위한 패키지를 설치한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// .eslintrc.cjs
module.exports = {
  // ...
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "prettier",
  ],
  plugins: ["react", "@typescript-eslint", "jsx-a11y"],
};

역시 ESLint 제외파일도 지정할 수 있다.

1
2
3
4
// .eslintignore
dist;
build;
coverage;

📌 저장할 때, prettier 자동으로 조절해주기

vscode에서 Code - Preferences - settings - default formatter - prettier로 설정