ESLint & Prettier 설정하기

ESLint는 코드의 오류를 사전에 발견해주는 툴이고, Prettier는 코드를 가독성 있게 작성할 수 있게 도와주는 툴이다. 뭐 꼭 사용할 필요는 없지만, 클린 코드를 만들기 위해서는 사용해도 좋을 것 같다.

ESLINT

우선 vscode를 사용하고 있다고 가정을 하고, ESLint를 다운받아준다.

그 다음에 에디터 설정을 해주어야 하는데 cmd + shift + p를 누르고 open default settings을 누르고, 맨 겉에 있는 중괄호의 마지막에

"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],

Prettier

prettier도 설치한 후에

npm i -D eslint prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

필요한 드라이브를 설치하고
사용할 폴더의 밑에 .eslintrc.js라는 파일을 만들어

module.exports = {
  root: true,
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        doubleQuote: true,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'prefer-const': 'off',
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

를 작성하고 사용한다.(새부 내용은 잘 모르겠다.. 필요할 때마다 인터넷에 검색하여 바꾸어가며 사용하자)