prettier, eslint 가져올 때 반한 일 2021 새해

prettier, eslint 정보

prettier,eslint 사용하시겠습니까?
Former prettier와 JavaScript의 코드를 검사하는 eslint은 JavaScript 개발에 없어서는 안 될 것입니다.
변화가 많은 전단에 맞추어prettier/eslint도 각 프레임과 포장을 따라 계속 진화했다(감사합니다).
하지만 이 때문에 예전 설정이 이제는 비장려로 바뀌면서 작법도 크게 달라졌다.
JavaScript(Type Script)에서 자신에게 적용할 수 있는 설정을 이 기사에 소개하고 싶습니다.복잡해지기 쉬운 VScode에 대한 format도 소개되니 꼭 참고해주세요.

요약

형식은prettier(eslint-config-prettier 사용)

VScode의 설정은 편집기입니다.codeAction OnSave 및 편집기defaultFormater를 설정하십시오

컨디션

Node.js v14.4.0

@typescript-eslint/eslint-plugin　4.11.1

@typescript-eslint/parser"　4.11.1

eslint"　7.17.0

eslint-config-prettier　7.1.0

prettier　2.2.1

typescript　4.1.3

개요는 참고 보도가 상세하기 때문에 요점만 설명한다.

포맷은 프리티어에게 맡기도록 하겠습니다.

다른 훌륭한 글들도 언급했으니 격식은 프리티어에게 맡겨라.
Integrating with Linters
eslint 등 인원소는 규칙뿐만 아니라 코드를 포맷하는 기능도 포함한다.이 형식의 기능을 무효화하여 기능 충돌을 방지하고prettier에 형식을 의뢰하십시오.
구체적으로 eslint-config-prettier를 가져옵니다.
구성 파일은 다음과 같습니다.eslint에 대한 설정은 Configuring ESLint을 보십시오.
eslintrc.js

module.exports = {
  root: true,
  env: {
    es2020: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.eslint.json'],
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/@typescript-eslint',
  ],
  rules: {},
};

extends의 마지막에prettier를 불러와eslint 형식의 기능을 덮어쓰고 기능 충돌을 제거합니다.
parser에서 @typescript/eslint/parser를 사용하여 TypeScript 파일을 읽습니다.eslint용 설정 파일을 만듭시다.
tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    ".eslintrc.js"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

포맷, 포맷.prettierrc로 설정합니다. (다른 것은 YAML 또는 JavaScript로 기술할 수도 있습니다.)
.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all"
}

많은 설정 항목이 있지만 기본값이 설정되어 있기 때문에 설정을 간단하게 보존하십시오.
https://prettier.io/docs/en/options.html

VScode의 설정은 편집기입니다.codeAction OnSave 및 편집기defaultFormater 설정

다음은 VScode의 format 설정 방법입니다.
다음 확장자를 설치합니다.
ESlint
Prettier
VScode에서 작업 공간 바로 아래.VSCode의 파일에 settings.json를 놓으면 VScode와 관련된 설정을 설정할 수 있습니다.
이번에는 파일을 저장한 후 자동으로 포맷하도록 설정합니다.
.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "editor.lineNumbers": "on",
  "editor.rulers": [80],
  "editor.wordWrap": "on",
  "eslint.packageManager": "yarn",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "npm.packageManager": "yarn",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

이곳의 기본 원칙은 포맷은prettier가 결정하는 것이다.
다음 설정은 vscode-eslintv2 변경 사항을 저장한 후 eslint 코드 동작을 실행하는 기능입니다.eslint.autoFixOnsave가 폐지되었습니다.

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

자동 형식은prettier에 의해 결정됩니다.
editor.formatOnSave를 사용합니다.이것은 저장할 때 포맷하는 설정입니다.
파일마다 확장자 설정 "editor.defaultFormatter": "esbenp.prettier-vscode" 을 통해prettier 형식으로 실행합니다.
이렇게 하면 eslint과prettier의 설정이 완성됩니다.
상기 설정을 통해 typescript, json 파일 등eslint를 통해 문법 검사와prettier를format할 수 있습니다.코드의 전체 이미지는 아래 창고를 보십시오.
https://github.com/YouheiNozaki/todo-app-server

추가 가능

husky,lint-staged를 사용하여git commiit에서 eslint,prettier를 실행합니다.
npm-run-all,package를 사용합니다.json을 효율적으로 실행합니다.
상세한 상황은 상술한 창고를 보십시오.

참고 문장

https://qiita.com/mysticatea/items/3f306470e8262e50bb70
https://qiita.com/notakaos/items/85fd2f5c549f247585b1
https://blog.ojisan.io/prettier-eslint-cli