一、前言

    当你在前端编程学习探索中，遇到一份看似很好的代码，想copy下来，调试预览并学习。但是源代码对象可能是这样的。

需要调试的代码

    当你兴奋的拷贝下来，用sublime打开，打算预览调试。你发现代码是这样的。

sublime中的代码

    虽然不会影响在浏览器中的预览，但是如果你想修改这个html页面的话，是非常困难的。页面代码格式混乱，很难定位到你想查看的标签。整个布局也不清楚。

    好的，说正事了，怎么做可以让代码看起来英姿飒爽呢？

二、安装包管理器

    安装sublime的包管理器

sublime中快捷键Ctrl+Shift+P，调出控制台

在控制台中输入 Install Package回车。之后再输入 html-css-js prettify。回车即可，稍等几秒。

调出控制台。

三、测试

    1、插件安装安装完成后

查看是否安装成功

    2、选择keyboard-shortcuts-default查看快捷键设置。

查看快捷键命令

    3、回到测试页面，按下快捷键"ctrl+shift+h"

            duang duang duang！还不可以。

缺乏node运行环境

    4，有的同学觉得犹豫了，为啥还要安装node.js，好麻烦不想弄了。但是当你学习到前端框架，vue/react/AJ了之后，你会发现node环境，和npm包管理对于框架开发时多么的重要。所以不要退缩，再html/css/js之后，正好可以学一下前端框架了，推荐vue.js。链接送上，🔗https://cn.vuejs.org/。所以先准备node环境吧。

四、安装node环境

    1、官网地址：http://nodejs.cn/。下载最新版。

下载页面

2、安装到自己想安装的位置。注意PATH配置。配置环境变量/或进入安装目录下。输入node --version查看安装版本，检测安装是否成功。

PATH环境变量配置。 检测版本

3、继续调试格式化代码：快捷键 "ctrl+shift+h"

还是node的问题。

        嗯嗯？？还是不可以。没事，点击🆗。看看什么情况。

    原来时node-path的问题。好吧，那修改为我们安装node的目录。

修改node目录配置。

五、测试 代码格式化，

    快捷键CTRL+SHIFT+H，这一次是不是好了很多呢，我这个效果不明显，应为只有两个div，如果有个上百行，或者多层嵌套,加上css/js等代码，格式化后那应该会不错的效果。

代码格式化

参考文献：

https://blog.csdn.net/weixin_36892106/article/details/80109499

备注：

码字不易，码代码更不易，共勉！如果帮助到你，点个喜欢吧。

附录：格式化json

一、安装支持json格式化的插件

快捷键ctrl+shift+p回车，打开插件控制台，再其中输入，install package，回车。然后搜索PrettyJson选择安装。安装成功后，左下角会后提示。

安装PJson插件

二，测试

给一个json乱格式接口  https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb

请求到的数据如下。

josn文件

复制到sublime打开

，sublime中的json

格式化快捷键：ctrl+alt+j，记得把头尾的cb()去掉，里面的才是json

格式话后的json

tips:

 google浏览器使用web前端工具插件，获取json api接口时，会自动格式化json，同样的请求链接再来一遍。

google插件    

实用插件拓展教程，后期出吧，码字不易，码代码更不易，共勉！