vscode下vue項(xiàng)目中eslint的使用方法
前言
在vscode的vue項(xiàng)目中,關(guān)于代碼檢查和格式化,遇到各種各樣的問題,比如:
- 不清楚安裝的拓展的功能,導(dǎo)致安裝了重復(fù)功能的拓展
- 右鍵格式化文檔的時(shí)候,不是按eslint的規(guī)則來格式化,導(dǎo)致需要我再次手動(dòng)調(diào)整
- 保存時(shí)不能自動(dòng)修復(fù)代碼
以下通過自己的實(shí)踐,進(jìn)行了相應(yīng)配置,目前可以實(shí)現(xiàn):
- 僅安裝2個(gè)推薦的拓展
- 右鍵格式化文檔按照eslint規(guī)則,不會(huì)產(chǎn)生錯(cuò)誤
- 保存時(shí)自動(dòng)修復(fù)代碼
vscode 拓展安裝
eslint 拓展
該拓展本身不帶任何插件,當(dāng)前項(xiàng)目要使用該拓展,需要安裝相應(yīng)的npm包(全局安裝或當(dāng)前項(xiàng)目安裝)
對(duì)于 vue 項(xiàng)目,通常在 vscode 中做如下設(shè)置:
//保存時(shí)自動(dòng)修復(fù)代碼
"eslint.autoFixOnSave": true,
"eslint.options": {
// 應(yīng)檢查代碼的文件擴(kuò)展名數(shù)組
"extensions": [
".js",
".vue"
]
},
// 配置要驗(yàn)證的語言標(biāo)識(shí)和自動(dòng)修復(fù)選項(xiàng),比前面兩個(gè)配置的結(jié)合更為細(xì)粒度話??梢詢H配置下面代碼
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
vetur 拓展
vue 工具,主要有以下功能
Syntax-highlighting 語法高亮
Snippet 快速定義腳手架代碼片段,如:寫script后會(huì)跳出export default{xxx},style 后面會(huì)帶lang、scope等
Emmet 仿css選擇器快速生成 html/css 代碼
Linting / Error Checking vetur的 Linting 僅用于快速啟動(dòng),對(duì)于規(guī)則配置需要用eslint.validate
Linting 不可配置,且自帶了一個(gè)固定版本的eslint-plugin-vue,一般我們不用。而是采用以下配置:
- vscode中設(shè)置"vetur.validation.template": false
- 安裝ESlint拓展,錯(cuò)誤處理將走eslint
- 項(xiàng)目中安裝npm i -D eslint eslint-plugin-vue插件
- 在.eslintrc.*設(shè)置eslint規(guī)則,后面會(huì)介紹eslintrc相關(guān)配置
Formatting 即右鍵的Format Document功能,不支持格式化選中內(nèi)容。
可以在設(shè)置中配置vetur.format.defaultFormatter \ 如:默認(rèn)"vetur.format.defaultFormatter.html": "prettyhtml",也可將值設(shè)為 none 就不會(huì)格式化該類文件了 \ 這個(gè)默認(rèn)設(shè)置非常難用,會(huì)將vue文件變得很亂,比如默認(rèn)加分號(hào),屬性按列展開;我們?cè)谠O(shè)置中進(jìn)行如下配置即可實(shí)現(xiàn)格式化vue文件時(shí)按eslint的規(guī)則來
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性列太長(zhǎng)才折行,默認(rèn)的force-expand-multiline不美觀
"wrap_attributes": "auto"
},
"prettier": {
//去掉代碼結(jié)尾分號(hào)
"semi": false,
//使用eslint的代碼格式進(jìn)行校驗(yàn)
"eslintIntegration": true,
//采用單引號(hào)
"singleQuote": true
}
},
//格式化.vue中html,js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
IntelliSense 智能感知vue文件結(jié)構(gòu),比如<template>中提供了html標(biāo)簽和屬性的感知,當(dāng)編輯<template>時(shí)如同編輯html文件一樣,讓其他插件可以如html支持一樣進(jìn)行支持<template>
Debugging 調(diào)試功能
Framework Support for Element UI and Onsen UI UI框架支持
如果想使用Format Selection功能,需要再下載prettier-Code formatter拓展。
但只要配置合理,全文格式化未嘗不可
eslintrc 配置
安裝完上文兩個(gè)拓展和進(jìn)行相應(yīng)配置后,還需要 對(duì).eslintrc.js 進(jìn)行配置。文件不存在或配置不當(dāng),編碼時(shí)不會(huì)進(jìn)行錯(cuò)誤提示
若使用@vue/cli 初始化項(xiàng)目并選擇支持eslint,則默認(rèn)生成時(shí)就存在了。
否則需要手動(dòng)生成:
.eslintrc.js
早期的一個(gè)配置
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
當(dāng)前配置(主流):extends配置vue校驗(yàn)規(guī)則,parser移至parserOptions下,plugins中配置為vue
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
// parser: 'babel-eslint',
parserOptions: {
sourceType: 'module',
parser: 'babel-eslint',
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: [
// 按從上往下的規(guī)則匹配
//推薦校驗(yàn)
"plugin:vue/recommended",
//基本校驗(yàn)
//"plugin:vue/essential",
"standard"
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
plugin:vue/recommended 下 wrap_attributes 的規(guī)則是force-expand-multiline
即按上述配置,格式化文檔時(shí),屬性會(huì)變成一列(auto),但保存時(shí)的eslint 的autoFix會(huì)按 force-expand-multiline 多行展開。
覺得麻煩的,可以配置為plugin:vue/essential
配置分享
settings.json
// 將設(shè)置放入此文件中以覆蓋默認(rèn)設(shè)置
{
"editor.fontSize": 12,
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"vetur.validation.template": false,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性列太長(zhǎng)才折行,默認(rèn)的force-expand-multiline不美觀
"wrap_attributes": "auto"
},
"prettier": {
//去掉代碼結(jié)尾分號(hào)
"semi": false,
//使用eslint的代碼格式進(jìn)行校驗(yàn)
"eslintIntegration": true,
//采用單引號(hào)
"singleQuote": true
}
},
//格式化.vue中html,js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"search.exclude": {
"**/Node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"git.confirmSync": false,
"window.zoomLevel": 0,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"workbench.colorTheme": "Solarized Light",
"extensions.ignoreRecommendations": false
}
參考 :
eslint-plugin-vue: https://eslint.vuejs.org/user-guide/
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vant steps流程圖的圖標(biāo)使用slot自定義方式
這篇文章主要介紹了vant steps流程圖的圖標(biāo)使用slot自定義方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue 基于abstract 路由模式 實(shí)現(xiàn)頁面內(nèi)嵌的示例代碼
這篇文章主要介紹了vue 基于abstract 路由模式 實(shí)現(xiàn)頁面內(nèi)嵌的示例代碼,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12
ElementUI的CheckBox多選框數(shù)據(jù)回顯方式
這篇文章主要介紹了ElementUI的CheckBox多選框數(shù)據(jù)回顯方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04

