sublime格式化插件---HTML-CSS-JS Prettify美化代码

1.HTML-CSS-JS Prettify

HTML-CSSS-JS Prettify插件使用js-beautify来格式化js、html与css代码。
可以在这里尝试js-beautify的效果
原始代码:

// This is just a sample script. Paste your real code (javascript or HTML) here.

if (‘this_is‘==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

格式化后的代码:

// This is just a sample script. Paste your real code (javascript or HTML) here.
if (‘this_is‘ == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

有了这个,个人认为在前端开发中,可以不用AlignmentJsFormat这两个插件。
Alignment的代码对齐HTML-CSS-JS Prettify也有,JsFormat实际上也用的是js-beautify。
如果只是针对html、css与js代码,HTML-CSS-JS Prettify就够了

1.1HTML-CSS-JS Prettify安装

HTML-CSSS-JS Prettify插件使用的是node版的js-beautify,因此需要首先安装node,node的安装请自行搜索。
在node安装完成后,使用npm安装js-beautify,命令 npm install -g js-beautify
HTML-CSS-JS Prettify的安装推荐使用PackageControl
Ctrl+Shift+P输入Install Package,然后输入HTML-CSS-JS Prettify进行安装

1.2.HTML-CSS-JS Prettify配置

HTML-CSS-JS Prettify配置可使用.jsbeautifyrc文件,js-beautify会在被优化代码文件的当前目录查找,如果找不到会向上级目录查找。
因此,可以在项目的根目录新建.jsbeautifyrc文件来配置js-beautify
贴一下我的配置,是从这里扣下来的,改的比较少

{
  // 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","aspx","jsp"],
    "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": 2, // 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": 2, // Indentation size
    "newline_between_rules": true, // Add a new line after every css rule
    "selector_separator": " ",
    "selector_separator_newline": false // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
  },
  "js": {
    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc", "csslintrc"],
    "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": 2, // Indentation size
    "indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
    "jslint_happy": false, // If true, then jslint-stricter mode is enforced
    "keep_array_indentation": false, // Preserve array indentation
    "keep_function_indentation": false, // Preserve function indentation
    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks should be preserved
    "space_after_anon_function": false, // Should the space before an anonymous function‘s parens be added, "function()" vs "function ()"
    "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
    "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
    "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
    "unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  }
}

主要的改动就是

  • 修改了"html"的"allowed_file_extensions",增加了aspx和jsp的支持
  • 修改了"css"的"selector_separator_newline",个人觉得没必要每个选择器都要占一行
  • 修改了"js"的"allowed_file_extensions",增加了.csslintrc文件的支持
  • 修改了"html"、"css"、"js"的"indent_size",我的代码缩进为2个空格

1.3.HTML-CSS-JS Prettify使用

使用Ctrl+Shift+H,优化当前代码文件。
使用js文件测试一下,优化前

优化后

js-beautify对css的格式化,有个问题是,会在注释下面插入一行空白字符
如下图,优化前

优化后

sublime text 3 插件:HTML-CSS-JS Prettify文中给出了解决方法,大家可以参考

.

原文地址:https://www.cnblogs.com/jianxian/p/12245112.html

时间: 2024-10-17 11:39:19

sublime格式化插件---HTML-CSS-JS Prettify美化代码的相关文章

【前端】Sublime text3 插件HTML/CSS/JS prettify 格式化代码

1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2.在代码界面右击->HTML/CSS/JS prettify->Prettify Code ,如果出现下图提示 去node.js官网下载32位的相应的node.js, windows对应的 node.js 的传送门. 然后保证位置和set plugin option里面的一样就行了.

sublime 格式化 插件HMTL/CSS/JS

https://github.com/victorporof/Sublime-HTMLPrettify 安装插件的话需要安装Node.js,具体操作如下: 1.官网下载Node.js,地址 http://nodejs.org 2.右击页面多了一个HTML/CSS/JS Prettiy的选项,设置一下Node路径: "node_path": { "windows": "D:/Program Files/nodejs/node.exe", "

Linux下sublime Text3使用HTML/CSS/JS prettify问题

Linux下使用Sublime Text3,当用HTML/CSS/JS Prettify格式代码时报Node path err错误时可以再终端输入 which node 查看node 环境路径,在将正确路径配置在HTML/CSS/JS Prettify配置文档里

jQuery的md5加密插件及其它js md5加密代码

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

Zend Studio上安装使用Aptana插件(html,css,js代码提示功能)

? 最近装了zend studio 9.0 用了段时间发现写html,css,js代码没提示,要开dreamwaver(对js代码提示也不好).就网上搜索了下,发现了Aptana插件,装上用了下,感觉不错. 贴下官方网址:http://www.aptana.com/ 一.安装步骤: 1.zend studio->Help->Install New Software->work with点击add(见下图) 2.这里有两个选择: (1)Local(本地安装) (2)在线安装,locatio

SublimeText3系列- HTML-CSS-JS Prettify美化代码&amp;Markdown Preview写作

1.1HTML-CSS-JS Prettify安装 HTML-CSSS-JS Prettify插件使用的是node版的js-beautify,因此需要首先安装node,node的安装请自行搜索.在node安装完成后,使用npm安装js-beautify,命令 npm install -g js-beautifyHTML-CSS-JS Prettify 的安装推荐使用PackageControlCtrl+Shift+P输入Install Package,然后输入HTML-CSS-JS Pretti

Sublime text3 代码格式化插件安装

1. 打开菜单 -> 首选项(Perferences) -> 插件控制(Packpage Control),输入"Install Package" 2. 等待程序进入插件管理功能,再输入插件名称:"HTML-CSS-JS prettify" 3. 点击安装插件 "HTML-CSS-JS Prettify" . 4. 插件安装成功后,在需要格式化的HTML代码中,选中代码,然后按 "Ctrl+Alt+H" 对代码进行

sublime Text3插件教程

Mr_Renhappy Sublime Text3 3080安装及各种插件教程 作为一个前端开发人员,搭建自己喜欢的开发环境是必要的!Sublime Text3 作为一个前端开发利器是必备的, 会用是不够的,必须学会如何安装配置:作为一个windows用户很多命令行操作是很不习惯的,但有些地方命令行命令行也是必需的. 工具/原料 Sublime Text Nodejs 方法/步骤 1 打开Sublime Text3 官网   http://www.sublimetext.com/3 并下载与自己

sublime常用插件及配置,自留自用

1.Angularjs 写angularjs经常操作template文件,没有一个ng-xx的提示真的很蛋疼是不是,有些服务的名字记不住是不是,那就用这个插件吧 2.AutoFileName 如果你的文件名是一些比较晦涩难懂的组合起来的单词,输入文件路径一定会很麻烦对不对,用这个插件可以让你直接弹出window资源选择窗口,选择文件后自动输入文件路径,我是sublime2,怎么设置都是无效的,网上有些人说sublime3是没问题的 3.Docblockr 自动补全注释,在函数声明前 写“ /**