JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

对于Web开发者而言,参考和观察其他网站的CSS和JS代码是一个绕不过去的过程,那么众所周知浏览器对js和css代码是不存在代码美化的,而很多时候线上环境为了节省数据还会对代码进行混淆和压缩,这就使得浏览器端查看JS和css代码变得尤为困难,今天给大家介绍一个插件『JavaScript and CSS Code Beautifier』。

这个插件可以将JavaScript 代码格式化、解密、反混淆和实现CSS 代码高亮,当你访问 CSS(LESS/SCSS/SASS)、JavaScript (JSX/TypeScript/CoffeeScript/JSON) 或 JSON 文件时,自动格式化并高亮代码。

插件支持 50 多种代码高亮主题,并且有丰富的自定义选项,前端开发者千万别错过的一款Chrome浏览器扩展程序。

JavaScript and CSS Code Beautifier使用教程

1、下载并安装扩展,安装后右上角工具栏会有一个CB按钮的标识。

JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

2、我们打开一个js文件,在地址栏下方会有一个提示,我们点击beautify now!进行美化。

美化前:

JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

美化后:

JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

3、美化后虽然整齐了不少,但是不是不如我我文章图2中看着那么舒服呢,不用担心,接下来我们在右上角扩展中右键 – 选项进行调整;

我们在一般设置中进行设置,比如够哦选自动格式化,选择主题、字体、缩进后都可以在最下方的preview预览到。

JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

4、设置好后我们关闭右上角设置按钮。

JavaScript and CSS Code Beautifier:代码自动高亮及格式化的美化插件

5、我们再次切换到最开始打开的js页面刷新后看一下,比最初原始格式化的漂亮很多。

资源地址

本地下载: 城通网盘