HTML-CSS-JS 格式化工具
适用于 Sublime Text 2 和 3 的 HTML、CSS、JavaScript、JSON、React/JSX 和 Vue 代码格式化工具（通过 node.js 实现）
详情
安装
- 总数 1.32M
- Win 821K
- Mac 346K
- Linux 155K
| 8月6日 | 8月5日 | 8月4日 | 8月3日 | 8月2日 | 8月1日 | 7月31日 | 7月30日 | 7月29日 | 7月28日 | 7月27日 | 7月26日 | 7月25日 | 7月24日 | 7月23日 | 7月22日 | 7月21日 | 7月20日 | 7月19日 | 7月18日 | 7月17日 | 7月16日 | 7月15日 | 7月14日 | 7月13日 | 7月12日 | 7月11日 | 7月10日 | 7月9日 | 7月8日 | 7月7日 | 7月6日 | 7月5日 | 7月4日 | 7月3日 | 7月2日 | 7月1日 | 6月30日 | 6月29日 | 6月28日 | 6月27日 | 6月26日 | 6月25日 | 6月24日 | 6月23日 | 6月22日 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | 55 | 54 | 32 | 23 | 64 | 81 | 58 | 54 | 54 | 20 | 33 | 53 | 45 | 58 | 74 | 55 | 22 | 29 | 51 | 71 | 51 | 92 | 70 | 39 | 27 | 63 | 47 | 61 | 59 | 61 | 33 | 37 | 67 | 41 | 55 | 65 | 54 | 24 | 44 | 75 | 51 | 64 | 66 | 65 | 35 | 41 |
| Mac | 30 | 23 | 9 | 9 | 23 | 43 | 30 | 30 | 35 | 13 | 15 | 24 | 35 | 39 | 25 | 23 | 10 | 14 | 22 | 34 | 34 | 39 | 30 | 14 | 13 | 32 | 30 | 42 | 38 | 37 | 17 | 13 | 24 | 27 | 33 | 37 | 26 | 17 | 14 | 34 | 38 | 30 | 32 | 42 | 19 | 17 |
| Linux | 9 | 8 | 8 | 5 | 11 | 10 | 10 | 15 | 11 | 5 | 11 | 10 | 8 | 12 | 10 | 7 | 6 | 5 | 8 | 14 | 11 | 14 | 5 | 7 | 7 | 10 | 17 | 8 | 11 | 10 | 7 | 6 | 12 | 14 | 11 | 12 | 16 | 9 | 8 | 8 | 13 | 15 | 11 | 6 | 9 | 12 |
说明文档
适用于 Sublime Text 2 和 3 的 HTML、CSS、JavaScript、JSON、React 和 Vue 代码格式化工具（通过 node.js 实现）
Sublime Text 3
JS-beautify
Node.js 下载
关于
这是一个适用于 Sublime Text 2 和 3 的插件，允许您格式化 HTML、CSS、JavaScript、JSON、React 和 Vue 代码。它使用 Einar Lielmanis 制作的优美格式化脚本。格式化工具是用 JavaScript 编写的，因此您需要某种东西（node.js）来在浏览器外解释 JavaScript 代码。
这将与 HTML、CSS、JavaScript、JSON、React 和 Vue 文件一起工作。
安装
首先，请确保您已安装node.js 以运行格式化工具。在安装 node.js 之后，您需要设置此插件。
Sublime Text 需要不同的 Packages 文件夹，每个操作系统都不同。通过首选项 -> 浏览程序包打开它，并将此仓库的内容复制到那里的 Sublime-HTMLPrettify 文件夹中。
完成此操作的更简单方法是
通过 Sublime 程序包管理器
Ctrl+Shift+P或Cmd+Shift+P在 Linux/Windows/OS X 上- 输入
install，选择Package Control: Install Package - 输入
prettify，选择HTML-CSS-JS Prettify
手动
请确保您使用正确的 Sublime Text 文件夹。例如，在 OS X 上，2.0 版本的软件包位于 ~/Library/Application\ Support/Sublime\ Text\ 2 中，而 3.0 版本的软件包标记为 ~/Library/Application\ Support/Sublime\ Text\ 3。
以下为 Sublime Text 3
Mac
git clone https://github.com/victorporof/Sublime-HTMLPrettify.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Sublime-HTMLPrettify
Linux
git clone https://github.com/victorporof/Sublime-HTMLPrettify.git ~/.config/sublime-text-3/Packages/Sublime-HTMLPrettify
Windows
git clone https://github.com/victorporof/Sublime-HTMLPrettify.git %APPDATA%/Sublime\ Text\ 3/Packages/Sublime-HTMLPrettify
使用方法
工具 -> 命令面板 (Cmd+Shift+P 或 Ctrl+Shift+P) 并输入 htmlprettify。
– 或 –
Ctrl+Shift+H（如果您在 Mac 上，则为 Cmd+Shift+H）。
– 或 –
在当前缓冲区中右键单击，选择 HTML/CSS/JS Prettify -> Prettify Code。
– 或 –
打开 HTML、CSS、JavaScript、JSON、React 或 Vue 文件，在 Sublime Text 中从“视图”->“显示控制台”弹出控制台，并输入 view.run_command("htmlprettify")。
在控制台中编写命令看起来不好。通过转到“首选项”->“键盘绑定”-“用户”，并在此数组中添加一个命令来设置自己的快捷键：{ "keys": ["super+shift+h"], "command": "htmlprettify" }。您可以使用任何其他命令，尽管大多数已被占用。
哎呀，找不到命令！
如果您收到有关 Node.js 未找到或类似错误的错误，那么您还没有在正确的路径下安装 node。尝试在 HTMLPrettify.sublime-settings 中设置 node 的绝对路径。
Ctrl+Shift+P或Cmd+Shift+P在 Linux/Windows/OS X 上- 输入
htmlprettify，选择Set node Path
有时，简单地使用不带路径指定 node 可能无法正常工作 :(
例如，在 Linux 上，路径可能在 /home/<user>/.nvm/<node version>/bin/node。
在 Windows 上，绝对路径到 node.exe 必须使用正斜杠。必须包含 nodejs.exe，如下所示：C:/Program Files (x86)/Nodejs/node.exe
在 Linux 上请务必小心！
根据您的发行版和默认软件包源，比如 apt-get install node（例如）不会安装 node.js，这与人类的常识和普遍信仰相反。您需要的是 nodejs。最好的办法是自己从 https://node.org.cn/#download 下载。
美化 Vue 文件
为了正确美化 Vue 文件，请确保文件语法被 Sublime 识别为 HTML、XML 或 Vue。
美化 JSX 文件
为了正确美化 JSX 文件，请确保文件语法被 Sublime 识别为 JavaScript，并且在您的 .jsbeautifyrc 中 e4x 被设置为 true。
保存时美化
要设置在保存文档时美化代码，请在 HTMLPrettify.sublime-settings 中将 format_on_save 设置为 true。
Ctrl+Shift+P或Cmd+Shift+P在 Linux/Windows/OS X 上- 输入
htmlprettify，选择Set Plugin Options
编辑时美化（实验性 / 仅适用于 Sublime Text 3）
要设置在编辑文档时美化代码，请将 format_while_editing 设置为 true 在 HTMLPrettify.sublime-settings 中。
打开、聚焦或模糊文件时自动美化（仅限 Sublime Text 3）
要设置在这些事件中美化代码，请在 HTMLPrettify.sublime-settings 中将 format_on_open、format_on_focus 和 format_on_focus_lost 设置为 true。
仅格式化所选文本
要停止仅美化所选文本，请将 format_selection_only 设置为 false 在 HTMLPrettify.sublime-settings 中。
在美化前将内容保存到临时文件中
在美化之前，当前的编辑器文本内容的一个副本将被保存到临时文件中。这避免了直接将文本传递给美化器，从而避免了在 Windows 上或任何潜在的数据损失中出现的“文件名或扩展名太长”错误。要操作原始文档，请将 save_to_temp_file_before_prettifying 设置为 false 在 HTMLPrettify.sublime-settings 中。
指定允许美化的文件
要添加不同的文件扩展名，请使用 allowed_file_extensions 或 allowed_file_syntaxes 在 HTMLPrettify.sublime-settings 的 global_file_rules 设置下。
如果 use_editor_syntax 设置为 false，则以下内容适用
{
"html": {
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
},
"css": {
"allowed_file_extensions": ["css", "scss", "sass", "less"]
},
"js": {
"allowed_file_extensions": ["js"]
},
"json": {
"allowed_file_extensions": ["json", "jshintrc", "jsbeautifyrc"],
}
}
如果 use_editor_syntax 设置为 true，则以下内容适用
{
"html": {
"allowed_file_syntaxes": ["html", "xml"],
},
"css": {
"allowed_file_syntaxes": ["css", "sass", "less"],
},
"js": {
"allowed_file_syntaxes": ["javascript", "ecma"],
},
"json": {
"allowed_file_syntaxes": ["json"],
}
}
忽略某些文件
要添加忽略规则，请使用 disallowed_file_patterns 在 HTMLPrettify.sublime-settings 的 global_file_rules 设置下。如果文件（包括路径）与 disallowed_file_patterns 中定义的任何正则表达式模式匹配，则不会美化。
以下内容不受 use_editor_syntax 设置值的影响
{
"html": {
"disallowed_file_patterns": ["myFileToSkip\\.html", "myFolderToSkip"]
},
"css": {
"disallowed_file_patterns": ["myFileToSkip\\.css", "myFolderToSkip"]
},
"js": {
"disallowed_file_patterns": ["myFileToSkip\\.js", "myFolderToSkip"]
},
"json": {
"disallowed_file_patterns": ["myFileToSkip\\.json", "myFolderToSkip"]
}
}
忽略某些代码块
不应格式化的代码可以忽略，使用beautify preserve和beautify ignore指令注释。这允许您告诉美化器保留或完全忽略文件的一部分格式。下面的示例输入在美化后将与更改保持一致。
当内容是javascript但不想重新格式化时使用preserve。
/* beautify preserve:start */
{
browserName: 'internet explorer',
platform: 'Windows 7',
version: '8'
}
/* beautify preserve:end */
当内容不能作为javascript解析时使用ignore。
var a = 1;
/* beautify ignore:start */
{This is some strange{template language{using open-braces?
/* beautify ignore:end */
使用编辑器缩进设置来确定格式风格
若要停止使用.jsbeautifyrc配置文件中定义的缩进大小和使用制表符或空格的格式风格，而改用Sublime Text的设置，则需在HTMLPrettify.sublime-settings中将use_editor_indentation设置设为true。
使用编辑器语法确定文件类型
若要停止使用编辑器语法，而改用文件扩展名来确定文件类型，请在HTMLPrettify.sublime-settings中将use_editor_syntax设置设为false。
尊重.editorconfig文件
这些配置文件可以放置在.jsbeautifyrc文件可用的任何位置。若要停止尊重.editorconfig文件（这些文件会覆盖美化器的规则），请在HTMLPrettify.sublime-settings中将use_editorconfig设置设为false。注意，use_editor_syntax和use_editor_indentation具有优先级，并将始终覆盖来自任何配置文件的任何其他设置，例如.jsbeautifyrc和.editorconfig。
使用您自己的.jsbeautifyrc选项
插件将在以下目录中查找.jsbeautifyrc文件：
- 与您正在美化源文件的同一目录。
- 源文件的父亲目录。
- 您的家目录。
- 您的个人Sublime设置文件夹。
找到其中一个后，它将停止搜索，并使用这些选项和默认选项。
{
// The plugin looks for a .jsbeautifyrc file in the same directory as the
// source file you're prettifying (or any directory above if it doesn't exist,
// or in your home folder if everything else fails) and uses those options
// along the default ones.
// Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
// Documentation: https://github.com/beautify-web/js-beautify
"all":
{
// These rules apply to any supported code that is going to be be prettified,
// and have the lowest level of precedence (meaning any of the settings in
// the 'html', 'css', 'js', 'json' and 'custom' categories override these).
// You can add other .jsbeautifyrc rules in this section too.
// End output with newline
"end_with_newline": false,
// Character(s) to use as line terminators.
"eol": "\n",
// Initial indentation level
"indent_level": 0,
// Indentation character
"indent_char": " ",
// Indentation size
"indent_size": 4,
// Indent with tabs, overrides `indent_size` and `indent_char`
"indent_with_tabs": false,
// Maximum number of line breaks to be preserved in one chunk (0 disables)
"max_preserve_newlines": 0,
// Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
"preserve_newlines": true,
// Lines should wrap at next opportunity after this number of characters (0 disables)
"wrap_line_length": 0
},
"html":
{
// Rules added here apply only to HTML-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. 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. This should generally not be needed.
"unformatted": []
},
"css":
{
// Rules added here apply only to CSS-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// Add a new line after every css rule
"newline_between_rules": true,
// Selector separator character
"selector_separator": " ",
// Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
"selector_separator_newline": true
},
"js":
{
// Rules added here apply only to JS-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// [collapse|collapse-preserve-inline|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or put end braces on own line, or attempt to keep them where they are
"brace_style": "collapse-preserve-inline",
// Break chained method calls across subsequent lines
"break_chained_methods": false,
// Put commas at the beginning of new line instead of end
"comma_first": false,
// Pass E4X xml literals through untouched
"e4x": false,
// If true, then jslint-stricter mode is enforced
"jslint_happy": false,
// Preserve array indentation
"keep_array_indentation": false,
// Preserve function indentation
"keep_function_indentation": false,
// [before-newline|after-newline|preserve-newline] Set operator position
"operator_position": "before-newline",
// Should the space before an anonymous function's parens be added, "function()" vs "function ()"
"space_after_anon_function": false,
// Should the space before conditional statement be added, "if(true)" vs "if (true)"
"space_before_conditional": true,
// Add padding spaces within empty paren, "f()" vs "f( )"
"space_in_empty_paren": false,
// Add padding spaces within paren, ie. f( a, b )
"space_in_paren": false,
// Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
"unescape_strings": false
},
"json":
{
// Rules added here apply only to JSON-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// [collapse|collapse-preserve-inline|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or put end braces on own line, or attempt to keep them where they are
"brace_style": "expand",
// Preserve array indentation
"keep_array_indentation": false,
// Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
"unescape_strings": false
},
"custom":
{
// Rules added here apply only to files matching specific glob strings,
// but respecting any whitelists or blacklists as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over any of the settings in the categories above.
// For the following entries, keys are globs and values are objects which
// can contain any kind of .jsbeautifyrc setting.
"package?(-lock).json":
{
"indent_size": 2,
"brace_style": "collapse"
},
"*.sublime-@(settings|keymap|commands|menu)":
{
"indent_size": 4,
"brace_style": "expand"
}
}
}
以下是如何在您的家目录中的.jsbeautifyrc文件看起来：
{
"html": {
"indent_char": "\t",
"indent_size": 1
},
"js": {
"indent_char": " ",
"indent_size": 2
}
}
从与插件同一目录中的.jsbeautifyrc文件中，一些持久选项始终应用，如果未被您自己的.jsbeautifyrc文件覆盖。这些定义在这里[链接]。如果您想要，可以安全地向该json文件添加内容。
Ctrl+Shift+P或Cmd+Shift+P在 Linux/Windows/OS X 上- 键入
htmlprettify，选择设置美化首选项
谢谢！