html代码格式化nodejs,使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)

这里介绍的是一个格式化HTML/CSS/JavaScript(JSON)代码的Sublime插件,支持Sublime 2/3,这个插件使用Node.JS编写。

安装

首先你需要安装好node.js (nodejs.org),以便运行beautifier。

你可以直接从git上clone这个项目, Windows的安装脚本:

git clone https://github.com/victorporof/Sublime-HTMLPrettify.git %APPDATA%/Sublime\ Text\ 3/Packages/Sublime-HTMLPrettify

这个命令会调用 %APPDATA% 直接将插件clone到你的Sublime 插件包的文件夹中。重启后即可使用。

手动安装

你也可以下载 Sublime-HTMLPrettify 后,拷贝到Sublime 3的插件安装目录下,注意不是Sublime 3的安装路径,而是插件的存放路径,类似于这个路径:

C:\Users\YourUserName\AppData\Roaming\Sublime Text 3\Packages

你可以在Sublime菜单-> Preferences -> Browser Packages直接弹出这个路径。

拷贝完以后直接重启Sublime即可使用。

bdad3880fd7f485e8661c47257d23f4d.png

快捷键Ctrl+Shift+H即可格式化代码。

你也可以通过菜单上的'Set Prettify Preference'设置你自己的格式化参数

{

// Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options  // Documentation: https://github.com/einars/js-beautify/  "html": {

"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],

"brace_style": "collapse", // "expand", "end-expand", "expand-strict"

"indent_char": " ",

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

"indent_inner_html": false,

"indent_scripts": "keep", // "separate", "normal"

"indent_size": 4,

"max_preserve_newlines": 10,

"preserve_newlines": true,

"unformatted": ["a", "sub", "sup", "b", "i", "u", "pre"],

"wrap_line_length": 0

},

"css": {

"allowed_file_extensions": ["css", "scss", "sass", "less"],

"end_with_newline": false,

"indent_char": " ",

"indent_size": 4,

"selector_separator": " ",

"selector_separator_newline": false

},

"js": {

"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],

"brace_style": "collapse", // "expand", "end-expand", "expand-strict"

"break_chained_methods": false,

"e4x": false,

"eval_code": false,

"indent_char": " ",

"indent_level": 0,

"indent_size": 4,

"indent_with_tabs": false,

"jslint_happy": false,

"keep_array_indentation": false,

"keep_function_indentation": false,

"max_preserve_newlines": 10,

"preserve_newlines": true,

"space_before_conditional": true,

"space_in_paren": false,

"unescape_strings": false,

"wrap_line_length": 0

}

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值