寫在前面

這兩種方式的配置基本相同，都是配一下node地址，Eslint執(zhí)行文件的地址，Eslint的配置文件（就是.eslintrc）等，而且網(wǎng)上很方便就可以搜索到，就不多說(shuō)了。

之所以要比較一下兩者的差異，就是因?yàn)閷?duì)于沒(méi)有配置過(guò)的同學(xué)來(lái)說(shuō)，看了諸如“怎么在webstorm下配置Eslint”的問(wèn)題下面的回答，既有說(shuō)用方式1，又有說(shuō)方式2的，然后這兩種方式配置項(xiàng)還差不多（都是在webstorm的一個(gè)setting頁(yè)面里面設(shè)置三四個(gè)項(xiàng)目，然后勾上enable復(fù)選框），就容易混淆。

再加上筆者自身在使用的時(shí)候，也是在一番摸索，比較差異之后，才選定了適合自己的那一種方式。特留下此文，以示記錄。

方式一：webstorm自帶Eslint

兩種方式配置都很簡(jiǎn)單，就都簡(jiǎn)單說(shuō)了。

用webstorm自帶Eslint這種方式的話，只需要打開setting，找到eslint設(shè)置頁(yè)面，填完幾個(gè)項(xiàng)目，勾選enable復(fù)選框就行了。

方式二：使用插件Eslint

這種方式呢，分兩步，第一步：需要先到plugin插件庫(kù)，找到eslint插件，點(diǎn)擊install。如下圖：

第二步：插件安裝完成后，去setting頁(yè)面，搜索eslint，這時(shí)你會(huì)發(fā)現(xiàn)，除了方式一那個(gè)eslint設(shè)置頁(yè)面外，還多了一個(gè)設(shè)置頁(yè)面，在setting對(duì)話框最下面的菜單。里面的設(shè)置項(xiàng)和方式一差不多。

差異比較

差異1：使用方式。

自帶的使用方式是在左側(cè)項(xiàng)目目錄列表上，選中某個(gè)你想eslint自動(dòng)修復(fù)的文件夾或文件，右鍵，會(huì)出現(xiàn)fix eslint problems菜單。如下圖。

當(dāng)然你也可以在右側(cè)，代碼編輯區(qū)域，選中某個(gè)要自動(dòng)修復(fù)eslint監(jiān)測(cè)出來(lái)有bug的文件，右鍵，點(diǎn)擊fix eslint problems菜單。如下圖。

這是第一種，webstorm自帶eslint方式的使用。

下面說(shuō)第二種，用了第三方插件eslint的使用。

第二種配置好以后，會(huì)在webstorm的code菜單多一個(gè)子菜單，叫做：Eslint Fix。下面兩張圖，一個(gè)是用第二種方式配置前，一個(gè)是用第二種方式配置后?？梢园l(fā)現(xiàn)code菜單多出來(lái)的子菜單。

這兩種配置方案在使用方案上的差別，看起來(lái)相似，實(shí)則不同，第二種方式在code菜單下選eslint Fix 子菜單會(huì)把你整個(gè)webstorm當(dāng)前加載的所有項(xiàng)目，檢測(cè)出來(lái)不符合你在setting里面設(shè)置的那個(gè).eslintrc的文件都自動(dòng)修復(fù)了。而webstorm自帶的，則可以自由選擇想修復(fù)哪個(gè)目錄。因此，第一種方式在修復(fù)哪些文件這件事上的定制化對(duì)我們比較友好。

當(dāng)然了，第二種配置方案的自動(dòng)修復(fù)方式的最大問(wèn)題在于，一旦你點(diǎn)了code菜單下eslint Fix 子菜單，所有webstorm下項(xiàng)目自動(dòng)修復(fù)，會(huì)帶來(lái)很多問(wèn)題，因?yàn)楹芏鄷r(shí)候你只是想給webstorm下的某個(gè)項(xiàng)目設(shè)置eslint功能。

差異2：對(duì)vue文件是否檢測(cè)上

方式一直接支持檢測(cè)出vue文件中的不合eslint規(guī)則的代碼區(qū)域，并且用紅色波浪線標(biāo)識(shí)，而第二種方式在不多加配置的情況下，不支持檢測(cè)出vue文件的代碼不合.eslintrc規(guī)則的代碼區(qū)域。

下圖是第一種方式，在一個(gè)空行，打了幾個(gè)空格，就顯示了紅色波浪線，說(shuō)不符合規(guī)則，然后右擊文件，選擇fix eslint problems子菜單，就能把紅色波浪線去除。

最后

目前沒(méi)找到可以只對(duì)webstorm單個(gè)項(xiàng)目起作用的配置項(xiàng)。這兩種方式，都會(huì)對(duì)webstorm加載出來(lái)的所有項(xiàng)目適用。這用起來(lái)就有點(diǎn)不爽了，因?yàn)楫吘共皇撬许?xiàng)目都需要eslint的。

如果有知道的前端er可以交流一下。

我的GitHub

補(bǔ)充：sublime自動(dòng)修復(fù)eslint報(bào)錯(cuò)

 1.安裝全局安裝eslint

npm install eslint -g

全局安裝eslint插件

npm install eslint-plugin-html -g
npm install babel-eslint -g

在需要用到eslint的項(xiàng)目生成eslint文件

eslint --init

2、在sublime編輯器上安裝插件ESLint-Formatter

菜單欄找到 Tools > Build System > New Build System，新建一個(gè) eslint-fix.sublime-build 文件，然后里面內(nèi)容如下：

{
  "shell_cmd": "eslint --fix $file" 
}

或者

{
  "cmd": "D:\\dev\\nvm\\npm\\eslint.cmd --fix $file" 
}

3、用快捷鍵 ctrl+b 運(yùn)行剛剛創(chuàng)建的 build 文件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論