首页 >开发工具 >VSCode > 正文

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

转载2021-05-20 18:08:5301345
本篇文章给大家介绍一下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中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除

  • 相关标签:vue-beautify vscode vue
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    laravel视图在哪个目录256
    php和laravel是什么189
    laravel框架有什么用963
    推荐视频教程
  • 尚硅谷自动化构建工具Maven视频教程尚硅谷自动化构建工具Maven视频教程
  • Git工具使用小知识Git工具使用小知识
  • 轻松掌握Composer软件依赖工具(玉女心经版)轻松掌握Composer软件依赖工具(玉女心经版)
  • 视频教程分类