背景

操作系统：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,
}

到底，基本完成，我们就可以保存自动格式化代码了。