vue cli3.0 引入eslint 結(jié)合vscode使用
它的目標(biāo)是提供一個插件化的javascript代碼檢測工具。官網(wǎng)地址
最近一個項目里，最開始使用 cli3.0 搭建的時候沒有默認(rèn)選用 eslint ，導(dǎo)致現(xiàn)在有的人使用其他編輯器，就會出現(xiàn)格式錯亂的情況。所以引入 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：
運行
npm run lint
面板會提示有xx個錯誤，而且會標(biāo)明哪個文件。
而且會提示你是用 --fix 進(jìn)行修復(fù)
第三部（修復(fù)）
上面的 "lint": "eslint --ext .js,.vue src" 修改為 eslint --ext .js,.vue src --fix
運行
npm run lint
這是就沒有 errors 和 warning了
至此 eslint 已經(jīng)引入,并且可以自動修復(fù)。但是 --fix 并不能完全修復(fù)代碼，比如
就會提示 'vm'被定義但是未被使用
就需要手動刪掉
配合 vscode 使用
目的： 使用vscode到達(dá)保存就自動fix的效果 。
1.安裝
2.安裝 eslint
3.設(shè)置 eslint
打開 文件-》首選項-》設(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 編輯器里面識別 .vue 文件并且對文件可以：
- 語法高亮
- 語法提示,補(bǔ)全功能
- 語法檢測
5.配置完成
這個時候就會有提示
按 ctrl+s 就自動修復(fù)了
tips： 有時按一次 ctrl+s 修復(fù)不了，多按幾次就好了，不過我一般寫一段就 ctrl+s 一下，問題不大。
相關(guān)文章
Vue Router 是 Vue.js 的官方路由庫,用于在 Vue 應(yīng)用中實現(xiàn)單頁面應(yīng)用（SPA）的客戶端路由,以下是 Vue Router 的詳細(xì)介紹,包括基本概念、配置、路由導(dǎo)航以及高級用法,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
watch是CompositionAPI的一部分,用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,本文主要介紹了詳解vue3中watch監(jiān)聽的幾種情況,具有一定的參考價值,感興趣的可以了解一下2025-03-03
vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實例講解
今天小編就為大家分享一篇vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue引入vuetify框架你需要知道的幾點知識，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決
這篇文章主要介紹了Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Echarts圖中給坐標(biāo)軸加一個標(biāo)識線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個標(biāo)識線markLine，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
記錄一下踩坑,前幾天從同事手上接手了一個Vue的項目,下面這篇文章主要給大家介紹了關(guān)于VUE項目運行失敗原因及解決辦法的相關(guān)資料,本文以vscode為例,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了關(guān)于vue.js過渡css類名的理解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-04-04
vue3采用xlsx庫實現(xiàn)本地上傳excel文件功能
這篇文章主要為大家詳細(xì)介紹了vue3如何采用xlsx庫實現(xiàn)本地上傳excel文件功能,并且前端解析為Json數(shù)據(jù),感興趣的小伙伴可以了解一下2025-02-02
這篇文章主要介紹了vue 動態(tài)組件用法,結(jié)合實例形式總結(jié)分析了vue 動態(tài)組件基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03