在vscode中统一vue编码风格的方法
vetur很多人知道，但在vscode下没办法格式化.vue里的html,js很是头疼，代码风格无法统一。
所以不少人直接拆分开，然后在.vue中引入，虽然方法很好，但这有违.vue单文件组件的初衷。
本文详细介绍vscode下使用vetur+prettier+eslint来统一vue编码风格。
vetur插件
vetur经过多个版本迭代，算是目前vscode下最好用的vue插件了，甚至支持ts,webpackalias等特性。
但有几个功能不是直接支持，需要手动配置，而且有几个功能需要其他插件配置后才能配合他完成。
这就有点麻烦了，新手同学们往往就是死在这里。
1.配置eslint
prettier覆盖vscode默认格式化快捷键，但没有针对eslint配置进行格式化，所以需要单独配置用户设置开启。
找到首选项->设置菜单，在右侧用户配置中添加"prettier.eslintIntegration":true开启eslint支持。
至此，可以对js文件采用eslint规范进行格式化了，但.vue文件还不行，因为他不认识这是个什么东西。
在用户设置中添加如下配置，以支持.vue文件。
"eslint.validate":[
"javascript",
"javascriptreact",
{
"language":"vue",
"autoFix":true
}
]
现在eslint认识vue了，但这只是eslint认识，prettier依然不认识这是什么东西。
所以我们要加上"eslint.autoFixOnSave":true配置，在保存文件时，自动fix里面的js代码。
2.配置prettier
虽然eslint可以处理vue文件了，但却跟prettier的格式化冲突，因为prettier不知道这是什么东西。
安装了vetur插件后，prettier知道.vue原来是一个html格式文件的，但依然没办法很好的格式化。
PS：目前vetur不支持prettier的eslint。
因为html包括了html+script+style3部分，prettier只能采用默认的格式化规范去格式化，不支持eslint，而且默认也不格式化html。
刚才开启的"prettier.eslintIntegration":true只是针对.js文件的，而不是针对.vue文件。
所以当你格式化.vue文件时候，stript部分可能会跟你的eslint风格不一致，你需要单独配置。
例如我的eslint规范，字符串单引号，对象末尾项也有逗号。
//强制单引号 "prettier.singleQuote":true, //尾随逗号 "prettier.trailingComma":"all",
如果你是双引号，而且不加末尾逗号的，就不必配置了。
或者你觉得无伤大雅，也不用配置这个，反正保存时eslint自动fix了。
3.配置vetur对html的格式化
因为vetur就是把.vue中的html+script+style3部分拆分，然后交给对应的语言处理器去处理。
例如:
html可以是html，也可以是pug,jade等。
script可以是es5,es6,ts,coffee。
style可以是css,less,sass,postcss等。
除了html部分，其他都默认采用prettier格式化。
如果需要html的格式化，则需手动配置。
//使用js-beautify-html插件格式化html
"vetur.format.defaultFormatter.html":"js-beautify-html",
//格式化插件的配置
"vetur.format.defaultFormatterOptions":{
"js-beautify-html":{
//属性强制折行对齐
"wrap_attributes":"force-aligned",
}
}
完成收工
至此，配置完成，完整配置如下：
{
//强制单引号
"prettier.singleQuote":true,
//尽可能控制尾随逗号的打印
"prettier.trailingComma":"all",
//开启eslint支持
"prettier.eslintIntegration":true,
//保存时自动fix
"eslint.autoFixOnSave":true,
//添加vue支持
"eslint.validate":[
"javascript",
"javascriptreact",
{
"language":"vue",
"autoFix":true
}
],
//使用插件格式化html
"vetur.format.defaultFormatter.html":"js-beautify-html",
//格式化插件的配置
"vetur.format.defaultFormatterOptions":{
"js-beautify-html":{
//属性强制折行对齐
"wrap_attributes":"force-aligned",
}
}
}
现在你可以在.vue中格式化html+js+css了。
但js部分格式化不是根据eslint格式化的，上面有解释。
js部分只能采用prettier默认格式，然后保存的时候自动fix，来达到prettier+eslint的效果。
如果需要详细配置，可以访问vetur官方文档https://vuejs.github.io/vetur
小结
主要解决了prettier不格式化.vue内的js问题，以及prettier格式化时跟eslint自动fix风格冲突问题。
当然，prettier格式化和eslint的fix有本质区别，但prettier+自动fix，就完美了。
对于.js来说，prettier开启eslint支持，直接完美。
但.vue只能这样配置了，因为目前vetur也没支持，官网只给了这个解决方案。
或许之后就支持了呢。
其他插件推荐
- AutoCloseTag
- AutoRenameTag
- BracketPairColorizer
- CodeRunner
- DocumentThis
- EditorConfig
- ESLint
- gitignore
- GitLens
- Guides
- ImportCost
- npmintellisense
- PathAutocomplete
- Prettier
- SettingsSync
- TODOHighlight
- Vetur
- vscode-icons
我就不一一解释了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。