OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 心得体会   关键字 展示   发布 ourjs  1412054448055
注意 转载须保留原文链接,译文链接,作者译者等信息。  
之前在 你用什么工具开发JavaScript?  曾经介绍过,目前绝大部分Web开发者使用VIM / Sublime等记事本来进行Web/NodeJS开发,(HTML、CSS和JavaScript)

这里介绍的是一个格式化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即可使用。



快捷键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
  }
}


参考这个项目,你也可以编写自己的插件。

项目地址: https://github.com/victorporof/Sublime-HTMLPrettify
原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Bootstrap vs Foundation如何选择靠谱前端框架
  2. Node.JS超越jQuery成为Github上第二受欢迎的开源项目
  3. Docker究竟是什么,为什么这么流行,它的优点和缺陷有哪些?
  4. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  5. JavaScript有可能取代AppleScript成为OS X平台的默认编程脚本
  6. 响应式设计在图片上的应用: 一个HTML元素如何让Web更快
  7. 5个经典的前端面试问题
  8. CSS垂直水平完全居中手册
  9. 今天我去面试, 受打击了:你是学 .net 的吧?
  10. Animate.css让添加CSS动画像喝水一样容易
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. CTO这点事
  2. Bootstrap vs Foundation如何选择靠谱前端框架
  3. CSS垂直水平完全居中手册
  4. 避免误用 Redis
  5. CSS的力量:用一个DIV画图
  6. 读懂心理学:网页界面设计实用指南三则
  7. 树莓派的联合创始人访谈 - 我们是怎么让大家都成为DIY黑客的
  8. CSS字体大小: em与px、pt、百分比之间的对比
  9. Readme文档驱动型开发
  10. 皇帝的新衣:Node.js

 关键字 - 展示
  1. 在access数据库中用SQL获取所有表名
  2. WeMall微信商城源码活动报名插件代码详情
  3. Wemall外卖版商城系统商城源码更新v1.3版
  4. CSS的力量:用一个DIV画图
  5. Chrome支持ES6字符串模板解析
  6. 不需要密码的登录
  7. 基于 Web 的 Go 语言 IDE
  8. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  9. 使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)
  10. 读懂心理学:网页界面设计实用指南三则

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号