前端工程化使用Eslint和Prettier规范化开发（踩坑）

** 工欲善其事必先利其器，前端开发中对团队风格要求越来越高，这个时候就需要我们通过一些插件规范代码风格，eslint+prettier无疑是最好用的组合，但是方便归方便，在使用过程中我们总是会遇到各种各样的坑，为了避免后续踩坑，这里以vscode的安装为工具做个示例。觉得受用的给个赞吧(●’◡’●)！**

第一步 清除多余的插件，还原默认配置

对新手来说，vscode的扩展并不是越多越好的，特别是当你还不那么会调整配置的时候。所以安装之前就先清理扩展和配置，清理扩展很简单，在扩展列表中，将那些插件逐项卸载就行，我就仅保留了vscode的中文包，以及Debugger for Chrome，这两个插件包，而环境配置方面，VSCode中有三种类型的配置文件：
默认配置文件（优先级最低）
用户配置文件（优先级次之）
工程配置文件 （优先级最高）
所以，我们只需要清除用户配置文件的值，以及工程配置文件的值，就是还原到默认配置了，我们可以用快捷键【ctrl+,】打开设置界面。如下图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/594b20c4a0e647c68ac30e6656c2dbfd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR56uv5LmL5LiKQGphY2s=,size_20,color_FFFFFF,t_70,g_se,x_16

分别在选择用户和工作区的时候，点击右上角的打开设置的json文件，用户的json文件和工作区的json文件，虽然都是叫settings.json，但在路径上是不同的，一个是在项目目录的.vscode目录下，一个是在C盘的用户目录下的。将这两个文件中的配置都全部清除，仅保留{}。这样根据vscode的配置优先级来说，就是默认配置了。

第二步 安装Vetur插件

在Vscode的扩展中搜索Vetur，Vetur的功能就是语法突出显示，错误提示，格式化，自动完成等
安装之后，js/css文件都有高亮显示了，但是保存之后可能没有格式化，我们需要做一下特殊设置

下一步，我们开始配置Vetur中的风格处理，无论是Vetur官网，还是vscode设置中显示，vetur的formatter大多采用的Prettier风格。有2个地方可以进行配置prettier风格参数，一个是vscode的配置文件settings.json，还有一个就是在项目根目录下创建.prettierrc文件，文件内容也是采用json格式，但是需要注意：根据官网的说明，一旦在项目的根目录下存在.prettierrc文件，则settings.json中的prettier配置就会无效。

// settings.json
 
{
   
  ......
 
  "vetur.format.defaultFormatterOptions": {
   
    "prettier": {
   
      // Prettier option here
      "trailingComma": "es5", // 多行时，尽可能打印尾随的逗号
      "tabWidth": 4, // 会忽略vetur的tabSize配置
      "useTabs": false, // 是否利用tab替代空格
      "semi": true, // 句尾是否加;
      "singleQuote": true, // 使用单引号而不是双引号
      "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
    }
  }
}

// .prettierrc
{
   
    "tabWidth": 4, // 会忽略vetur的tabSize配置
    "useTabs": false, // 是否利用tab替代空格
    "semi":false, // 句尾是否加;
    "trailingComma": "none", // es5多行时，尽可能打印尾随的逗号
    "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
    "vueIndentScriptAndStyle":true,
}

3.安装ESLint插件

在搞定了Vetur之后，我们来安装ESlint，在扩展商店搜索eslint，很容易就找到这个插件，相关的插件还有很多，例如Prettier ESLint等，我们一个一个来，先搞定ESLint再说，看eslint插件的说明，单单vscode中安装eslint是不够的，还需要项目中安装eslint依赖包。也就是需要在package.json中需要eslint，而eslint是针对很多种开发语言的，针对每一个开发语言都有一个独立的插件，对应vue的就是eslint-plugin-vue了，我们需要在项目目录下执行下面语句来执行安装。

> npm install -D eslint eslint-plugin-vue --registry=https://registry.npm.taobao.org

安装完eslint和eslint-plugin-vue之后，我们还需要创建eslint的配置文件，建议在项目根目录下,用命令行方式执行eslint --init来创建配置文件，因为生产的.eslintrc.js文件就在你当前执行命令的目录下。注意：我之前想在vscode的终端上直接执行命令，可惜提示什么策略不对，就是权限不足，懒得再去搞什么配置策略，直接用cmd命令，在项目目录下执行就行。

// .eslintrc.js
module.exports = {
   
    "env": {
       //用来预定义全局环境变量，常用的有browser，es6,node,jest,jquery
        "browser": true,
        "es6": true,
        "node": true
    },
    
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
     // 支持的 JavaScript 语言选项
        "parser": "babel-eslint",   // 默认使用Espree作为其解析器,除此之外就Esprima,Babel-ESLint,@typescript-eslint/parser
        "ecmaVersion": 12, // ECMAScript 版本,默认设置为 3，5（默认）,也可以年份，2015（同 6），2012（as 12）
        "sourceType": "module"  // "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    },
    "plugins": [    //eslint支持使用第三方插件，需要npm先安装,后使用
        "vue"   // 可以用package的名称,eslint-plugin-vue，也可以省略eslint-plugin-,直接填写vue
    ],
    "rules": {
   
        // 强制使用单引号 
        'quotes': ['error', 'single'],
        // 在块级作用域外访问块内定义的变量是否报错提示 
        'block-scoped-var': 0,
    }
};

安装完这个，我们就可以在vscode中发现，eslint已经生效了。为了避免eslint对没必要的文件也进行检查，添加一个.eslintignore文件，保存需要略过的文件和目录

# .eslintignore
build/*.js
src/assets
public
dist
.eslintrc.js

下一步需要在vscode中增加eslint的相关配置。

// settings.json
{
   
.......
 
  // 指定eslint校验的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  // "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
   
    "source.fixAll.eslint": true
  },
  "eslint.run": "onSave",   // 保存就校验
}

接下来，在package.json中补上eslint校验的命令行，我们在package.json中，找到scripts节点，增加一行新的启动命令 “lint”: “vue-cli-service lint”。

//package.json
{
   
  ......
 
  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
 
  ......
}

可以根据自己的习惯来修改这些规则，注意所有规则第一个值适用下面定义，0或off：关闭；1或warn：提示警告，但不影响代码存在；2或error：提示错误，执行ESLint校验会导致失败。完整的.eslintrc.js如下：

// .eslintrc.js
module.exports = {
   
    "root": true,    // 表明这就是根目录了，停止去父级目录中寻找配置
    "env": {