webstorm中怎么配置Eslint-創(chuàng)新互聯(lián)

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

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

方式一：webstorm自帶Eslint

兩種方式配置都很簡單，就都簡單說了。

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

方式二：使用插件Eslint

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

第二步：插件安裝完成后，去setting頁面，搜索eslint，這時(shí)你會(huì)發(fā)現(xiàn)，除了方式一那個(gè)eslint設(shè)置頁面外，還多了一個(gè)設(shè)置頁面，在setting對話框最下面的菜單。里面的設(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)測出來有bug的文件，右鍵，點(diǎn)擊fix eslint problems菜單。如下圖。

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

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

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

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

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

差異2：對vue文件是否檢測上

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

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

最后

目前沒找到可以只對webstorm單個(gè)項(xiàng)目起作用的配置項(xiàng)。這兩種方式，都會(huì)對webstorm加載出來的所有項(xiàng)目適用。這用起來就有點(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)
URL地址：http://muchs.cn/article48/djjcep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、定制開發(fā)、靜態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)