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

淩亂°似流年 2021-09-17 13:44 490阅读 0赞

### 1. 先安装插件beautify ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 2][]

### 3.  配置 json 就行了 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 3][]

"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. 快捷键设置步骤 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 4][]

### 2.  自定义快捷键 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 6][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 7][]

## ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/c0674ef9c1374dc8ae1397d70a134bab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/e00ce0522bce49629f0ac7b5ad79d657.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 2]: /images/20210726/a767d232357549d4a7960bdc870ad7b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 3]: /images/20210726/bf0747e4b63f4fe789f14489c4e87d37.png
[Click here]: https://link.jianshu.com?t=https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 4]: /images/20210726/2d9dc15734554219905adc91fe561e80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 5]: /images/20210726/f2af642b9bc64804ab3469ef694888a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 6]: /images/20210726/3699fffa5e2f430fbf190ea8397fedf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 7]: /images/20210726/326833ecfe3b47ff8460ed640e263a49.png