js eslint从零使用

从官网抄些有用的话，介绍什么的建议右转百度，熟悉npm者直接拉到中间

安装

通过npm安装npm install -g eslint，详细右转百度

入门常见bug：
1.没用过nodejs，不知道npm中全局安装和本地安装有什么区别，导致一系列xxx找不到问题的，右转百度解决，与eslint关系不大
2.eslint以命令行运行。各种编辑器的eslint插件本质只是调用命令行执行eslint命令而已，eslint本体还是要在npm中安装的
3.命令行--fix或者插件自动修复无效？eslint基本只对各种空格、引号、分号有自动修复，其他的基本靠手动；或者没有搞好--ext参数没有检查某些文件等等

了解一下就算的使用

1.配置文件
.eslintrc.js、.eslintrc.json、.eslintrc.yml之类的，后缀名并不重要eslint都认，按照对应格式写就行。一个没有的话自己想办法搞个出来或右转百度，下面以.eslintrc.js格式为例

2.三个相对有用的参数
(1)parser，语法分析器

ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求:

它必须是本地安装的一个 npm 模块。

它必须有兼容 Esprima 的接口（它必须输出一个 parse() 方法）

它必须产出兼容 Esprima 的 AST 和 token 对象。

会用就行。目的在于前端框架如vue文件这些，肯定不能用默认parser的，默认parser只认识原生js相关文件。这个时候直接用第三方如parser: 'babel-eslint'。

(2)env

env: {
    browser: false,
    node: true,
    es6: true
  }

告诉eslint你在什么环境下js开发。实际上主要是判断一些常规预定义的全局变量是否合法，如浏览器中window、location这些，然而由于node一般可兼容浏览器环境的js写法，所以即使上面设置了browser: false，使用这些全局变量时仍不会被eslint报错。

(3)extends
指定当前规则配置从哪里继承。

有两个来源：
规则包：eslint-config-xxx，基于已有规则，提供特定的代码风格检查
插件包：eslint-plugin-xxx，可提供新的规则

命名使用规律：

extends 属性值可以省略包名的前缀 eslint-config-。
extends 属性值可以由以下组成(指插件包)：
plugin:
包名 (可省略前缀eslint-plugin-)
/
配置名称 (比如 recommended)

"extends": [
        "eslint:recommended",
        "standard",
        "plugin:vue/recommended"
    ],

数组形式，规则从左往右依次被覆盖。
eslint:recommended属于官方提供的最基本规则，命名不受上面约束，相对特殊。
standard即eslint-config-standard，注意npm install后才可用。
plugin:vue/recommended即eslint-plugin-vue下的recommended配置，同样的还有base、essential、strongly-recommended等配置，可直接查看源码或官网介绍。

注：一般而言直接去npm仓库查找后，直接npm install按照上述逻辑即可使用，但是不排除例外。如eslint-plugin-vue，官方文档指明需要额外的配置，即parser需要更改为vue-eslint-parser，若此时还想使用babel-eslint作自定义parser，则需要把它放到parserOptions.parser(非官方指定的属性，属于第三方自己的实现手段)。

关键使用

核心就是rules: {...}，选择启用哪些规则。规则的中文文档：Rules
例子：

    "rules": {
       "quotes": "error"
    }

关于规则的值：

"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)
数组形式：
"quotes": ["error", "double"]，第一个值是错误级别，后面的值是选项。注意选项有可能是一个对象选项而不一定是字符串，且具体可选项视乎规则而定，看文档查询即可

规则覆盖：

我们手动在rules定义的优先级最高，覆盖其他插件扩展的设置。
配置定义在插件中的一个规则的时候，你必须使用插件名/规则ID的形式。如：

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

文件中例外地设置

可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告：

/* eslint-disable */
这里开始的代码不被eslint检查
/* eslint-enable */
这里开始的代码被eslint检查

你也可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

插进中的自定义规则同理，插件名/规则ID放入注释中即可。

基本结束，下面是我的vscode和vue环节

vscode集成

其实就是装个ESLint扩展。

image.png

看图，vscode打开"问题"，所有eslint报错都在这。鼠标移过去，能自动修复的图标会变成灯泡(上面那个错误也可修复，只是鼠标没有移过去)，右键选择解决方案，自行看英文不翻译了。

Strings must use singlequote. eslint(quotes) [10,15]分析：
1.Strings must use singlequote.是提示信息，看不懂就继续
2.eslint(quotes)，说明这是eslint报的问题，括号内是eslint的提示信息，意思为quotes这条规则不符合。然后你可以文档/百度查询这条规则要求的格式、默认值是什么，或者rules中直接关掉

[10,15]这行错误的代码在10行15列

vue中使用eslint

使用第三方模板或者@vue-cli的常见问题：项目下有(新建)一个.eslintrc.js配置文件，然后百度再粘贴，导致覆盖默认设置产生各种报错，诸如:<template>的'<'报unexpected token、'const'报错、'import'动态引入的函数报错等等。

使用cli新建的项目一般默认配置好parser、extends这些参数，只去覆盖rules就行。如果你看懂了上面那个eslint-plugin-vue的使用说明，那么可以完全自己写一遍，最简单的常用结构应该是：

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: ['plugin:vue/essential'],
  rules: {}
}

注：eslint-plugin-vue与eslint-plugin-html存在冲突，具体请看文档。babel-eslint直接作parser也可以，但是效果一般，且不太支持eslint-plugin-vue