【转载】使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码
很多时候,我们想要格式化HTML-CSS-JS代码,网站上有很多实现此功能的小工具,当然,我的网站首页也有。但是,如果我们的代码编辑器上面也有这样的功能,那不是更加快速便捷?So,接下来,我们看看Sublime Text 3是如何使用插件实现此功能的吧!
一、必要条件:
1、首先,你要有Sublime Text 3编辑器;
2、你本地要配置NodeJS环境(安装方法可以参考:Node.js学习笔记之一);
3、你的Sublime Text 3编辑器要安装HTML-CSS-JS Prettify插件(安装方法可以参考:Sublime常用插件总结)。
二、安装过程:
1、我们打开Sublime Text 3编辑器,安装HTML-CSS-JS Prettify插件。
a)在Sublime Text 3中,按下Ctrl+Shift+P调出命令面板;
b)输入install 调出 Install Package 选项并回车;
c)输入pretty,并在列表中选择HTML-CSS-JS Prettify后回车即可安装。
2、查看本地安装的NodeJS配置环境路径(在dos命令下,输入where node并回车)。
3、在编辑器的任意一个html/js/css文件中,右击,出现如下图所示,选择Set Plugin Options。
4、将上述步骤2中的NodeJS本地路径保存到步骤3中打开的文件中,如下图所示。
5、成功安装HTML-CSS-JS Prettify插件。
三、做个DEMO:
1、原始HTML模板,混乱不堪。
2、右击,选择Prettify Code。
3、格式化结果。
文章出自:http://www.cnblogs.com/yuanbo88/p/6065773.html
另外参考:http://www.cnblogs.com/allanli/p/sublime_text_format_plugin.html
相关文章
- Web基础 HTML CSS JS JQuery AJAX
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS?
- js-css-html formatter
- 【JavaScript】通过JS修改Html元素的Css综合示例大全
- reveal.js实现html播放ppt的炫酷效果
- HTML、CSS、JS对unicode字符的不同处理
- html+css+js写的AI五子棋游戏(附源码)
- js转义和反转义html
- js处理富文本编辑器转义、去除转义、去除HTML标签
- 618快到了送上自制前端小项目(html css js)
- 音乐盒(前端练手项目 html css js)
- html+css+js实现科学计算器
- Html跨域js封装,前端页面跨域js,postMessage实现跨域
- sublime格式化插件---HTML-CSS-JS Prettify美化代码
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- JavaScript Html与JS基于事件实现交互
- 有趣的HTML实例(十一) 烟花特效(css+js)
- 有趣的HTML实例(九) 文本变形动画(css+js)
- 有趣的HTML实例(八) 一个很有趣的动态背景(css+js)
- WEB前端大作业-儿童礼物礼品商城响应式网页模板(HTML JS CSS)
- [js高手之路]HTML标签解释成DOM节点
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- 心电图html js控件
- 猜数字+表白墙(html+css+JS)
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- 十个炫丽的表白模板源码,整合成一个完整系统可修改文字,可统计人数,经典的爱情告白,万能告白模板,胜过鲜花表白,程序员的特殊表白方式说——我爱你(520)——html、js、css、jQuery
- Three.js Example 注解 —— webgl_geometry_convex.html
- Three.js Example 注解 —— canvas_geometry_hierarchy.html