題外話：總結(jié)應(yīng)該在7月份寫株婴，但當(dāng)時(shí)業(yè)務(wù)比較多怎虫，拖到現(xiàn)在,自己都快忘記如何安裝使用了，借此機(jī)會回顧一下困介。
相比于直接在webpack上安裝使用相關(guān)的插件大审，在sublime使用過程雖然有些繁瑣，但它不影響webpack打包座哩，如果使用webpack徒扶，在保存代碼的時(shí)候同樣也進(jìn)行了代碼檢測，會報(bào)很多錯誤根穷，可能會導(dǎo)致工程啟動不起來酷愧，要先解決格式上的錯誤才行驾诈，而sublime只是將格式不正確的代碼標(biāo)出來，不影響工程啟動溶浴，也很直觀乍迄。
我實(shí)踐的工程是基于vue腳手架的，目錄下該有的文件都有（指的是有package.json等一些列文件）士败。所以下面的步驟尤其是eslint是基于vue環(huán)境的闯两，不是基于此環(huán)境的如果參考如下步驟可能不完整。
1.Eslint的使用
Eslint官方文檔谅将，英文的漾狼，比較容易讀懂。Eslint主要用于檢測ECMAScript/JavaScript饥臂，不知道你們用沒用過JSLint或者JSHint逊躁，有異曲同工之妙。(我沒有接觸過隅熙，官網(wǎng)上這樣表述的)
官網(wǎng)上有一些基本的指令稽煤，寫的挺清楚的。如果不使用webpack或某些開發(fā)工具囚戚，有官網(wǎng)應(yīng)該就足夠了酵熙。我自己在實(shí)踐中只用了局部安裝，第一次接觸總是會小心翼翼驰坊。
ps：要注意node環(huán)境匾二，要在6.14及以上
①工程下安裝eslint
npm i eslint --save-dev //本地安裝
②配置一下eslint，官網(wǎng)上給的命令是
eslint --init //命令在node modules> .bin里執(zhí)行
輸入命令后會給你展示很多問題拳芙，問你使用什么語言察藐，字符串用雙引號還是單引號balabala等
但是
也可以不用這個(gè)命令配置這些東西，eslintrc.js舟扎，都有人寫好了转培，直接放在工程根目錄下就可以了！浆竭！我在實(shí)踐的過程中用的就是eslintrc.js文件。
大致結(jié)構(gòu)如下：
module.exports = {
//此項(xiàng)是用來指定eslint解析器的惨寿，解析器必須符合規(guī)則邦泄，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
"parser": 'babel-eslint',
//此項(xiàng)是用來指定javaScript語言類型和風(fēng)格，sourceType用來指定js導(dǎo)入的方式裂垦，默認(rèn)是script顺囊，此處設(shè)置為module，指某塊導(dǎo)入方式
"parserOptions": {
"sourceType": 'module'
},
//此項(xiàng)指定環(huán)境的全局變量蕉拢，下面的配置指定為瀏覽器環(huán)境
"env": {
"browser": true,
"es6":true
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
// 此項(xiàng)是用來配置標(biāo)準(zhǔn)的js風(fēng)格特碳，就是說寫代碼的時(shí)候要規(guī)范的寫诚亚，如果你使用vs-code我覺得應(yīng)該可以避免出錯
"extends": 'standard',
"rules": {
//檢測的規(guī)則
}
}
檢測規(guī)則官網(wǎng)上有介紹，我沒有看午乓，直接看的js文件注釋知道了一個(gè)大概站宗。
babel-eslint也是要使用到的，這個(gè)之后會解釋益愈。
③弄完eslint相關(guān)就要下載sublime插件了
ctrl+shift+p 輸入install回車梢灭，安裝sublimelinter，再安裝sublimelinter-eslint
安裝完sublimelinter蒸其，找到package settings敏释，會看到里面已經(jīng)有sublimelinter了，修改其設(shè)置保存下來
// SublimeLinter Settings - User
{
"debug": true,
// "delay": 0.2,
"lint_mode": "manual",
// "syntax_map": {
// "html (django)": "html",
// "html (rails)": "html",
// "html 5": "html",
// "css": "css",
// "javascript (babel)": "javascript",
// "magicpython": "python",
// "php": "html",
// "python django": "python",
// "pythonimproved": "python"
// },
"styles": [
{
"scope": "region.yellowish markup.warning.sublime_linter",
"types": ["warning"]
},
{
"scope": "region.redish markup.error.sublime_linter",
"types": ["error"]
},
{
"priority": 1,
"icon": "dot",
"mark_style": "outline"
}
],
"linters": {
"eslint": {
// 讓eslint能夠識別html頁面中嵌入的JS
"selector": "source.js | text.html.basic"
},
// 下面三個(gè)sublimelinter默認(rèn)都支持摸袁，為防止檢查干擾钥顽，需要禁用它們
"csslint": {
//"disable": true
},
"stylelint":{
//"disable":true
},
"htmlhint": {
//"disable": true
}
}
}
這里面 stylelint htmlhint csslint eslint就都有了，之后再配置stylelint和htmlhint就不用再修改這個(gè)文件了靠汁。
④這時(shí)我們還是打開ctrl+shift+p蜂大，輸入sublimeLinter，會看到下面這個(gè)圖
有一行是默認(rèn)選中的膀曾，敲回車县爬，編輯器會給我們一個(gè)提示
Cannot find module 'babel-eslint' //找不到babel-eslint
前面有提到，編輯器很聰明添谊，找不到這個(gè)模塊提示你财喳，所以我們就知道接下來應(yīng)該安裝這個(gè)模塊了。(先不用安裝斩狱，先繼續(xù)往下看６摺！)
npm i babel-eslint --save-dev //局部安裝
npm i -g babel-eslint //全局安裝
在運(yùn)行一遍所踊，接著提示你少一些東西
Cannot find module 'eslint-config-standard'
看來想用sublime配合eslint檢測Js文件泌枪，依賴的東西還挺多，依次的秕岛，最后能夠知道要安裝這些:
npm i babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev
安裝完這些之后碌燕，再次運(yùn)行 指令(啊這是最后一次了)，bingo!你會看到你的JS文件有好多紅色的框出現(xiàn)（在*.vue上使用這個(gè)指令并沒有出現(xiàn)任何效果继薛，應(yīng)該是檢測vue要用別的修壕。），鼠標(biāo)移上去就告訴你標(biāo)紅的原因遏考。
是不是挺可怕的哈哈慈鸠，慢慢改代碼吧。這些都是根據(jù)eslintrc.js文件里規(guī)定的規(guī)則檢測的灌具，規(guī)則多檢測的就嚴(yán)格一些青团。
關(guān)于Eslint大概的步驟就是這些了譬巫，sublime上還有自動修復(fù)錯誤的插件，我沒有寫也沒有實(shí)踐督笆，大家可以了解一下芦昔，是Eslint-Formatter。
第4個(gè)步驟里寫的那些npm指令胖腾，作用也不在此羅列了烟零，github上都有，看看還是有好處的咸作，起碼知道它起什么作用對不對锨阿？
2.StyleLint的使用
有了前面Eslint的安裝鋪墊，StyleLint就容易多了记罚，
StyleLint官網(wǎng)墅诡，StyleLint在sublime上的使用，只看這兩個(gè)就夠了桐智，官網(wǎng)上展示的代碼也很簡單粗暴末早。
npm i stylelint --save-dev//安裝 stylelint
然后在sublime安裝sublimelinter-stylelint插件
既然檢測js文件我們有eslintrc.js，檢測css當(dāng)然要有.stylelintrc啦说庭，仍然是放在根目錄然磷，只不過這個(gè)文件沒有后綴。
未完持續(xù).....
