• 技术文章 >开发工具 >VSCode

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

    青灯夜游青灯夜游2021-05-20 18:08:53转载426
    本篇文章给大家介绍一下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
       }
     }

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

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

    2.启用保存时自动

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

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

    1. 快捷键设置步骤

    2. 自定义快捷键

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

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

    更多编程相关知识,请访问:编程视频!!

    以上就是详解vscode中如何格式化vue文件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue-beautify vscode vue
    上一篇:20+前端常用的vscode插件(总结推荐) 下一篇:vscode设置中文的方法
    第16期线上培训班

    相关文章推荐

    • 详解vscode汉化,更改语言显示的方法• 推荐二十七个vscode有用插件,一起安装吧!• vue开发人员不可错过的7个vscode插件• 非常有用的VSCode插件,让编码如虎添翼!!• vscode格式化代码快捷键是什么• vscode如何设置智能提示

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网