vue cli3.0 引入eslint 結(jié)合vscode使用
它的目標(biāo)是提供一個(gè)插件化的javascript代碼檢測工具。官網(wǎng)地址
最近一個(gè)項(xiàng)目里，最開始使用 cli3.0 搭建的時(shí)候沒有默認(rèn)選用 eslint ，導(dǎo)致現(xiàn)在有的人使用其他編輯器，就會(huì)出現(xiàn)格式錯(cuò)亂的情況。所以引入 eslint 做代碼檢測
第一步 （安裝）
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",
說明安裝成功
第二步（檢測）
在 package.json 文件的命令行 sctipts 里面添加
"lint": "eslint --ext .js,.vue src" 批量檢測代碼
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
這是就沒有 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
打開 文件-》首選項(xiàng)-》設(shè)置，找到并打開 setting.json 添加如下配置
{
"eslint.enable": true, // 是否開啟檢測
"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ì)文件可以：
- 語法高亮
- 語法提示,補(bǔ)全功能
- 語法檢測
5.配置完成
這個(gè)時(shí)候就會(huì)有提示
按 ctrl+s 就自動(dòng)修復(fù)了
tips： 有時(shí)按一次 ctrl+s 修復(fù)不了，多按幾次就好了，不過我一般寫一段就 ctrl+s 一下，問題不大。
相關(guān)文章
這篇文章主要介紹了vue中watch的用法匯總，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue 中directive功能的簡單實(shí)現(xiàn)
本篇介紹directive的簡單實(shí)現(xiàn)，主要學(xué)習(xí)其實(shí)現(xiàn)的思路及代碼的設(shè)計(jì)，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue router 跳轉(zhuǎn)時(shí)打開新頁面的示例方法
這篇文章主要介紹了vue router 跳轉(zhuǎn)時(shí)打開新頁面的示例方法，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Vue項(xiàng)目中禁用ESLint的幾種常見方法小結(jié)
Vue ESLint是一個(gè)基于ESLint的插件,它專門為Vue.js應(yīng)用設(shè)計(jì),用于提供JavaScript代碼風(fēng)格檢查和最佳實(shí)踐規(guī)則,Vue項(xiàng)目通常會(huì)集成ESLint,目的是為了提升代碼質(zhì)量、保持一致性和可維護(hù)性,本文介紹了Vue項(xiàng)目中禁用ESLint的幾種常見方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue中的proxyTable反向代理(親測有用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章介紹了Vue.js中v-model指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
深入理解Vue響應(yīng)式原理及其實(shí)現(xiàn)方式
Vue的響應(yīng)式原理是Vue最核心的特性之一，也是Vue能夠?yàn)殚_發(fā)者提供高效便捷的開發(fā)體驗(yàn)的重要原因之一，這篇文章主要介紹了響應(yīng)式的原理及其實(shí)現(xiàn)方式，需要詳細(xì)了解可以參考下文2023-05-05
v-show 指令通過改變?cè)氐?css 屬性（display）來決定元素是顯示還是隱藏。這篇文章主要介紹了Vue.js 中的 v-show 指令及用法詳解,需要的朋友可以參考下2018-11-11