Brackets - 拡張機能 - 整形 Beautify

 
1. 概要
2. インストール
3. 操作

1. 概要

 Google 大先生が、「コンテンツソースは、できるだけ短くしろ」とおっしゃるものだから、.css にしろ、.js、.html にしろ、いわゆるホワイトスペース(空白、改行、タブ等)は、表示に影響ないものは、すべてソース上からとっぱらっちゃったりしてます。  まぁ、そうすると地のソースを読むときの可読性がひどく損なわれるわけです。  イマドキのたいていのエディタには、切り詰めたり、整形して可読性をあげるための機能がついていたりします。  Brackets にもそれがあるわけです。  本項は、「Bracketsでhtml・css・JavaScriptのコードを自動整形する方法」を参考にさせていただきました。

2. インストール

 「拡張機能マネージャ」で「Beautify」を探せば見つかります。
「Brackets」-「拡張機能 Beautify」「インストール」

3. 操作

 整形したい箇所を右クリックして  「Beautify」
「Brackets」-「拡張機能 Beautify」「操作」

 ショートカットキーは Ctrl+Alt+B です。


 例えば、こういうソースが


!function(){if("undefined"!=typeof self&&self.Prism||"undefined"!=typeof global&&global.Prism){var s={classMap:{}};Prism.plugins.customClass={map:function(i){s.classMap=i},prefix:function(i){s.prefixString=i}},Prism.hooks.add("wrap",function(i){(s.classMap||s.prefixString)&&(i.classes=i.classes.map(function(i){return(s.prefixString||"")+(s.classMap[i]||i)}))})}}();
 操作の結果、こうなります。

! function () {
	if ("undefined" != typeof self && self.Prism || "undefined" != typeof global && global.Prism) {
		var s = {
			classMap: {}
		};
		Prism.plugins.customClass = {
			map: function (i) {
				s.classMap = i
			},
			prefix: function (i) {
				s.prefixString = i
			}
		}, Prism.hooks.add("wrap", function (i) {
			(s.classMap || s.prefixString) && (i.classes = i.classes.map(function (i) {
				return (s.prefixString || "") + (s.classMap[i] || i)
			}))
		})
	}
 
 
カウンタバックグラウンド