使用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、格式化结果。

时间: 2024-08-29 05:33:28

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

用Sublime Text 3的HTML-CSS-JS Prettify(需安装node.js)插件格式化代码

用Sublime Text 3的HTML-CSS-JS Prettify(需安装node.js)插件格式化代码 用 Sublime Text 格式化代码(安装 HTML-CSS-JS Prettify 插件)时,格式化时却会提示(默认路径未找到Node.js) 下载安装到Node.js 官网下载 32位版本(据说win x64版有问题)安装. 确认Node.js安装路径鼠标右键HTML/CSS/JS Prettify > Set Plugin Options保证插件路径与Node.js安装路径一

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

Linux下使用Sublime Text3,当用HTML/CSS/JS Prettify格式代码时报Node path err错误时可以再终端输入 which node 查看node 环境路径,在将正确路径配置在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 text 3将px换算为rem的插件的安装及使用

rem这个单位对于移动端来说是比较强大的,所以这里给大家介绍sublime text 3将px换算为rem的插件的安装及使用,只要安装了这个插件,输入多少px,sublime就会提示相应的rem值,就不用自己去计算了!! 1.首先在这个地址:https://github.com/hyb628/cssrem.git  下载插件 2.将下载的插件将其解压,并且打开sublime,找到:Sublime Text -> Preferences -> Browse Packages,将解压好的文件夹放入

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

原文地址:http://www.cnblogs.com/zhcncn/p/4113589.html 本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html)的笔记,并添加了自己整理的一些内容,感谢原作者. 1. 下载 可以从官网 http://www.sublimetext.com/3 下载. 2. Windows下安装与使用 2.1 安装 1. Win7

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

Sublime Text 2安装汉化破解.插件包安装教程 听语音 | 浏览:41326 | 更新:2014-04-04 20:43 1 2 3 4 5 6 7 分步阅读 Sublime Text作为一款轻量.简洁.高效.跨平台的编辑器.支持N多种语言,受工程师所爱!这里教大家如何安装破解Sublime Text 2.0.2,并教大家如何安装包控制器(package control)和安装插件(Emmet.SublimeLinter.jQuery等插件) 工具/原料 Sublime Text 2.

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

Sublime Text作为一款轻量.简洁.高效.跨平台的编辑器.支持N多种语言,受工程师所爱!这里教大家如何安装破解Sublime Text 2.0.2,并教大家如何安装包控制器(package control)和安装插件(Emmet.SublimeLinter.jQuery等插件) 工具/原料 Sublime Text 2.0.2 32位.64位安装包 Sublime Text 2.0.2汉化包 此教程理论上也使用于Sublime Text其他版本的安装,但这里不保证会出现问题. 安装过程比

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

一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. 1 import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package

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

1.Package Contorl 包安装 Package Contorl:由Sublime Text提供的绝对必要的包管理器. 1.按Ctrl+`打开console. 2.粘贴一下代码到底部命令行并回车 import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-packag