Visual Studio Code安装ESLint

水深无声 2022-04-06 14:59 397阅读 0赞

### 安装 Visual Studio Code ESLint 插件 ###

打开 Visual Studio Code ，首先使用快捷键 `Ctrl` + `Shift` + `P` 调出VsCode的控制台，然后输入下面的命令安装`ESLint`插件：

ext install ESLint

### 使用 NPM 安装 ESLint ###

为了方便我们通过`ESLint命令行工具`来帮助我们生成`ESLint`相关的配置，我们需要进行全局安装：

npm install eslint -g

安装完成后我们使用命令行工具进入到需要引入`ESLint`的项目的目录中，然后输入下面的命令进行`ESLint`的初始化操作：

eslint --init

执行命令后，我们选择相应的代码风格，也可以自定义，在这里我使用`standard`风格的规则

安装完成后我们可以看到除了`ESLint命令行工具`为我们生成的`ESLint`依赖包，还有一个特殊的`.eslintrc.json`文件，该文件是`ESLint`的配置文件，如下所示：

{
        "extends": "standard",
        "installedESLint": true,
        "plugins": [
            "standard"
        ]
    }

安装完成后我们使用 Visual Studio Code 打开项目，可以看到`ESLint`插件在运行了，不过给了我们一个错误提示：

这时候我们需要在当面目录下输入下面的命令安装相应的开发依赖包：

npm install eslint-plugin-promise --save-dev

## 自定义配置项    ##

### \----根据[规则文档][Link 1]，编辑.eslintrc.js文件内容。 ###

module.exports = {
        "env": {
            "node": true
        },
        "rules": {
            // 强制使用一致的缩进
            "indent": ["warn", "tab"],
            // 禁止空格和 tab 的混合缩进
            "no-mixed-spaces-and-tabs":1,
            // 禁用 debugger
            "no-debugger": 1,
            // 禁止不必要的布尔转换
            "no-extra-boolean-cast": 1,
            // 强制所有控制语句使用一致的括号风格
            "curly": 1,
            // 禁止使用多个空格
            "no-multi-spaces": 1,
            // 要求在函数标识符和其调用之间有空格
            "func-call-spacing": 1,
            // 强制在函数括号内使用一致的换行
            "function-paren-newline": ["warn", "never"],
            // 强制隐式返回的箭头函数体的位置
            "implicit-arrow-linebreak": 1,
            // 强制在对象字面量的属性中键和值之间使用一致的间距
            "key-spacing": 1,
            // 强制在关键字前后使用一致的空格
            "keyword-spacing":1,
            // 要求调用无参构造函数时有圆括号
            "new-parens":1,
            // 禁止出现多行空行
            "no-multiple-empty-lines":1,
            // 要求使用分号代替 ASI
            "semi":["warn","always"],
            // 要求操作符周围有空格
            "space-infix-ops":1
        }
    };

配置内容也可以写在package.json中，具体规则也是写在rules里。有时用vue-cli生成的项目会在package.json里看到这样的配置：

"eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
      }
    }

--------------------

在 Vue-cli 创建的项目中，在代码顶部添加一行注释

** /\* eslint-disable \*/**

这样，ESLint 在校验的时候就会跳过后面的代码，禁用单个 js 文件的ESLint 语法校验，但整个项目依然保留 ESLint 的校验规则

[Link 1]: http://eslint.cn/docs/rules/