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