vue cli3.0 引入eslint 結(jié)合vscode使用

它的目標(biāo)是提供一個(gè)插件化的javascript代碼檢測(cè)工具。官網(wǎng)地址

最近一個(gè)項(xiàng)目里，最開(kāi)始使用 cli3.0 搭建的時(shí)候沒(méi)有默認(rèn)選用 eslint ，導(dǎo)致現(xiàn)在有的人使用其他編輯器，就會(huì)出現(xiàn)格式錯(cuò)亂的情況。所以引入 eslint 做代碼檢測(cè)

第一步 （安裝）

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入關(guān)于 eslint 的一些依賴 當(dāng)你的 package.json 里出現(xiàn)

"eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-vue": "^5.2.2",

說(shuō)明安裝成功

第二步（檢測(cè)）

在 package.json 文件的命令行 sctipts 里面添加

"lint": "eslint --ext .js,.vue src" 批量檢測(cè)代碼

Example：

運(yùn)行

npm run lint

面板會(huì)提示有xx個(gè)錯(cuò)誤，而且會(huì)標(biāo)明哪個(gè)文件。

而且會(huì)提示你是用 --fix 進(jìn)行修復(fù)

第三部（修復(fù)）

上面的 "lint": "eslint --ext .js,.vue src" 修改為 eslint --ext .js,.vue src --fix

運(yùn)行

npm run lint

這是就沒(méi)有 errors 和 warning了

至此 eslint 已經(jīng)引入,并且可以自動(dòng)修復(fù)。但是 --fix 并不能完全修復(fù)代碼，比如

就會(huì)提示 'vm'被定義但是未被使用

就需要手動(dòng)刪掉

配合 vscode 使用

目的： 使用vscode到達(dá)保存就自動(dòng)fix的效果 。

1.安裝

下載地址

2.安裝 eslint

3.設(shè)置 eslint

打開(kāi) 文件-》首選項(xiàng)-》設(shè)置，找到并打開(kāi) setting.json 添加如下配置

{
 "eslint.enable": true, // 是否開(kāi)啟檢測(cè)
 "editor.tabSize": 2,
 "eslint.autoFixOnSave": true,
 "files.associations": {
 "*.vue": "vue"
 },
 "eslint.options": {
 "extensions": [
 ".js",
 ".vue"
 ]
 },
 "eslint.validate": [
 "javascript",{
 "language": "vue",
 "autoFix": true
 },
 "html",
 "vue"
 ],
}

4.安裝 Vetur 插件

Vetur 能夠在 vscode1 編輯器里面識(shí)別 .vue 文件并且對(duì)文件可以：

1. 語(yǔ)法高亮
2. 語(yǔ)法提示,補(bǔ)全功能
3. 語(yǔ)法檢測(cè)

5.配置完成

這個(gè)時(shí)候就會(huì)有提示

按 ctrl+s 就自動(dòng)修復(fù)了

tips： 有時(shí)按一次 ctrl+s 修復(fù)不了，多按幾次就好了，不過(guò)我一般寫一段就 ctrl+s 一下，問(wèn)題不大。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com