目录
vscode中使用beautify插件格式化vue文件
1. 先安装插件beautify
2.  打开设置 => 搜索 beautify.language 
3.  配置 json 就行了
具体使用(可忽略,可不配置) 
ps : 为了操作方便可以自定义快捷键 
1. 快捷键设置步骤
2.  自定义快捷键
ps: 要想修改编辑器自定义的快捷键点这里直接输入键位即可
首页 开发工具 VSCode 详解vscode中如何格式化vue文件

详解vscode中如何格式化vue文件

May 08, 2021 am 10:19 AM
vscode vue

本篇文章给大家介绍一下vscode中格式化vue文件的方法,附自定义快捷键的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解vscode中如何格式化vue文件

vscode中使用beautify插件格式化vue文件

1. 先安装插件beautify

【推荐学习:《vscode教程》】

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中如何格式化vue文件的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么运行html vscode运行html的操作方法 vscode怎么运行html vscode运行html的操作方法 May 09, 2024 pm 12:25 PM

vscode怎么运行html vscode运行html的操作方法

vue中echarts怎么用 vue中echarts怎么用 May 09, 2024 pm 04:24 PM

vue中echarts怎么用

vscode怎么关闭项目文件夹_vscode关闭项目文件夹方法 vscode怎么关闭项目文件夹_vscode关闭项目文件夹方法 May 09, 2024 pm 02:13 PM

vscode怎么关闭项目文件夹_vscode关闭项目文件夹方法

vue中的export default的作用 vue中的export default的作用 May 09, 2024 pm 06:48 PM

vue中的export default的作用

vue中map函数的用法 vue中map函数的用法 May 09, 2024 pm 06:54 PM

vue中map函数的用法

Vscode怎么设置垂直滚动敏感性数值 设置垂直滚动敏感性数值方法 Vscode怎么设置垂直滚动敏感性数值 设置垂直滚动敏感性数值方法 May 09, 2024 pm 02:40 PM

Vscode怎么设置垂直滚动敏感性数值 设置垂直滚动敏感性数值方法

vscode怎样设置搜索条件 vscode搜索条件设置教程 vscode怎样设置搜索条件 vscode搜索条件设置教程 May 09, 2024 pm 01:28 PM

vscode怎样设置搜索条件 vscode搜索条件设置教程

vue中onmounted作用 vue中onmounted作用 May 09, 2024 pm 02:51 PM

vue中onmounted作用

See all articles