Posts Webpack부터 TypeScript React환경을 만들기_3
Post
Cancel

Webpack부터 TypeScript React환경을 만들기_3

Webpack부터 TypeScript React환경을 만들기_3

개발자의 경우 재각기 다른 스타일, 패턴으로 코드를 쓰기 때문에 가독성이 좋지 않습니다. 특히 이미 퇴사한 개발자의 레거시된 코드를 보는건 정말 하기 싫은 업무중 하나이다. 그만큼 가독성이 낮은 코드는 개발 환경 및 업무에 커다란 장애물이 된다. 이러한 코드를 검사하고 일부는 더 나은 코드로 정정하는 도구 중 하나가 ESLint이다.

ESLint

1
2
3
4
5
yarn add -D eslint
yarn add -D eslint-plugin-react eslint-plugin-react-hooks
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y

.eslintrc.js

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
31
32
33
34
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
  extends: [
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "plugin:eslint-comments/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
  ],
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/no-var-requires": "off",
    "react/prop-types": "off",
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
  },
};

This post is licensed under CC BY 4.0 by the author.