寫在開始前：如有不準確的地方希望大家提出，文章可以改知識不能錯。

創(chuàng)建一個項目

這里已node項目為例

?

npm init

根據(jù)提示填寫相關(guān)信息

安裝eslint

?

npm install eslint --save

也可以全局安裝

?

npm install eslint -g

初始化 eslint文件

?

eslint --init

執(zhí)行命令后會出現(xiàn)如下提示

?

image.png

Answer Questions about your style:根據(jù)提示選擇相應的規(guī)則設置
Use a popular style guide:選擇一個已經(jīng)寫好的規(guī)則配置
Inspect your JavaScript file(s):根據(jù)源碼文件內(nèi)容生成規(guī)則配置

懶得去寫可以選擇第二項。
eslint 配置相關(guān) 見官網(wǎng)，https://eslint.org/
命令執(zhí)行成功后會在項目根目錄下生成一個.eslintrc.js文件，使用linux ,mac系統(tǒng)同學注意設置隱藏文件顯示。檢查規(guī)則調(diào)整需要在.eslintrc.js文件中修改相應的配置項目。

VSCode相關(guān)配置

安裝插件

VSCode 插件安裝器中搜索‘eslint’并安裝

?

image.png

?

安裝成功后重啟VSCode

配置VSCode

打開VSCode配置頁面

?

image.png

?

添加如下配置

?

//為了符合eslint的兩個空格間隔原則"editor.tabSize": 2,//使用eslint規(guī)則重新格式化代碼"eslint.autoFixOnSave": true,//關(guān)閉自動文件自動存儲"files.autoSave": "off","eslint.validate": ["javascript","javascriptreact","html","jsx","vue",{"language": "html","autoFix": true}],

以下為整個配置文件截圖

?

image.png

此時 VSCode 與 eslint 相關(guān)配置已經(jīng)結(jié)束

測試

創(chuàng)建index.js文件
并寫入內(nèi)容

?

function hello () {console.log('Hello Eslint'); } hello()

VSCode會自動進行代碼質(zhì)量檢查如下圖

image.png

通常情況下需要根據(jù)錯誤提示手動對代碼進行相應的更改然后保存文件。因為在VSCode設置中配置了eslint.autoFixOnSave": true,此時直接保存文件VSCode會根據(jù)項目.eslintrc.js文件中的相關(guān)配置對代碼進行重新格式化，但是自動格式化只能完成代碼格式修改，對變量或方法定義單未使用這樣的規(guī)則不會進行調(diào)整。

?

寫在最后

VSCode 配合eslint 進行代碼質(zhì)量檢查屬于非強制性檢查既不符合規(guī)則的代碼在編譯時不會出錯只是Ide級的錯誤提示，如果想做強制質(zhì)量檢查可以在編譯腳本中加入eslint相關(guān)配置。

作者：挑燈小鬼兒
鏈接：https://www.jianshu.com/p/76d0aac20715
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的VSCode配合eslint进行JavaScript质量检查的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。