vue项目的ESLint+Vetur格式化方案

如果是vue-cli创建的项目，并且选择了eslint校验的，使用vsCode编辑器开发只需要做下面的配置。

1、vsCode里安装ESLint + Vetur插件

image.png image.png

2、vsCode设置

command + shift + p 组合键打开设置

image.png

工作区设置是每个项目可以独立配置
直接打开设置是所有的项目都生效

在工作区设置里粘贴下面的json代码保存重启vsCode。

{
  "eslint.alwaysShowStatus": true,
  "eslint.options": {"configFile": ".eslintrc.js"},
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "eslint.format.enable": true,
  "eslint.enable": true, // 启用eslint检查，如果某个项目不想检查格式可以写false
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

后面再写代码，保存会自动格式化，不符合ESLint规范的代码在编辑器上会显示错误。

vue-cli创建的使用ESLint校验项目，会自动帮我们生成.eslinttrc.js文件

.eslinttrc.js文件内容：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

可以配置校验忽略文件 .eslintignore，ESLint不会校验这些文件的代码格式。

build/*.js
src/assets
/dist
/node_modules
/package-lock.json
.DS_Store

如果不想使用eslint校验，把.eslinttrc.js文件里的'@vue/standard'注释即可