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 文件。

?

1

2

3

4

5

6

7

8

"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 规范，字符串单引号，对象末尾项也有逗号。

?

1

2

3

4

// 强制单引号

"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 的格式化，则需手动配置。

?

1

2

3

4

5

6

7

8

9

// 使用 js-beautify-html 插件格式化 html

"vetur.format.defaultFormatter.html": "js-beautify-html",

// 格式化插件的配置

"vetur.format.defaultFormatterOptions": {

 "js-beautify-html": {

  // 属性强制折行对齐

  "wrap_attributes": "force-aligned",

 }

}

完成收工

至此，配置完成，完整配置如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

{

 // 强制单引号

 "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 也没支持，官网只给了这个解决方案。

或许之后就支持了呢。

其他插件推荐

  1. Auto Close Tag
  2. Auto Rename Tag
  3. Bracket Pair Colorizer
  4. Code Runner
  5. Document This
  6. EditorConfig
  7. ESLint
  8. gitignore
  9. GitLens
  10. Guides
  11. Import Cost
  12. npm intellisense
  13. Path Autocomplete
  14. Prettier
  15. Settings Sync
  16. TODO Highlight
  17. Vetur
  18. vscode-icons

我就不一一解释了

在vscode中统一vue编码风格的方法相关推荐

  1. 在 vscode 中统一 vue 编码风格，解决代码报错不能启动问题

    原文:http://www.itboth.com/d/bmA3ym/eslint-vue 推荐:VUEJS 实战教程第三章,利用laypage插件实现分页 [VUEJS 实战教程第三章,利用laypa ...

  2. vscode设置templates_在VScode中创建你的代码模板的方法

    使用VScode的用户代码片段功能,来生成自己习惯的代码模板,提升开发效率 1.选择菜单里的 文件 > 首选项 > 用户代码片段 2.选择你需要自定义模板的文件,以vue为例 3. 配置对 ...

  3. vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍

    VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置 打开vscode首选项- ...

  4. 在vscode中创建vue项目

    1. 背景 昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目,今天目标是自己用vscode新建一个vue项目 关于vue环境配置请看这篇:使用vscode运行Vue项目 2. 准备工 ...

  5. vscode中前端vue项目详解_web前端Vue项目实战-Music

    上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分 本届作业 聊一聊React和Vue的区别 老版本的项目环境如何创 ...

  6. Node.js webpack中导入vue的三种方法

    在webpack 中使用 Vue: 安装 vue 模块 npm i vue -S 注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完 ...

  7. vscode 中搭建Vue.js

    一. 首先安装node环境,并配置: 地址:https://nodejs.org/en/ 安装完成后执行:node --version 在这里我安装的是:12.2.0版本 二.安装Git 直接到以下地 ...

  8. VSCODE中使用VUE插件生成快捷模板

    VUE插件生成模板 1>VSCODE安装VUE2 Snippets 2>ctrl+shift+p 输入snippets选中首选项 3>默认模板{"Print to cons ...

  9. 不使用架构工具在vscode中操作vue,扩展添加vue.js.devtools（Hollo案例）

    1.请直接复制下面的代码到一个 HTML 文件中,并在浏览器中打开它 <!-- 开发环境版本,包含了有帮助的命令行警告 --><div id = "root"&g ...

最新文章

  1. 微信公众平台开发(82) 天气预报
  2. rust 关于ARM 板卡的使用
  3. 头条python面试题_大意了，这几道Python面试题没有答对，Python面试题精选
  4. php上传查询excel到mysql_PHP上传Excel文件导入数据到MySQL数据库示例
  5. python3字典写入excel_python3:excel操作之读取数据并返回字典 + 写入的案例
  6. Django05-2:路由分发/命名空间/伪静态/虚拟环境/django版本区别
  7. 简单了解tengine
  8. K8S环境中NAS卷添加noresvport方法
  9. EASYSIZE备份
  10. python调用go并把结果传回go_从Go调用Python函数并获取函数返回值
  11. 物理增强的深度学习模型改善卫星图像对热带气旋强度和大小估计（翻译）
  12. MathorCup竞赛任务分配
  13. DS18B20温度传感器学习笔记
  14. CentOS 官网下载各个版本CentOS系统
  15. Axure RP 8 获取焦点的应用
  16. 招商银行笔试题之修塔游戏
  17. Java IO基础知识
  18. python输入一个整数、输出该整数的所有素数因子_一个正整数的所有质数因子
  19. 浅尝 | 从 0 到 1 Vue 组件库封装
  20. Jump gameII

热门文章

  1. 华中农大津田賢一组招植物微生物组、生物信息方向博士后
  2. Fertility of Soils：根系C P计量比影响水稻残根周际酶活的时空动态分布特征
  3. Python使用matplotlib可视化相关性分析热力图图heatmap、使用seaborn中的heatmap函数可视化相关性热力图（Correllogram）
  4. R语言使用ggplot2包geom_jitter()函数绘制分组（strip plot，一维散点图）带状图（单色填充、分组颜色填充）实战
  5. R语言dplyr包使用transmute函数生成新的数据列（删除所有原数据列）实战
  6. Plotly可视化输出数据表格（table）:简单表格、添加链接的表格
  7. R删除数据列基于dplyr包
  8. Apriori算法、FP-Growth算法、顺序分析、PrefixSpan算法
  9. 字典学习（Dictionary Learning）
  10. R语言包_rCharts