Sublime3格式化html/css/js代码和json文件。
一、前言
当你在前端编程学习探索中,遇到一份看似很好的代码,想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
格式话后的jsontips:
google浏览器使用web前端工具插件,获取json api接口时,会自动格式化json,同样的请求链接再来一遍。
google插件实用插件拓展教程,后期出吧,码字不易,码代码更不易,共勉!