VS Code使用之Vue工程配置eslint
首先確保VS Code 安裝了 Vetur 和 Eslint 外掛。
然後使用了vue-cli提供的簡單webpack模板,這樣建立的工程預設沒有新增ESLint。
vue init webpack-simple test-vscode
配置過程
- 全域性安裝最新的eslint
npm i -g [email protected]
執行
eslint --init
會安裝以下依賴
eslint-config-standard@latest
eslint-plugin-import@>=2.2.0
eslint-plugin-node@>= 5.2.1
eslint-plugin-promise@>=3.5.0
eslint-plugin-standard@>=3.0.0
同時在專案目錄下生成.eslintrc.js
檔案。裡面只有最基本的內容:
module.exports = {
"extends": "standard"
};
表明我們使用的規則是standard
規範所定義的規則。
2. 然後本地安裝最新的eslint
npm i -D [email protected]
- 在
package.json
的scripts
中新增一行:
"lint": "eslint --ext .js,.vue src"
執行:
npm run lint
VS Code會提示我們找不到eslint-config-standard
:
安裝它:
npm i -D eslint-config-standard
然後執行
npm run lint
這時就會有報錯的提示了。
4. 但是在.vue
檔案中出錯的地方並沒有相應的提示。這時Vetur排上用場了。 在VS Code的設定裡面新增如下規則:
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language ": "vue",
"autoFix": true
}
]
}
這樣就添加了對.vue
檔案的支援。
5. 但是這樣會對.vue
檔案中的標籤報解析錯誤
這時需要安裝[email protected]
外掛。
npm install -D [email protected]
同時在.eslintrc.js
中新增使用vue外掛的擴充套件。
// .eslintrc.js
module.exports = {
"extends": [
"standard",
"plugin:vue/base"
]
}
這樣,就可以對.vue
檔案提供實時檢查的功能了。
6. 對於多餘的逗號這種錯誤,可以在儲存的時候讓eslint外掛自動修復。 更改VS Code中的設定,新增如下規則:
{
"eslint.autoFixOnSave": true
}
總結
通過使用VS Code的外掛 Vetur 、ESLint來對Vue工程中的.vue
提供程式碼檢查的功能。
1. 需要安裝的依賴:
json
"eslint": "^4.14.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0-beta.4",
注意: 這裡 ESLint
和 eslint-plugin-vue
需要是最新的。
2. .eslintrc
的配置
js
module.exports = {
"extends": [
"standard",
"plugin:vue/base"
]
};
3. VS Code 的配置
json
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
}
參考資料:
Vetur文件
ESLint文件
eslint-plugin-vue
相關推薦
VS Code使用之Vue工程配置eslint
首先確保VS Code 安裝了 Vetur 和 Eslint 外掛。 然後使用了vue-cli提供的簡單webpack模板,這樣建立的工程預設沒有新增ESLint。 vue init webpa
VS Code書寫vue專案配置 eslint+prettier 統一程式碼風格
前言 以前公司的vue專案只是我一個人在寫,程式碼風格統一,但是後來隨著團隊增加,統一的程式碼風格就越來越重要。我的主力工具是sublime,ws輔助,vscode基本很少使用(就下載安裝放在冷宮),但是聽說用來寫vue專案還不錯,就開啟了一番折騰。當然工具麼,沒有誰好誰壞了~~ 不盲目站
Ubuntu下VS Code下的C++配置和的除錯
1. 環境 Unbutu 16.04; 下載VS Code 1.29 https://code.visualstudio.com/docs/languages/cpp#_getting-started; 2. 常用快捷鍵 Open the Comman
vs code 格式化vue 全部外掛
1、安裝vetur 、prettier 不然無法格式化的,然後設定單引號,加方法隔空 { "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormat
vs code建立vue模板
一字字敲vue模板是非常低效得事情,所以我搜索瞭如何在vs中建立vue模板方法,過程很簡單。 使用Ctrl + Shift + P召喚出控制檯,然後輸入snippets並選擇。 接著輸入vue,vs code自動生成vue.json檔案。 將檔案改為下面得模
VS Code C語言環境配置
最近重溫C語言,因為很多練習只是小程式,並不需要Clion和Codeblocks這樣工程導向的編譯軟體,所以下載了vs code,並試圖搜尋相應的環境,在此過程中發現,網上許多vs code 的c/c++環境配置都是以c++為目標的,不能直接編譯C語言,在參考了許多前輩的文章
Vs Code在Vue專案中v-for指令提示錯誤的解決辦法
最近在做一個Vue專案,在其中用到v-for指令時,發現Vs Code報錯,如下圖(程式碼是沒有任何問題的),在網上找了一下解決辦法,希望能幫助到更多人。解決方法:開啟 檔案-首選項-設定將如下程
vs code中Vue程式碼格式化的問題
VSCode自從更新之後,vue檔案的html程式碼格式化就失效了,而且vue檔案中的js ,css格式化樣式都變了,原因在於都採用了 prettier 來格式化,而配置檔案中 vetur.format
vue與原生app互動之vue工程主動獲取url攜帶的引數
不管是Android還是iOS都有各自的架構體系,在一定程度上是完全不依靠其他語言或者技術上的支援去完成所需功能,但是不可否認的是html做的圖形化介面就是比原生的好看和流暢。比如下面這張圖: 問題:後臺url請求需要攜帶cookie,需要使用者的useId,但是我做的這個vue工程只是a
vs code 開發 vue 格式設置
enc ima -html dimp terminal func delet force die vs code 開發 vue 格式設置 打開設置 Preferences: Open Workspace Settings 修改配置文件 { "workbench.co
VS Code外掛之Vue 2 Snippets(Vue2 片段補全工具)
文件轉自: 一、簡介 此擴充套件將Vue 2程式碼片段和語法突出顯示新增到Visual Studio程式碼中。 這個外掛基於最新的Vue官方語法高亮檔案添加了語法高亮,並且依據Vue 2的API添加了程式碼片段。 支援語言 VUE(.vue) HTML格式(.
VS2015--win32工程配置的一些想法之Google Code Style中標頭檔案的順序
工程大了,有很多的標頭檔案,也要引用很多的庫檔案。 從我們學習C++寫hello world的那一刻起,就知道要包含一些系統檔案。 那麼順序如何呢? 在review的時候,感覺自己寫的東西就是一坨屎。 看看Google code style中是如何描述i
vs code vue模板創建
vue模板 vs code用戶代碼片段 snippet 擺圖其他模板創建,依照此法即可。本文出自 “琉璃歲月” 博客,請務必保留此出處http://11mihu.blog.51cto.com/6659352/1926917vs code vue模板創建
VS Code 調試 PHP有關配置
全選 conf 4.2 image -1 spa val org src 一、安裝VS CODE 、 WampServer 二、用VS Code 打開php項目後,提示 "Cannot validate since no PHP executable is set. Us
vs code不同後綴的文件按圖標區分,如.vue .md
vscode-icons 文件區分目的:不同的文件用不同圖標加以區分方法: 安裝插件vscode-icons,圖解如下vs code不同後綴的文件按圖標區分,如.vue .md
Python入門學習指導(VS Code配置向)
使用 sub blank 安裝python with 兼容 tps inter 新手 代碼編輯器或IDE 推薦Vs Code,Atom和Sublime(本文以Vs Code為例,Sublime對中文支持不是很好,時常弄好了Sublime的亂碼,卻在復制到其他編輯器時出了
vue環境配置腳手架環境搭建vue工程目錄
cnpm 依賴庫 html image mage ack png 你是 第三方庫 首先在初始化一個vue項目之前,我們需要下載node.js,並且安裝! 下載地址: nodejs.cn/download 安裝完成之後,windows+r 運行命令 cmd 輸入node
vs code進行c/c++開發配置
AR con vsc sco vs code image c++開發 ons 技術 1.vs code默認主題我不是很喜歡,這裏推薦網友用的比較多的主題"One Dark Pro" 和 圖標"vscode-icons",直接在vs code的擴展商店裏面搜索就可以安裝,安裝
VS Code 切換文件語言 配置語言特定的設置
輸入 方式 手動 mage bsp http 功能 info 選擇 在享受vs code給我們帶了的好處時,我遇到一個不方便的地方 切換文檔的語言問題,沒有默認的快捷鍵,就是下圖的功能 每次切換語言都需要手動點擊,相當的麻煩 想給它設置一個快捷鍵,結果被這個圖給誤導了
VS code中關閉eslint
前端 electron-vue最近在學習electron-vue,第一次使用難免出現一下大大小小的問題,謹以此記錄歷程吧。在vs code中編譯一個實例的時候總是提示語法有錯誤,怎麽改都不行,真心煩人,後來一看網上大家都抱怨原來是安裝了eslint導致的,eslint檢查語法非常嚴格,甚至一個空格都不能有,太