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
我就不一一解释了
来源: http://www.tuicool.com/articles/ziYBV3F