一、插件的介绍与安装
1、Vetur插件
Vetur是一款Vue代码高亮显示的一款插件，在没有使用此插件前，以 .vue的文件名代码是没有颜色的！！！
安装步骤：在扩展商店中搜索（ Vetur ）点击安装
2、ESLint插件
ESLint插件主要用来检测代码的语法格式，以便我们规范书写，避免因编译所发生的错误 。
安装步骤：在扩展商店中搜索（ ESLint ）点击安装
3、Prettier - Code formatter插件
该插件主要用于格式化代码
在在扩展商店中搜索（ Prettier - Code formatter ）点击安装
二、相关文件配置
1、在安装完以上插件后，进入Vs Code设置面板
2、点击按钮打开json文件
3、复制以下代码片段
注意：代码要粘贴在原来配置对象里面，追加如下配置代码，注意格式 文章来源：https://www.toymoban.com/news/detail-601047.html
{
"editor.fontSize": 17, //编辑器字体大小
"[scss]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
}, //scss格式化工具
"workbench.iconTheme": "vscode-icons", //vscode文件图标主题
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", //默认终端shell
"go.formatTool": "goimports", //golang格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
"[javascript]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}, //javascript格式化工具
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}, //vue格式化工具
"editor.insertSpaces": false,
"workbench.editor.enablePreview": false, //打开文件不覆盖
"search.followSymlinks": false, //关闭快速预览
"files.autoSave": "off", //编辑自动保存afterDelay
"editor.lineNumbers": "on", //开启行数提示
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"editor.tabSize": 4, //制表符符号eslint
"editor.formatOnSave": true, //每次保存自动格式化
// "eslint.codeActionsOnSave": {
// "source.fixAll.eslint": true
// },
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
"prettier.semi": true, //去掉代码结尾的分号
"prettier.singleQuote": false, //使用单引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
},
"prettier": {
"semi": false,
"singleQuote": true
},
"vscode-typescript": {
"semi": false,
"singleQuote": true
}
},
"eslint.validate": [
"vue",
"javascript",
"typescript",
"typescriptreact",
"html"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"vetur.ignoreProjectWarning": true,
"git.autorefresh": false,
"git.enabled": false,
"typescript.preferences.quoteStyle": "single",
"editor.tabSize": 4,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.requireConfig": false,
"prettier.singleQuote": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.formatOnSave": true,
"files.associations": {
}
}三、注意
配置好之后，如果Vs Code右下角提示ESLint被禁用，点击一下，然后选择 allowEverywhere文章来源地址https://www.toymoban.com/news/detail-601047.html
到了这里，关于VsCode中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
