HTML/CSS/JS代码格式化

我们在编辑器当中写代码的时候,可能因为编写时候不规范或者复制粘贴的操作导致代码格式混乱。我在之前采用的是JSFormat来格式化JavaScript和JSON,使用Sublime Text自带的reindent命令格式化HTML和CSS的文件。基本上reindent命令就足够用了。但是有缺点,一些html文件的格式不够优美!这里介绍一些方法。

常用方法

我个人需要格式化的以HTML、CSS、JS和JSON这些代码为主,格式化代码之后利于代码维护,针对这个类型常用的几种格式化插件有:

  • Sublime自带的reindent命令:不能删除额外的空行,对 <script> 内的标签支持不好,不能处理未封闭的标签。

  • TAG插件:目前最流行的HTML格式化插件,无额外依赖,但是对 <script> 内的标签以及php标签支持不太好。

  • HTMLTidy和HTML5Tidy插件:仅支持 Sublime Text 2 ,并且依赖PHP。

  • HTML-CSS-JS Prettify 插件:依赖 Node.js。

  • HTMLBeautify:对内联注释支持不太好。

Reindent命令

经过比较,目前只有自带的reindent+JSFormat和HTML-CSS-JS Prettify这两个比较符合我的要求。因为reindent命令对JSON格式化不支持,所以配合JSFormat使用比较合适。使用比较频繁的话,建议设置快捷键,在Sublime里的Preferences -> Key Bindings User文件里添加下列代码:

{ "keys": ["super+shift+r"], "command": "reindent" , "args": { "single_line": false } }

{ "keys": ["super+shift+2"], "command": "js_format"}

HTML-CSS-JS Prettify

不过reindent命令只能满足最基本的要求,不够优美。

所以我选择了第二条路,采用HTML-CSS-JS Prettify插件。

安装方法也很简单。直接在package control的install package里搜索安装。同时设置好Node.js的路径。

由于我采用的nvm管理node的版本,路径和默认的路径并不一致,需要自己修改路径地址。在终端里
$ which node,复制路径,替换Preferences ->Package Setting ->HTML-CSS-JS Prettify ->set 'node' Path设置文件中的默认路径。

How do I reformat HTML code using Sublime Text 2
Formatting HTML with Sublime Text

坚持原创技术分享,您的支持将鼓励我继续创作!