Sublime3格式化html/css/js代码和json文件。

2019-08-01  本文已影响0人  longerking

一、前言

    当你在前端编程学习探索中,遇到一份看似很好的代码,想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插件    

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

上一篇下一篇

猜你喜欢

热点阅读