在vscode中统一vue编码风格的方法
vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一。
所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷。
本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格。
vetur 插件
vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性。
但有几个功能不是直接支持,需要手动配置,而且有几个功能需要其他插件配置后才能配合他完成。
这就有点麻烦了,新手同学们往往就是死在这里。
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+style 3部分,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+style 3部分拆分,然后交给对应的语言处理器去处理。
例如:
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 也没支持,官网只给了这个解决方案。
或许之后就支持了呢。
其他插件推荐
- Auto Close Tag
- Auto Rename Tag
- Bracket Pair Colorizer
- Code Runner
- Document This
- EditorConfig
- ESLint
- gitignore
- GitLens
- Guides
- Import Cost
- npm intellisense
- Path Autocomplete
- Prettier
- Settings Sync
- TODO Highlight
- Vetur
- vscode-icons
我就不一一解释了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。