vue-cli3项目配置eslint代码规范的完整步骤

下面我会给出“vue-cli3项目配置eslint代码规范的完整步骤”的完整攻略，具体步骤如下：

步骤一：创建vue-cli3工程

首先需要创建一个vue-cli3工程，执行命令 vue create <project-name> 即可创建一个名为 <project-name> 的vue-cli3工程。这一步可以按照官方文档进行创建。

步骤二：安装eslint

在vue-cli3工程中，我们需要先通过npm安装eslint，执行命令 npm install eslint --save-dev 即可将eslint安装到我们的开发依赖中。

步骤三：选择代码规范

为了实现代码规范化，需要选择一种或多种代码规范，例如eslint-plugin-standard、eslint-plugin-vue、eslint-plugin-airbnb-base等等。这里以eslint-plugin-standard为例，执行命令 npm install eslint-plugin-standard --save-dev 即可安装。

步骤四：创建.eslintrc.js文件

在工程根目录下创建名为.eslintrc.js的文件（如果已有该文件，则跳过此步骤），并在该文件中添加代码规范，例如：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
    "prettier/vue"
  ],
  parserOptions: {
    parser: "babel-eslint"
  },
  plugins: ["vue", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": [
      "error",
      {
        singleQuote: true,
        semi: true,
        trailingComma: "none",
        bracketSpacing: true,
        jsxBracketSameLine: true
      }
    ]
  }
};

上面的设置已经包含了eslint、vue、prettier三个插件的设置。

接下来，为了配合prettier优美的代码风格，需要安装以下依赖：npm install --save-dev eslint-config-prettier prettier-eslint-cli eslint-plugin-prettier

步骤五：配置npm run lint命令

修改package.json文件script如下：

"scripts": {
  "lint": "eslint --ext .js,.vue src/",
  "lint-fix": "eslint --fix --ext .js,.vue src/"
}

其中，npm run lint 表示检查src目录下所有.js和.vue文件的代码规范。npm run lint-fix 表示自动修复src目录下所有.js和.vue文件的代码规范。

步骤六：配置VS Code插件

推荐安装VS Code插件ESLint，并在VS Code用户设置中开启“自动保存检查格式”(即："editor.formatOnSave": true）。这样，在写代码的时候，在适当位置会提示当前行规范是否符合，以及不符合的错误信息等信息，非常方便。你可以试着在代码中添加几个不符合规范的小错误，然后保存，看看插件是否生效。

到这里，就完成了vue-cli3项目配置eslint代码规范的完整步骤。注意，如果之前已经有工程，执行上述步骤时需要注意备份、修改文件而不是直接替换。