一陋守、前言
? ? 當(dāng)你在前端編程學(xué)習(xí)探索中揍堰，遇到一份看似很好的代碼，想copy下來嗅义，調(diào)試預(yù)覽并學(xué)習(xí)屏歹。但是源代碼對象可能是這樣的。
? ? 當(dāng)你興奮的拷貝下來之碗，用sublime打開蝙眶，打算預(yù)覽調(diào)試。你發(fā)現(xiàn)代碼是這樣的。
? ? 雖然不會影響在瀏覽器中的預(yù)覽幽纷，但是如果你想修改這個(gè)html頁面的話式塌，是非常困難的。頁面代碼格式混亂友浸，很難定位到你想查看的標(biāo)簽峰尝。整個(gè)布局也不清楚。
? ? 好的收恢，說正事了武学，怎么做可以讓代碼看起來英姿颯爽呢？
二伦意、安裝包管理器
????安裝sublime的包管理器
sublime中快捷鍵Ctrl+Shift+P火窒，調(diào)出控制臺
在控制臺中輸入 Install Package回車。之后再輸入?html-css-js prettify驮肉⊙螅回車即可，稍等幾秒离钝。
三、測試
? ? 1卵渴、插件安裝安裝完成后
? ? 2栏妖、選擇keyboard-shortcuts-default查看快捷鍵設(shè)置。
? ? 3奖恰、回到測試頁面，按下快捷鍵"ctrl+shift+h"
? ? ? ? ? ? duang duang duang宛裕！還不可以瑟啃。
? ? 4，有的同學(xué)覺得猶豫了揩尸，為啥還要安裝node.js蛹屿，好麻煩不想弄了。但是當(dāng)你學(xué)習(xí)到前端框架岩榆，vue/react/AJ了之后错负，你會發(fā)現(xiàn)node環(huán)境，和npm包管理對于框架開發(fā)時(shí)多么的重要勇边。所以不要退縮犹撒，再html/css/js之后，正好可以學(xué)一下前端框架了粒褒，推薦vue.js识颊。鏈接送上，??https://cn.vuejs.org/奕坟。所以先準(zhǔn)備node環(huán)境吧祥款。
四清笨、安裝node環(huán)境
? ? 1、官網(wǎng)地址：http://nodejs.cn/刃跛。下載最新版抠艾。
2、安裝到自己想安裝的位置桨昙。注意PATH配置检号。配置環(huán)境變量/或進(jìn)入安裝目錄下。輸入node --version查看安裝版本绊率，檢測安裝是否成功谨敛。
3滤否、繼續(xù)調(diào)試格式化代碼：快捷鍵?"ctrl+shift+h"
? ? ? ? 嗯嗯？藐俺？還是不可以炊甲。沒事，點(diǎn)擊??欲芹∏浞龋看看什么情況。
? ? 原來時(shí)node-path的問題菱父。好吧颈娜，那修改為我們安裝node的目錄。
五官辽、測試 代碼格式化，
????快捷鍵CTRL+SHIFT+H粟瞬，這一次是不是好了很多呢同仆，我這個(gè)效果不明顯，應(yīng)為只有兩個(gè)div裙品，如果有個(gè)上百行俗批，或者多層嵌套,加上css/js等代碼，格式化后那應(yīng)該會不錯(cuò)的效果市怎。
參考文獻(xiàn)：
https://blog.csdn.net/weixin_36892106/article/details/80109499
備注：
碼字不易岁忘，碼代碼更不易，共勉区匠！如果幫助到你臭觉，點(diǎn)個(gè)喜歡吧。
附錄：格式化json
一、安裝支持json格式化的插件
快捷鍵ctrl+shift+p回車蝠筑，打開插件控制臺狞膘，再其中輸入，install package什乙，回車挽封。然后搜索PrettyJson選擇安裝。安裝成功后臣镣，左下角會后提示辅愿。
二，測試
給一個(gè)json亂格式接口??https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb
請求到的數(shù)據(jù)如下忆某。
復(fù)制到sublime打開
格式化快捷鍵：ctrl+alt+j，記得把頭尾的cb()去掉弃舒，里面的才是json
tips:
?google瀏覽器使用web前端工具插件癞埠，獲取json api接口時(shí)，會自動格式化json聋呢，同樣的請求鏈接再來一遍苗踪。
實(shí)用插件拓展教程，后期出吧削锰，碼字不易通铲，碼代碼更不易，共勉器贩！
