從官網(wǎng)抄些有用的話，介紹什么的建議右轉(zhuǎn)百度，熟悉npm者直接拉到中間
安裝
通過npm安裝npm install -g eslint，詳細(xì)右轉(zhuǎn)百度
入門常見bug：
1.沒用過nodejs，不知道npm中全局安裝和本地安裝有什么區(qū)別，導(dǎo)致一系列xxx找不到問題的，右轉(zhuǎn)百度解決，與eslint關(guān)系不大
2.eslint以命令行運(yùn)行。各種編輯器的eslint插件本質(zhì)只是調(diào)用命令行執(zhí)行eslint命令而已，eslint本體還是要在npm中安裝的
3.命令行--fix或者插件自動(dòng)修復(fù)無效？eslint基本只對各種空格、引號、分號有自動(dòng)修復(fù)，其他的基本靠手動(dòng)；或者沒有搞好--ext參數(shù)沒有檢查某些文件等等
了解一下就算的使用
1.配置文件
.eslintrc.js、.eslintrc.json、.eslintrc.yml之類的，后綴名并不重要eslint都認(rèn)，按照對應(yīng)格式寫就行。一個(gè)沒有的話自己想辦法搞個(gè)出來或右轉(zhuǎn)百度，下面以.eslintrc.js格式為例
2.三個(gè)相對有用的參數(shù)
(1)parser，語法分析器
ESLint 默認(rèn)使用Espree作為其解析器，你可以在配置文件中指定一個(gè)不同的解析器，只要該解析器符合下列要求:
- 它必須是本地安裝的一個(gè) npm 模塊。
- 它必須有兼容 Esprima 的接口（它必須輸出一個(gè)
parse()方法）- 它必須產(chǎn)出兼容 Esprima 的 AST 和 token 對象。
會用就行。目的在于前端框架如vue文件這些，肯定不能用默認(rèn)parser的，默認(rèn)parser只認(rèn)識原生js相關(guān)文件。這個(gè)時(shí)候直接用第三方如parser: 'babel-eslint'。
(2)env
env: {
browser: false,
node: true,
es6: true
}
告訴eslint你在什么環(huán)境下js開發(fā)。實(shí)際上主要是判斷一些常規(guī)預(yù)定義的全局變量是否合法，如瀏覽器中window、location這些，然而由于node一般可兼容瀏覽器環(huán)境的js寫法，所以即使上面設(shè)置了browser: false，使用這些全局變量時(shí)仍不會被eslint報(bào)錯(cuò)。
(3)extends
指定當(dāng)前規(guī)則配置從哪里繼承。
有兩個(gè)來源：
規(guī)則包：eslint-config-xxx，基于已有規(guī)則，提供特定的代碼風(fēng)格檢查
插件包：eslint-plugin-xxx，可提供新的規(guī)則
命名使用規(guī)律：
extends 屬性值可以省略包名的前綴 eslint-config-。
extends 屬性值可以由以下組成(指插件包)：
plugin:
包名 (可省略前綴eslint-plugin-)
/
配置名稱 (比如recommended)
"extends": [
"eslint:recommended",
"standard",
"plugin:vue/recommended"
],
數(shù)組形式，規(guī)則從左往右依次被覆蓋。
eslint:recommended屬于官方提供的最基本規(guī)則，命名不受上面約束，相對特殊。
standard即eslint-config-standard，注意npm install后才可用。
plugin:vue/recommended即eslint-plugin-vue下的recommended配置，同樣的還有base、essential、strongly-recommended等配置，可直接查看源碼或官網(wǎng)介紹。
注：一般而言直接去npm倉庫查找后，直接npm install按照上述邏輯即可使用，但是不排除例外。如eslint-plugin-vue，官方文檔指明需要額外的配置，即parser需要更改為vue-eslint-parser，若此時(shí)還想使用babel-eslint作自定義parser，則需要把它放到parserOptions.parser(非官方指定的屬性，屬于第三方自己的實(shí)現(xiàn)手段)。
關(guān)鍵使用
核心就是rules: {...}，選擇啟用哪些規(guī)則。規(guī)則的中文文檔：Rules
例子：
"rules": {
"quotes": "error"
}
關(guān)于規(guī)則的值：
"off" or 0 - 關(guān)閉規(guī)則
"warn" or 1 - 將規(guī)則視為一個(gè)警告（不會影響退出碼）
"error" or 2 - 將規(guī)則視為一個(gè)錯(cuò)誤 (退出碼為1)
數(shù)組形式：
"quotes": ["error", "double"]，第一個(gè)值是錯(cuò)誤級別，后面的值是選項(xiàng)。注意選項(xiàng)有可能是一個(gè)對象選項(xiàng)而不一定是字符串，且具體可選項(xiàng)視乎規(guī)則而定，看文檔查詢即可
規(guī)則覆蓋：
我們手動(dòng)在rules定義的優(yōu)先級最高，覆蓋其他插件擴(kuò)展的設(shè)置。
配置定義在插件中的一個(gè)規(guī)則的時(shí)候，你必須使用插件名/規(guī)則ID的形式。如：
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}
文件中例外地設(shè)置
可以在你的文件中使用以下格式的塊注釋來臨時(shí)禁止規(guī)則出現(xiàn)警告：
/* eslint-disable */
這里開始的代碼不被eslint檢查
/* eslint-enable */
這里開始的代碼被eslint檢查
你也可以對指定的規(guī)則啟用或禁用警告:
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */
插進(jìn)中的自定義規(guī)則同理，插件名/規(guī)則ID放入注釋中即可。
基本結(jié)束，下面是我的vscode和vue環(huán)節(jié)
vscode集成
其實(shí)就是裝個(gè)ESLint擴(kuò)展。
看圖，vscode打開"問題"，所有eslint報(bào)錯(cuò)都在這。鼠標(biāo)移過去，能自動(dòng)修復(fù)的圖標(biāo)會變成燈泡(上面那個(gè)錯(cuò)誤也可修復(fù)，只是鼠標(biāo)沒有移過去)，右鍵選擇解決方案，自行看英文不翻譯了。
Strings must use singlequote. eslint(quotes) [10,15]分析：
1.Strings must use singlequote.是提示信息，看不懂就繼續(xù)
2.eslint(quotes)，說明這是eslint報(bào)的問題，括號內(nèi)是eslint的提示信息，意思為quotes這條規(guī)則不符合。然后你可以文檔/百度查詢這條規(guī)則要求的格式、默認(rèn)值是什么，或者rules中直接關(guān)掉
-
[10,15]這行錯(cuò)誤的代碼在10行15列
vue中使用eslint
使用第三方模板或者@vue-cli的常見問題：項(xiàng)目下有(新建)一個(gè).eslintrc.js配置文件，然后百度再粘貼，導(dǎo)致覆蓋默認(rèn)設(shè)置產(chǎn)生各種報(bào)錯(cuò)，諸如:<template>的'<'報(bào)unexpected token、'const'報(bào)錯(cuò)、'import'動(dòng)態(tài)引入的函數(shù)報(bào)錯(cuò)等等。
使用cli新建的項(xiàng)目一般默認(rèn)配置好parser、extends這些參數(shù)，只去覆蓋rules就行。如果你看懂了上面那個(gè)eslint-plugin-vue的使用說明，那么可以完全自己寫一遍，最簡單的常用結(jié)構(gòu)應(yīng)該是：
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
