sublime3 格式化 vue

sublime 添加格式化 .vue 文件. 以及格式化后还是乱的部分解决办法.

安装 HTML-CSS-JS Prettify 步骤

使用快捷键 ctrl + shift + p 打开 Package Control 键入 Install Package
选择 Install Package 之后,左下角会进入加载
稍等一会之后会出现这个.
搜索HTML-CSS-JS Prettify
点击安装
安装完成后, 默认的格式化快捷键是 ctrl+shift+h
添加 vue 格式的支持和 node_path
找到 Preferences -> Package Settings -> HTML/CSS/JS Prettify -> Plugin Options - Default中的

1
2
3
4
5
6
"node_path":
    {
        "windows": "D:/nodejs/node.exe",
        "linux": "/usr/bin/nodejs",
        "osx": "/usr/local/bin/node"
    },

绑定你系统的 node 地址

1
2
3
4
5
6
"html":
        {
            "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"],
            "allowed_file_syntaxes": ["html", "xml"],
            "disallowed_file_patterns": []
        },

在 allowed_file_extensions 中添加 “vue”

问题

到此就可以给 vue 文件格式化了, 不过我在使用的时候依然有点问题. :anger:

没有按照 tab 为 4 的 size 来格式化
格式化后 template 依然是乱的.
sass 也是乱的.

是这样的:
sublime3格式化vue-2023-11-30-14-39-39
嘿嘿, 这是要我关编辑器? 逼死强迫证系列. :anger:

解决

问题 1:
按照第 6 步打开 Plugin Options - Default 在最底部找到 "use_editor_indentation": false, 把false改为true
问题 2
按照第 6 步打开 Prettify Preferences - Default

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
"html":
    {
        // Rules added here apply only to HTML files. They take precedence over all
        // of the settings in the 'all' category above.

        // You can add other .jsbeautifyrc rules in this section too.

        // e.g. {{#foo}}, {{/foo}}
        "indent_handlebars": false,

        // Indent <head> and <body> sections
        "indent_inner_html": false,

        // [keep|separate|normal]
        "indent_scripts": "keep",

        // List of tags that should not be reformatted
        "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"]
    },

把 unformatted 设置成空的. "unformatted": [] 就可以了.

问题 3
不知道怎么解决 :trollface:
哪位朋友知道的, 麻烦告诉一下.~ :smirk:

以上的所有修改操作推荐把要修改的项 copy 到 - User 中不推荐直接修改 - Default

插件地址

格式化结果

sublime3格式化vue-2023-11-30-14-40-22
总算舒服了.

总结.

baidu 里全是 ctrl+c,ctrl+v 的吗?