VSCode格式化插件冲突–eslint和vetur

两个插件的作用

Vetur的作用

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件
VSCode中vetur插件的功能，除了语法高亮等功能外，它自带有代码格式化的功能。
vetur格式化规范大多遵循Prettier风格

ESLint的作用

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误
ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 内置了一些规则，但是可以在使用过程中自定义规则。

遇到的问题

风格冲突，插件失效

公司代码需要上传到gitlab上面，风格是根据eslint统一设置好的，但是格式化以后发现eslint风格失效，不符合公司规范，无法commit到gitlab上面。检查以后发现，由于vetur和eslint两个插件的格式化风格不一样，两个插件在VSCode中都安装了，自动化保存时，其中一个的风格失效，会产生冲突。

解决方法

先检查VSCode格式化设置中，是否打开自动保存，如果是打开的要关闭，而且设置里面的自动化保存优先级是高于settings.json文件的配置。(command+p搜索格式化)

配置文件(command+p搜索settings.json文件)

修改配置文件以后，发现在.vue文件中，command+s保存以后，只能格式化js代码，对于css代码格式化无效。
解决方法，改变vetur默认风格，让js代码和html代码不遵循Prettier风格，最终的配置文件（打开方式和步骤2一样）

配置完settinss.json文件以后，对代码格式操作的：
1⃣️先shift+f+option键，格式化css代码；（如果不用格式化css代码，可以省略）
2⃣️command+s保存，格式化html代码和js代码

建议

代码风格统一的问题困扰我很久，今天理清楚的，在我遇到问题中，对于.vue文件，如果安装了vetur插件，其实是可以不用再去安装Prettier插件了，因为vetur默认很多代码风格就是Prettier风格，eslint+vetur就可以满足日常.vue前端开发，安装Prettier插件可能还会产生其他冲突，导致其中某一插件失效。

VSCode格式化插件冲突相关推荐

vscode 格式化插件以及配置
vscode 格式化插件以及配置: vscode常用插件: Beautify Eslint Vetur 进入setting页面点击如图红框进入,把下面的js代码粘贴进入就好了. 点击左下角的这只进入设 ...
vsCode格式化插件
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一 ...
vscode格式化oracle的插件,vscode 格式化插件
贴一下我在写 vue 时候的 vscode 的配置过程,ESlint 是建议的 1. 需插件安装 Vetur : 语法高亮等功能 ESlint : 代码风格检测 Prettier formatter ...
【小知识】VScode格式化代码配置及插件
VScode格式化代码配置及插件学会使用扩展和配置,能让你的vs code生产效率提高百分之二十 --鲁迅打开setting(新版vscode打开方式2019版) 先按步骤打开 setting 界 ...
利用vscode stylelint插件实现ctrl+s自动格式化vue项目中的css、scss
vscode stylelint使用 1. vscode stylelint插件安装及配置 vscode stylelint插件版本 vscode中配置stylelint和开启自动修复 2. 安装st ...
VScode格式化代码快捷键shift+alt+F，格式化代码插件推荐，修改快捷键
效果图推荐插件 beautify 具体步骤打开"扩展"板块搜索安装插件"beautify" 打开需要格式化的文档使用快捷键"shift+alt ...
vsCode JS代码格式化插件ESlint
vsCode JS代码格式化插件ESlint 验证有效,Ctrl+S保存代码全格式化了.写这个主要是个人笔记,算不得重复造. 源头:https://blog.csdn.net/qq_34803821/ ...
vscode 格式化vue插件wpy-beautify 快捷键ctrl+shift+6
vscode 格式化vue插件wpy-beautify Features Beautify Vue or wpy code in Visual Studio Code. preview Usage K ...
vscode html 格式化_详解VSCode 格式化不符合预期的问题
一句话总结不同格式化程序执行时长不一样,导致文件格式好后和预期不符. 请务必保持校验(Lint)规则和格式化(Format)规则一致,不然格式化后还是不符合预期是非常讨厌的. 本篇主要讲解怎么调教V ...

VSCode格式化插件冲突