【TypeScript용】es-lint로 소스의 자동 성형을 적용시키는 방법(vs code)

가르쳐 준 내용의 메모이므로 이것만으로 동작하는지는 모릅니다,,
나중에 확인하고 업데이트하므로 느슨하게하십시오
일단 움직이는 것을 확인할 수 있었습니다!

es-lint 공식적으로 대체로 쓰는가?

플러그인 도입

이번에는 es-lint과 prettier을 함께 사용하고 싶습니다.

다음 명령을 실행합니다.
다음 두 가지는 es-lint와 prettier 형식을 충돌시키지 않아야합니다.

eslint-config-prettier

eslint-plugin-prettier

$ yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier -D

소스 코드 측 설정

.vscode 디렉토리에 extensions.json을 준비합니다.

extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
  ]
}

.vscode 디렉토리의 settings.json에 다음을 추가합니다.

settings.json

{
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

eslintrc.js와 .prettierrc의 설정은 아래와 같습니다.
최저한의 조건으로 적용하고 있으므로 다른 룰을 추가하고 싶은 경우는 extends에 추기해 가면 좋다고 합니다.

rules에는 ignore하는 조건 등을 씁니다만 이쪽은 최소한으로 하지 않으면 lint의 의미가 없어져 버리므로 가능한 한 추가하지 않게 하고 싶다.

eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
    'prettier/react',
  ],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  env: { node: true, es6: true },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-function-return-type': 0,
    'no-restricted-imports': [
      'error',
      {
        patterns: ['../'],
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

.prettierrc

{
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

이상으로 할 수 있어야합니다 ...! 할 수 있었다! !

추가

vs-code의 확장 기능으로 아래의 2개를 추가하지 않으면 자동으로 포맷은 해주지 않았습니다(그렇다)
· ESLint
· Prettier - Code formatter