vscode構成eslint+prettierフォーマット自動検証修復を実現

1、Vscodeはこの2つのプラグインを検索してインストールする

ESlint Prettier

インストール完了後、ctrl+shit+pを押すsettingを入力.json、プリファレンスを選択:設定(json)を開いて車に戻り、設定に次のように挿入します.

   // eslint   ，       
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //     prettier        
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    //     eslint   
    "eslint.workingDirectories": [
        { "mode": "auto" }
    ],

2、あなたのプロジェクトに以下のプラグインをインストールします.

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev

3、eslintプロファイルの新規作成

module.exports = {
  parser: "@typescript-eslint/parser", //   ESLint   
  parserOptions: {
    sourceType: "module", //       
  },
  extends: [
    "plugin:@typescript-eslint/recommended", //   @ typescript-eslint / eslint-plugin      
    "prettier/@typescript-eslint", //   eslint-config-prettier     Prettier   ESLint  
    "plugin:prettier/recommended" //   eslint-plugin-prettier eslint-config-prettier，          ，                 
  ],
  rules: {
    //   ESLint     。                
    //    "@typescript-eslint/explicit-function-return-type": "off",
  },
};

4、Prettierの配置

{
  "printWidth": 80, //        
  "tabWidth": 2, //            
  "useTabs": false, //            
  "semi": true, //         
  "singleQuote": false, //           
  "trailingComma": "es5", //            
  "bracketSpacing": true, //               
  "arrowParens": "always", //             
  "htmlWhitespaceSensitivity": "css", //  HTML          
  "endOfLine": "lf" //       ，           ，     auto   
}