# HTML, CSS, JavaScript and JSON code formatter for Sublime Text 2 and 3 via node.js
#### [Sublime Text 3](http://www.sublimetext.com/3)
#### [JS-beautify](https://github.com/einars/js-beautify)
#### [Node.js download](http://nodejs.org/#download)
## About
This is a Sublime Text 2 and 3 plugin allowing you to format your HTML, CSS, JavaScript and JSON code. It uses a set of nice beautifier scripts made by Einar Lielmanis. The formatters are written in JavaScript, so you'll need something (node.js) to interpret JavaScript code outside the browser.
This will work with either HTML, CSS, JavaScript and JSON files.
## Installation
First of all, be sure you have [node.js](http://nodejs.org/#download) installed in order to run the beautifier. After you've installed node.js, you will need to setup this plugin.
Each OS has a different `Packages` folder required by Sublime Text. Open it via Preferences -> Browse Packages, and copy this repository contents to the `Sublime-HTMLPrettify` folder there.
The shorter way of doing this is:
### Through [Sublime Package Manager](http://wbond.net/sublime_packages/package_control)
* `Ctrl+Shift+P` or `Cmd+Shift+P` in Linux/Windows/OS X
* type `install`, select `Package Control: Install Package`
* type `prettify`, select `HTML-CSS-JS Prettify`
### Manually
Make sure you use the right Sublime Text folder. For example, on OS X, packages for version 2 are in `~/Library/Application\ Support/Sublime\ Text\ 2`, while version 3 is labeled `~/Library/Application\ Support/Sublime\ Text\ 3`.
These are for 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`
## Usage
Tools -> Command Palette (`Cmd+Shift+P` or `Ctrl+Shift+P`) and type `htmlprettify`.
-- or --
`Ctrl+Shift+H` (or `Cmd+Shift+H` if you're on a Mac).
-- or --
Right click in the current buffer and select `HTML/CSS/JS Prettify` -> `Prettify Code`.
-- or --
Open a HTML, CSS or JavaScript file, pop out the console in Sublime Text from View -> Show Console, and type `view.run_command("htmlprettify")`.
Writing commands in the console is ugly. Set up your own key combo for this, by going to Preferences -> Key Bindings - User, and adding a command in that array: `{ "keys": ["super+shift+h"], "command": "htmlprettify" }`. You can use any other command you want, thought most of them are already taken.
## Oh noez, command not found!
If you get an error `sh: node: command not found` or similar, you don't have `node` in the right path. Try setting the absolute path to node in `HTMLPrettify.sublime-settings`.
* `Ctrl+Shift+P` or `Cmd+Shift+P` in Linux/Windows/OS X
* type `htmlprettify`, select `Set node Path`
Simply using `node` without specifying a path sometimes doesn't work :(
For example, on Linux the path could be in `/home/<user>/.nvm/<node version>/bin/node`.
On Windows, the absolute path to node.exe *must* use forward slashes. Must include nodejs.exe, like so: `C:/Program Files (x86)/Nodejs/node.exe`
### Be very careful on Debian!
Depending on your distribution and default package sources, `apt-get install node` (for example) *will not* install node.js, contrary to all human common sense and popular belief. You want `nodejs` instead. Best thing is to make it yourself from http://nodejs.org/#download.
## Beautify on Save
To beautify your code when saving the document, set the `format_on_save` setting to `true` in `HTMLPrettify.sublime-settings`:
* `Ctrl+Shift+P` or `Cmd+Shift+P` in Linux/Windows/OS X
* type `htmlprettify`, select `Set Plugin Options`
## Preserving selection after formatting
To stop beautifying only the selected text, set the `format_selection_only` setting to `false` in `HTMLPrettify.sublime-settings`.
## Ignoring certain blocks of code
Parts of code that shouldn't be formatted can be ignored with `beautify preserve` and `beautify ignore` directive comments. This allows you to tell the beautifier to preserve the formtatting of or completely ignore part of a file. The example inputs below will remain changed after beautification.
Use `preserve` when the content is javascript, but you don't want it reformatted.
```js
/* beautify preserve:start */
{
browserName: 'internet explorer',
platform: 'Windows 7',
version: '8'
}
/* beautify preserve:end */
```
Use `ignore` when the content is not parsable as javascript.
```js
var a = 1;
/* beautify ignore:start */
{This is some strange{template language{using open-braces?
/* beautify ignore:end */
```
## Using your own .jsbeautifyrc options
The plugin looks for a `.jsbeautifyrc` file in the following directories:
1. The same directory as the source file you're prettifying.
2. The source file's parent directories.
3. Your home folder.
4. Your personal Sublime settings folder.
When one is found, it stops searching, and it uses those options along with the default ones. [Here](https://github.com/einars/js-beautify/blob/master/js/config/defaults.json)'s an example of how it can look like.
These are the default options used by this plugin:
```javascript
{
// 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", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
"end_with_newline": false, // End output with newline
"indent_char": " ", // Indentation character
"indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
"indent_inner_html": false, // Indent <head> and <body> sections
"indent_scripts": "keep", // [keep|separate|normal]
"indent_size": 4, // Indentation size
"max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
"preserve_newlines": true, // Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
"unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // List of tags that should not be reformatted
"wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
},
"css": {
"allowed_file_extensions": ["css", "scss", "sass", "less"],
"end_with_newline": false, // End output with newline
"indent_char": " ", // Indentation character
"indent_size": 4, // Indentation size
"newline_between_rules": true, // Add a new line after every css rule
"selector_separator": " ",
"selector_separator_newline": true // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
},
"js": {
"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
"brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
"break_chained_methods": false, // Break chained method calls across subsequent lines
"e4x": false, // Pass E4X xml literals through untouched
"end_with_newline": false, // End output with newline
"indent_char": " ", // Indentation character
"indent_level": 0, // Initial indentation level
"indent_size": 4, // Indentation size
"indent_with
没有合适的资源?快使用搜索试试~ 我知道了~
sublime插件HTML-CSS-JS Prettify
共258个文件
js:119个
json:21个
css:14个
5星 · 超过95%的资源 需积分: 20 178 下载量 171 浏览量
2016-08-03
00:08:34
上传
评论
收藏 1.26MB ZIP 举报
温馨提示
sublime插件HTML-CSS-JS Prettify,解压后放到sublime的Packages目录下重启即可使用。
资源推荐
资源详情
资源评论
收起资源包目录
sublime插件HTML-CSS-JS Prettify (258个子文件)
build 134B
bootstrap.css 117KB
font-awesome.css 14KB
codemirror.css 6KB
jsdoc-default.css 6KB
plato-overview.css 3KB
prettify-tomorrow.css 2KB
prettify-jsdoc.css 1KB
plato-display.css 1KB
plato-file.css 1KB
plato.css 866B
dialog.css 502B
morris.css 443B
morris.css 442B
simple-hint.css 368B
css-beautify 37B
fontawesome-webfont.eot 38KB
OpenSans-LightItalic-webfont.eot 20KB
OpenSans-Italic-webfont.eot 20KB
OpenSans-BoldItalic-webfont.eot 20KB
OpenSans-Regular-webfont.eot 19KB
OpenSans-Bold-webfont.eot 19KB
OpenSans-Light-webfont.eot 19KB
.gitignore 16B
html-with-base64image.html 206KB
index.html 8KB
index.html 6KB
minify.json.js.html 4KB
display.html 3KB
JSON.html 3KB
test.minify.html 2KB
TestDoc.html 2KB
index.html 2KB
requirejs-html-beautify.html 1KB
html-beautify 38B
core-bundle.js 235KB
codemirror.js 174KB
beautify-javascript-tests.js 130KB
beautify.js 96KB
tests.js 92KB
jquery-1.8.3.min.js 91KB
codemirror.js 89KB
raphael-min.js 89KB
underscore.js 47KB
beautify-html.js 47KB
beautify-html-tests.js 45KB
morris.min.js 31KB
lodash.min.js 27KB
tests.js 24KB
beautify-css-tests.js 21KB
cli.js 16KB
beautify-css.js 16KB
underscore-min.js 15KB
javascript.js 14KB
prettify.js 13KB
bootstrap-tooltip.js 12KB
nopt.js 11KB
tests.js 11KB
basic.js 8KB
parse.js 7KB
index.js 7KB
generate-tests.js 7KB
foldcode.js 6KB
index.js 5KB
javascript-hint.js 5KB
plato-overview.js 5KB
search.js 5KB
pig-hint.js 5KB
run.js 5KB
ini.js 5KB
searchcursor.js 5KB
plato-file.js 5KB
simple-hint.js 4KB
sanitytest.js 4KB
formatting.js 4KB
closetag.js 4KB
bootstrap-popover.js 3KB
multiplex.js 3KB
p_a_c_k_e_r_unpacker.js 3KB
javascriptobfuscator_unpacker.js 3KB
xml-hint.js 3KB
chain-class.js 3KB
runmode-standalone.js 3KB
minify.json.js 3KB
myobfuscate_unpacker.js 3KB
report.js 3KB
plato-sortable-file-list.js 3KB
report.history.js 3KB
matchbrackets.js 3KB
index.js 3KB
test-minify.json.js 2KB
dialog.js 2KB
codemirror.markpopovertext.js 2KB
urlencode_unpacker.js 2KB
proto-list.js 2KB
report.history.js 2KB
overlay.js 2KB
amd-beautify-tests.js 2KB
save.js 2KB
match-highlighter.js 2KB
共 258 条
- 1
- 2
- 3
资源评论
- github_389287392017-05-25真的非常非常好用
- adgvvgg2017-05-23非常好的资源
ml065787
- 粉丝: 3
- 资源: 24
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功