vscode中使用beautify插件格式化vue文件(自定义快捷键)
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文件(自定义快捷键)相关推荐
- 初次使用VScode中的MPE插件写.md文件
初次使用VScode中的MPE插件写.md文件 确实使用VScode还不是很熟练,上一次使用还是心血来潮时学前端时,也是使用插件来显示实时效果,距今已经-总之很久了,忘了也不能怪我,是时间太残忍- 步 ...
- 解决在VSCode上使用Vetur插件格式化Vue代码时,会出现单引号和结尾冒号问题
vuter默认用prettier格式化代码,没有设置的情况下会出现单引号和结尾冒号问题. 在vscode设置中搜索 "vetur.format.defaultFormatter.js&quo ...
- 解决vscode格式化vue文件出现的问题
解决vscode格式化vue文件出现的问题 参考文章: (1)解决vscode格式化vue文件出现的问题 (2)https://www.cnblogs.com/weiqinl/p/8871826.ht ...
- vscode中配置LeetCode插件的教程(愉快刷题)
转载于脚本之家,原链接为https://www.jb51.net/article/183720.htm 大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器. ...
- VSCode中i18n ally插件无效的几个原因
VSCode中i18n ally插件无效的几个原因 在本次VUE3+Element-plus+vite+ts的一个项目中,想搞国际化,有些问题在网上也得不到解答,索性自己写一下 问题如题,原因可能有以 ...
- VScode中的神仙插件(写代码必备)
目录 一.概述 二.使用教程 1.搜索扩展 2.列出已安装的扩展 3.卸载扩展 4.禁用扩展 5.启用扩展 6.更新扩展 三.扩展介绍 1.Python 2.Jupyter 3.C/C++ 4.ESL ...
- 在vscode中使用pylint-django插件解决pylint的一些不必要的错误提示【转】
转自:http://www.cnblogs.com/chaojihexiang/p/6417835.html 微软的vscode编辑器是一个好东西,通过vscode编辑python程序非常的方便.推荐 ...
- 在Keil中利用AStyle插件格式化代码
平时在用keil调试程序的时候,代码默认情况下不能自动调整格式.需要手动调整格式,比较麻烦.通过AStyle插件可以很方便的自动调整代码格式.下面总结一个AStyle插件的使用方法. 首先在官网上下载 ...
- 在vscode中配置LeetCode插件,从此愉快地刷题
大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器.但是没想到在用的时候遇到了一些麻烦,花了一点时间才解决.所以写这篇文章除了给大家安利这个好用的插件之外, ...
- Notepad++ 安装XML Tools插件格式化XML文件
1. 打开Notepad++ 软件 2. 选择插件,选择"插件管理" 3. 搜索 XML Tools,找到该插件后,勾选该文件,点击"安装" 在Notepad+ ...
最新文章
- HSQLDB安装与使用
- 小忆《记录博客一周年》
- 客服机器人源码_快速搭建对话机器人,就用这一招!
- <<温泉屋的小老板娘>>观后感
- 很火的WiFi6,了解一下
- LeetCode贪心 数组拆分I
- ejb 2.0 3.0_定义EJB 3.1视图(本地,远程,无接口)
- 【转】java中定义二维数组的几种写法
- python密码传参有特殊字符如何解决_无法在python selenium scrip中使用带有特殊字符“$”的密码...
- lt;SCRIPT src=quot;../scripts/LoadWebOffice.jsquot;gt;lt;/SCRIPTgt;
- fiddler启用过滤规则只显示想要的接口数据
- java 调制信号,常见调制技术汇总
- 连接Linux服务器操作Oracle数据库
- jQuery数据存储的相关方法
- php合并两个有序链表,PHP如何实现合并两个有序链表为一个有序链表(代码)
- python 多线程 入门
- pantum打印机驱动安装m6506_奔图PantumM6506NW驱动官方版
- 为什么Word 里表格文字无法垂直居中?明明已经设置垂直居中了
- Dicom标签之(0020,0037) Image Orientation (Patient)
- Qt关于connect和拉姆达表达式