背景

操作系統：win10
編輯器：vscode
項目：vue cli3 + typescript
目的：配置保存時自動格式化代碼并且修復可修復的eslint語法錯誤

生成項目配置

命令：

vue create <項目名>

linter配置選擇ESLint+Prettier：

Vue CLI v3.6.3
┌───────────────────────────┐
│  Update available: 4.0.5  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: 
  TSLint
  ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier

配置保存自動修復eslint錯誤

在沒有做任何配置時，此時，如果出現不符合eslint規則的代碼，會出現以下1 error potentially fixable with the '--fix' option.報錯:

 error  in ./src/main.ts

Module Error (from ./node_modules/eslint-loader/index.js):
error: Replace `h` with `(h)` (prettier/prettier) at src\main.ts:19:11:
  17 |   router,
  18 |   store,
> 19 |   render: h => h(App)
     |           ^
  20 | }).$mount("#app");
  21 |


1 error found.
1 error potentially fixable with the `--fix` option.

 @ multi (webpack)-dev-server/client?http://10.21.27.126:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

因此需要在eslint配置上增加--fix選項：
在項目根目錄增加vue.config.js

//vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .loader("eslint-loader")
      .tap(options => {
        options.fix = true;
        return options;
      });
  }
};

然后重啟服務，即執行npm run serve,此時就可以保存自動修復eslint問題了。

配置保存自動格式化

我們安裝了prettier插件，但是保存時代碼并沒有自動格式化，因為我們沒有對編輯器vscode進行配置。

配置eslint啟用prettier

在根目錄的.eslintrc.js中，在extends數組中增加plugin:prettier/recommended，這將在ESLint中啟用Prettier支持：

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "@vue/prettier",
    "@vue/typescript",
    "plugin:prettier/recommended" // add prettier-eslint plugin which will uses the `.prettierrc.js` config
  ],
  rules: {
    //'prettier/prettier': 'error',
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "@typescript-eslint/parser"
  },
  overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)"],
      env: {
        mocha: true
      }
    }
  ]
};

在根目錄新建.prettierrc.js，定義項目格式化代碼的規則，比如：

//.prettierrc.js
module.exports = {
    printWidth: 120,
    tabWidth: 2,
    tabs: false,
    semi: true,
    singleQuote: false,
    quoteProps: 'as-needed',
    tailingComma: 'all',
    bracketSpacing: true,
    jsxBracketSameLine: true,
    arrowParens: 'always',
    htmlWhitespaceSensitivity: 'ignore',
};

配置vscode保存啟動eslint、prettier

打開vscode，鍵盤ctrl+shift+p，輸入setting，選擇Open User Settings

image.png

1. Auto Fix On Save

2. Enable

3. Lint Task: Enable

   
   
   image.png

找到Validate點擊Edit in settings.json

image.png

{
    "window.zoomLevel": 0,
    "terminal.integrated.rendererType": "dom",
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ],
    "eslint.lintTask.enable": true,
}

到底，基本完成，我們就可以保存自動格式化代碼了。