很多时候,我们想要格式化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、格式化结果。

使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码的更多相关文章

  1. sublime代码格式化插件HTML/CSS/JS prettify

    1. 进入下载链接,安装node.js (根据自己使用版本) https://nodejs.org/en/download/ 注意: 记住node.js的 安装路径 2.sublime HTML/CS ...

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

    1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...

  3. Sublime text3 插件HTML/CSS/JS prettify 格式化代码

    1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...

  4. sublime text 3将px换算为rem的插件的安装及使用

    标签: rem这个单位对于移动端来说是比较强大的,所以这里给大家介绍sublime text 3将px换算为rem的插件的安装及使用,只要安装了这个插件,输入多少px,sublime就会提示相应的re ...

  5. Sublime Text 2安装汉化破解、插件包安装教程

    原文地址: Sublime Text 2安装汉化破解.插件包安装教程_百度经验 http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.ht ...

  6. Sublime Text 3安装与使用 Package Control 插件安装

    原文地址:http://www.cnblogs.com/zhcncn/p/4113589.html 本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs ...

  7. 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验

    一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...

  8. sublime Text 3常用Html/Css基础插件安装

    前言 sublime以其简洁明了的外观,干脆利落的编辑方式,再加上丰富的功能插件,深受广大开发者的喜爱.今天,我就来介绍几款基于Html/Css开发的sublime插件. 1.Package Cont ...

  9. 使用Sublime Text 或 vs2017开发Node.js程序

    在学习一门开发语言时,为了从简单的方式入手,有时候直接用Notepad开始敲代码.曾经我也这样干过,这样做简洁而不简单啊! 随着时间的流逝,人也变得懒惰起来,做事前总是想借助一些工具来搞事情.< ...

随机推荐

  1. oracle12c ORA-28040: No matching authentication protocol

    出错原因:11G客户端连12C数据库服务端会报这个错 解决方案一:CSDN优质解决方案,大家都说可以,然而我这边操作了不行 转自13楼:http://bbs.csdn.net/topics/39066 ...

  2. 【题解】 [HNOI2015]落忆枫音 (拓扑排序+dp+容斥原理)

    原题戳我 Solution: (部分复制Navi_Aswon博客) 解释博客中的两个小地方: \[\sum_{\left(S是G中y→x的一条路径的点集\right))}\prod_{2≤j≤n,(j ...

  3. 【转】结构struct 联合Union和枚举Enum的细节讨论

    结构struct 联合Union和枚举Enum的细节讨论 联合(Union)是一种构造数据类型,它提供了一种使不同类型数据类型成员之间共享存储空间的方法,同时可以实现不同类型数据成员之间的自动类型转换 ...

  4. 前端学习 -- Css -- 样式的继承

    像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承, 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式. 但是并不是所有的样式都会 ...

  5. pthread_detach

    http://blog.csdn.net/scanery/article/details/7241890   感谢作者! 近来发现 在线程函数第一行调用 pthread_detach(pthread_ ...

  6. Go_21: Golang 中 time 包的使用二

    常量声明: const TimeLayout = "2006-01-02 15:04:05" 这是个奇葩,必须是这个时间点,据说是 go 诞生之日, 记忆方法:6-1-2-3-4- ...

  7. xgboost入门与实战(原理篇)

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  8. 【DS】排序算法之插入排序(Insertion Sort)

    一.算法思想 一般来说,插入排序都采用in-place在数组上实现.具体算法描述如下:1)从第一个元素开始,该元素可以认为已经被排序2)取出下一个元素,在已经排序的元素序列中从后向前扫描3)如果该元素 ...

  9. JavaScript继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance. John Resig作为jQuery的创始人而声名在外 ...

  10. HttpClient与HttpUrlConnection下载速度比较

    Android有两套http的API,刚开始使用网络编程时多少有些迷惑到底用哪个好呢?其实孰优孰劣无需再争论,google已经指出HttpUrlConnection是Android更优的选择,并在SD ...