[React.js] 요즘 잘 사용하고 있는 VSCode에서의 Typescript ESLint/Prettier 환경 함께 설정하기

안녕하세요.

오늘은 제가 가장 최근까지 좋아하는, 빡센 규정은 아니지만 적당한 규정의 ESLint/Prettier 설정에 대해 공유하려고 합니다.

 

프로젝트를 시작할 때 린터와 포매터를 설정하는 것이 의외로 오래 걸리는 과정 중 하나인데요.

그래서 겸사겸사 저도 기록하는 용도로 간단하게 적어보고자 합니다.

 

참고로 린터와 포매터의 개념에 대한 글은 이전에 적어둔 글이 있어 달아두기만 하겠습니다.

 

1. Package install

가장 우선적으로 prettier와 eslint의 본체와 플러그인을 다운 받아야 합니다.

 

다만 CRA로 만들어진 React 프로젝트의 경우, 본 링크에서 확인할 수 있듯이 기본적인 eslint plugin들을 이미 포함하고 있습니다.

보통 CRA로 프로젝트를 생성하는 경우가 많기 때문에 이번엔 CRA에서 포함하고 있는 프로젝트는 제외하고 install 하겠습니다.

npm install -D eslint eslint-config-prettier eslint-config-standard eslint-plugin-prettier eslint-import-resolver-typescript eslint-plugin-n eslint-plugin-promise

2. 프리티어 설정 파일 생성하기

프로젝트 최상단 경로에 .prettierrc.json 파일을 생성해줍니다.

{
  "endOfLine": "lf",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}

3. ESLint 설정 파일 생성하기

프로젝트 최상단 경로에 .eslintrc.json 파일을 생성해줍니다.

사실 얘가 핵심입니다. 제 취향으로만 구성되어 있습니다.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "standard",

    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",

    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",

    "plugin:prettier/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "import", "prettier"],
  "rules": {
    "prettier/prettier": "warn",
    "newline-after-var": ["warn", "always"],
    "newline-before-return": "error",
    "import/order": [
      "warn",
      {
        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": "./tsconfig.json"
    }
  }
}

4. VSCode ESLint extension 설치하기

해당 익스텐션을 설치하고, enable 시켜줍니다.

5. 파일 저장 시 자동 포매팅 설정하기

마지막 설정입니다.

프로젝트 최상단 경로에 .vscode/settings.json 파일을 생성해줍니다.

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

이제 파일을 저장할 때마다 자동으로 설정에 맞게 코드가 수정되는 것을 볼 수 있습니다.

 

혹시 동일하게 진행했는데도 불구하고 동작하지 않는다면, 일단 VSCode를 재시작 하는 것을 추천드립니다.

이후에도 제대로 동작하지 않는다면 피드백 부탁드립니다.

 

감사합니다.