一、插件的介绍与安装

1、Vetur插件

Vetur是一款Vue代码高亮显示的一款插件，在没有使用此插件前，以 .vue的文件名代码是没有颜色的！！！

安装步骤：在扩展商店中搜索（ Vetur ）点击安装

2、ESLint 插件

ESLint插件主要用来检测代码的语法格式，以便我们规范书写，避免因编译所发生的错误。
作用如下图：

安装步骤：在扩展商店中搜索（ ESLint ）点击安装

3、Prettier - Code formatter插件

该插件主要用于格式化代码
在在扩展商店中搜索（ Prettier - Code formatter ）点击安装

二、相关文件配置

1、在安装完以上插件后，进入Vs Code设置面板。

2、点击按钮打开json文件

3、复制以下代码片段，注意：代码要粘贴在原来配置对象里面，追加如下配置代码，注意格式：

代码如下：

"[vue]": {"editor.defaultFormatter": "octref.vetur"},"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"eslint.validate": ["javascript","javascriptreact"],
"vetur.ignoreProjectWarning": true,"vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_line_length": 80,// Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]"wrap_attributes": "force-expand-multiline"}},"editor.tabSize": 2,"vetur.validation.template": false,"git.ignoreLimitWarning": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"git.confirmSync": false,"eslint.quiet": true,"javascript.format.insertSpaceBeforeFunctionParenthesis": true,"typescript.format.insertSpaceAfterConstructor": true,"typescript.format.insertSpaceBeforeFunctionParenthesis": true,"javascript.preferences.quoteStyle": "single","javascript.format.insertSpaceAfterConstructor": true,"typescript.preferences.quoteStyle": "single","html.format.wrapAttributes": "force-expand-multiline","editor.formatOnSave": true,"prettier.vueIndentScriptAndStyle": true,"prettier.singleQuote": true,"prettier.useTabs": true,"prettier.printWidth": 100,"eslint.workingDirectories": [".eslintrc.js",{"mode": "auto"}]

注意：配置好之后，如果Vs Code右下角提示ESLint被禁用，点击一下，然后选择 allowEverywhere

总结

在完成以上安装配置后，就可以实现代码的格式的错误提示，在保存代码后也可以实现自动格式化。自动去除双引号和空格以及分号等代码不规范问题。十分好用！！！

提示：如果在以上代码设置后在保存时没有作用可以看这篇Prettier - Code formatter格式化无效解决方法

本篇文章到此结束。

Vs Code中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置相关推荐

一套流程教你完成基于vue脚手架的vscode代码规范(vetur+eslint+prettier)配置
在写代码的过程当中一般都会要求生产统一风格的代码.规范,简洁的代码好处就不用我多说了吧.接下来就按我的方法来初始化代码生产环境吧. 配置步骤 1.在vscode中下载三个插件 vetur,Pretti ...
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
Android Studio中的代码格式快捷方式
本文翻译自:Code formatting shortcut in Android Studio I have started developing with Android Studio . 我已经 ...
Word中使用代码高亮插件
Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...
Visual Studio Code 中部分代码变黑白色(前端vue-element-admin项目测试有效)
@[TOC](Visual Studio Code 中部分代码变黑白色(前端vue-element-admin项目测试有效)) 代码变黑白色使用vue-element-admin 后台模板在Visu ...
IDEA中vue代码提示
IDEA中vue代码提示 Settings → Plugins → vue.js Settings → Edit → File Types → Vue.js Template → 添加 *.vue 要 ...
vscode中vue代码格式化的相关配置
俗话说,工欲善其事必先利其器. 作为一个强迫症码奴,写代码时的格式十分重要,但是一步步改又很麻烦,不小心ALT+SHIFT+F又还原了,于是做了如下相关配置. 使多行属性在一行显示现在的原来的操 ...
vscode中vue代码高亮_Vue中添加友盟代码统计
前言更多内容,请访问我的个人博客. 如下图所示: 在入口App.vue中添加代码: <script> export default {name: 'app',mounted () {c ...

Vs Code中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置

文章目录