webstorm中怎么配置Eslint，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

超過(guò)十多年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：網(wǎng)站建設(shè)、成都網(wǎng)站制作，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，重慶小程序開(kāi)發(fā)，微信開(kāi)發(fā)，app開(kāi)發(fā)定制，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷(xiāo)和我們一樣獲得訂單和生意！

方式一：webstorm自帶Eslint

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

用webstorm自帶Eslint這種方式的話，只需要打開(kāi)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è)是用第二種方式配置后。可以發(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 文件

看完上述內(nèi)容，你們掌握webstorm中怎么配置Eslint的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：webstorm中怎么配置Eslint-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://weahome.cn/article/djjcep.html