前言
在vscode的vue項目中，關于代碼檢查和格式化，遇到各種各樣的問題，比如：
以下通過自己的實踐，進行了相應配置，目前可以實現：
vscode 拓展安裝
eslint 拓展
該拓展本身不帶任何插件，當前項目要使用該拓展，需要安裝相應的npm包（全局安裝或當前項目安裝）
對于 vue 項目，通常在 vscode 中做如下設置:
//保存時自動修復代碼
"eslint.autoFixOnSave": true,
"eslint.options": {
// 應檢查代碼的文件擴展名數組
"extensions": [
".js",
".vue"
]
},
// 配置要驗證的語言標識和自動修復選項，比前面兩個配置的結合更為細粒度話?？梢詢H配置下面代碼
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
vetur 拓展
vue 工具，主要有以下功能
Syntax-highlighting 語法高亮
Snippet 快速定義腳手架代碼片段，如：寫script后會跳出export default{xxx},style 后面會帶lang、scope等
Emmet 仿css選擇器快速生成 html/css 代碼
Linting / Error Checking vetur的 Linting 僅用于快速啟動，對于規則配置需要用eslint.validate
Linting 不可配置，且自帶了一個固定版本的eslint-plugin-vue，一般我們不用。而是采用以下配置：
- vscode中設置"vetur.validation.template": false
- 安裝ESlint拓展，錯誤處理將走eslint
- 項目中安裝npm i -D eslint eslint-plugin-vue插件
- 在.eslintrc.*設置eslint規則,后面會介紹eslintrc相關配置
Formatting 即右鍵的Format Document功能，不支持格式化選中內容。
可以在設置中配置vetur.format.defaultFormatter \ 如：默認"vetur.format.defaultFormatter.html": "prettyhtml",也可將值設為 none 就不會格式化該類文件了 \ 這個默認設置非常難用，會將vue文件變得很亂，比如默認加分號，屬性按列展開；我們在設置中進行如下配置即可實現格式化vue文件時按eslint的規則來
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性列太長才折行,默認的force-expand-multiline不美觀
"wrap_attributes": "auto"
},
"prettier": {
//去掉代碼結尾分號
"semi": false,
//使用eslint的代碼格式進行校驗
"eslintIntegration": true,
//采用單引號
"singleQuote": true
}
},
//格式化.vue中html，js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
IntelliSense 智能感知vue文件結構,比如<template>中提供了html標簽和屬性的感知，當編輯<template>時如同編輯html文件一樣，讓其他插件可以如html支持一樣進行支持<template>
Debugging 調試功能
Framework Support for Element UI and Onsen UI UI框架支持
如果想使用Format Selection功能，需要再下載prettier-Code formatter拓展。
但只要配置合理，全文格式化未嘗不可
eslintrc 配置
安裝完上文兩個拓展和進行相應配置后，還需要 對.eslintrc.js 進行配置。文件不存在或配置不當，編碼時不會進行錯誤提示
若使用@vue/cli 初始化項目并選擇支持eslint，則默認生成時就存在了。
否則需要手動生成：
詳見Installation
.eslintrc.js
早期的一個配置
// 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
}
}
當前配置（主流）：extends配置vue校驗規則，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: [
// 按從上往下的規則匹配
//推薦校驗
"plugin:vue/recommended",
//基本校驗
//"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 的規則是force-expand-multiline
即按上述配置，格式化文檔時，屬性會變成一列（auto），但保存時的eslint 的autoFix會按 force-expand-multiline 多行展開。
覺得麻煩的，可以配置為plugin:vue/essential
配置分享
settings.json
// 將設置放入此文件中以覆蓋默認設置
{
"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": {
// 屬性列太長才折行,默認的force-expand-multiline不美觀
"wrap_attributes": "auto"
},
"prettier": {
//去掉代碼結尾分號
"semi": false,
//使用eslint的代碼格式進行校驗
"eslintIntegration": true,
//采用單引號
"singleQuote": true
}
},
//格式化.vue中html，js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//讓函數(名)和后面的括號之間加個空格
"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/
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
