1. 先安装插件beautify

2.  打开设置 => 搜索 beautify.language

3.  配置 json 就行了

"beautify.language": {"js": {"type": ["javascript","json"],"filename": [".jshintrc",".jsbeautify"]},"css": ["css","scss"],"html": ["htm","html","vue"//在这里加上vue]}

具体使用(可忽略,可不配置)

1.在工作目录下建立.jsbeautifyrc文件

 {"brace_style": "none,preserve-inline","indent_size": 2,"indent_char": " ","jslint_happy": true,"unformatted": [""],"css": {"indent_size": 2}}

文件内容如上,其中有些参数要重点说明下。

  • brace_style,格式风格,详见官方说明(为避免和eslint默认检查冲突,建议此属性设置为 none,preserve-inline
  • indent_size,缩进长度(为避免和eslint默认检查冲突,建议此属性设置为 2
  • indent_char,缩进填充的内容(充满♂)
  • jslint_happy:true,若你要搭配jslint使用,请开启此选项
  • unformatted:["a","pre"],这里放不需要格式化的标签类型。注意template也是默认不格式化的,.vue的template标签如果需要格式化请在.jsbeautifyrc重新定义不带template的声明属性。

.jsbeautifyrc配置官方文档地址:Click here

2.启用保存时自动

在VSCode的配置文件里添加editor.formatOnSave:true即可实现保存时自动格式化

ps : 为了操作方便可以自定义快捷键

1. 快捷键设置步骤

2.  自定义快捷键

 {"key": "ctrl+b",//自己定键位"command": "HookyQR.beautify","when": "editorFocus"
}

ps: 要想修改编辑器自定义的快捷键点这里直接输入键位即可

vscode中使用beautify插件格式化vue文件(自定义快捷键)相关推荐

  1. 初次使用VScode中的MPE插件写.md文件

    初次使用VScode中的MPE插件写.md文件 确实使用VScode还不是很熟练,上一次使用还是心血来潮时学前端时,也是使用插件来显示实时效果,距今已经-总之很久了,忘了也不能怪我,是时间太残忍- 步 ...

  2. 解决在VSCode上使用Vetur插件格式化Vue代码时,会出现单引号和结尾冒号问题

    vuter默认用prettier格式化代码,没有设置的情况下会出现单引号和结尾冒号问题. 在vscode设置中搜索 "vetur.format.defaultFormatter.js&quo ...

  3. 解决vscode格式化vue文件出现的问题

    解决vscode格式化vue文件出现的问题 参考文章: (1)解决vscode格式化vue文件出现的问题 (2)https://www.cnblogs.com/weiqinl/p/8871826.ht ...

  4. vscode中配置LeetCode插件的教程(愉快刷题)

    转载于脚本之家,原链接为https://www.jb51.net/article/183720.htm 大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器. ...

  5. VSCode中i18n ally插件无效的几个原因

    VSCode中i18n ally插件无效的几个原因 在本次VUE3+Element-plus+vite+ts的一个项目中,想搞国际化,有些问题在网上也得不到解答,索性自己写一下 问题如题,原因可能有以 ...

  6. VScode中的神仙插件(写代码必备)

    目录 一.概述 二.使用教程 1.搜索扩展 2.列出已安装的扩展 3.卸载扩展 4.禁用扩展 5.启用扩展 6.更新扩展 三.扩展介绍 1.Python 2.Jupyter 3.C/C++ 4.ESL ...

  7. 在vscode中使用pylint-django插件解决pylint的一些不必要的错误提示【转】

    转自:http://www.cnblogs.com/chaojihexiang/p/6417835.html 微软的vscode编辑器是一个好东西,通过vscode编辑python程序非常的方便.推荐 ...

  8. 在Keil中利用AStyle插件格式化代码

    平时在用keil调试程序的时候,代码默认情况下不能自动调整格式.需要手动调整格式,比较麻烦.通过AStyle插件可以很方便的自动调整代码格式.下面总结一个AStyle插件的使用方法. 首先在官网上下载 ...

  9. 在vscode中配置LeetCode插件,从此愉快地刷题

    大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器.但是没想到在用的时候遇到了一些麻烦,花了一点时间才解决.所以写这篇文章除了给大家安利这个好用的插件之外, ...

  10. Notepad++ 安装XML Tools插件格式化XML文件

    1. 打开Notepad++ 软件 2. 选择插件,选择"插件管理" 3. 搜索 XML Tools,找到该插件后,勾选该文件,点击"安装" 在Notepad+ ...

最新文章

  1. HSQLDB安装与使用
  2. 小忆《记录博客一周年》
  3. 客服机器人源码_快速搭建对话机器人,就用这一招!
  4. <<温泉屋的小老板娘>>观后感
  5. 很火的WiFi6,了解一下
  6. LeetCode贪心 数组拆分I
  7. ejb 2.0 3.0_定义EJB 3.1视图(本地,远程,无接口)
  8. 【转】java中定义二维数组的几种写法
  9. python密码传参有特殊字符如何解决_无法在python selenium scrip中使用带有特殊字符“$”的密码...
  10. lt;SCRIPT src=quot;../scripts/LoadWebOffice.jsquot;gt;lt;/SCRIPTgt;
  11. fiddler启用过滤规则只显示想要的接口数据
  12. java 调制信号,常见调制技术汇总
  13. 连接Linux服务器操作Oracle数据库
  14. jQuery数据存储的相关方法
  15. php合并两个有序链表,PHP如何实现合并两个有序链表为一个有序链表(代码)
  16. python 多线程 入门
  17. pantum打印机驱动安装m6506_奔图PantumM6506NW驱动官方版
  18. 为什么Word 里表格文字无法垂直居中?明明已经设置垂直居中了
  19. Dicom标签之(0020,0037) Image Orientation (Patient)
  20. Qt关于connect和拉姆达表达式

热门文章

  1. 零基础学UI设计好学不?
  2. 大数据发展趋势之我见
  3. Python——全国二级等级考试
  4. TiDB 在马上消费金融核心账务系统归档及跑批业务下的实践
  5. 【CVPR 2018】Image Generation from Scene Graphs从场景图中生成图像 [文本转图]
  6. 外牌免检车辆上海年检
  7. kettle启动时报错:Maximum wait time of 10 seconds exceed while acquiring lock
  8. 【排序算法】Java版十大经典排序算法实现以及测试结果
  9. 乌鲁木齐云计算中心将于5月正式竣工并投入使用
  10. js dom节点操作的增加和删除