Sublime Text如何实现html文件代码格式化

2017年1月26日
一.Sublime Text如何实现html文件代码格式化
1.效果:
未格式化前效果


Sublime Text如何实现html文件代码格式化_第1张图片
Paste_Image.png

格式化后效果


Sublime Text如何实现html文件代码格式化_第2张图片
Paste_Image.png

原理:安装代码格式化的插件 (HTML/CSS/JS+JSON代码的插件)

2.实现
第一步:打开sublime text 接着按Ctrl+Shift+P,输入install后,选择Install Package

Sublime Text如何实现html文件代码格式化_第3张图片
Paste_Image.png

第二步:可能要等待2-3分钟,接着在弹出框输入pretty,选择TML/CSS/JS Prettify安装既可(我这里已经安装好了,所以没了)
Sublime Text如何实现html文件代码格式化_第4张图片
Paste_Image.png

第三步:接下来你右键运行如下命令会报错, node.js没有安装导致
Sublime Text如何实现html文件代码格式化_第5张图片
Paste_Image.png

接下来我们正常安装下node.js就可以

二.如何正确安装node.js(不建议用brew命令安装,装不了npm,直接官网下载安装)<服务器脚本,可以用于开发服务器>
1.安装官网nodejs (双击安装好后,就默认安装了node 和npm)

Sublime Text如何实现html文件代码格式化_第6张图片
Paste_Image.png

2.测试是否安装正常,以下说明安装正常。
Sublime Text如何实现html文件代码格式化_第7张图片
Paste_Image.png

3.下载 SublimeText-Nodejs 开源插件
4.解压后,修改成Nodejs文件夹名(注意大小写)
5.将Nodejs放到如下目录。
Sublime Text如何实现html文件代码格式化_第8张图片
Paste_Image.png

6.修改目录里面如下两个文件Nodejs.sublime-build和Nodejs.sublime-settings
which 命令可以查看命令路径
Sublime Text如何实现html文件代码格式化_第9张图片
Paste_Image.png

Sublime Text如何实现html文件代码格式化_第10张图片
Paste_Image.png

2017年1月30日
三.sublime text调试html页面(如果没有效果,可能是该文件的路径含有中文目录,修改成英文就可以如下方式显示)


Sublime Text如何实现html文件代码格式化_第11张图片
Paste_Image.png

如果您发现本文对你有所帮助,如果您认为其他人也可能受益,请把它分享出去。

你可能感兴趣的:(Sublime Text如何实现html文件代码格式化)