Brackets - 拡張機能 - 整形 Beautify

1.　概要

2.　インストール

3.　操作

1.　概要

　Google 大先生が、「コンテンツソースは、できるだけ短くしろ」とおっしゃるものだから、.css にしろ、.js、.html にしろ、いわゆるホワイトスペース（空白、改行、タブ等）は、表示に影響ないものは、すべてソース上からとっぱらっちゃったりしてます。

　まぁ、そうすると地のソースを読むときの可読性がひどく損なわれるわけです。

　イマドキのたいていのエディタには、切り詰めたり、整形して可読性をあげるための機能がついていたりします。

　Brackets にもそれがあるわけです。

　本項は、「Bracketsでhtml・css・JavaScriptのコードを自動整形する方法」を参考にさせていただきました。

2.　インストール

　「拡張機能マネージャ」で「Beautify」を探せば見つかります。

3.　操作

　整形したい箇所を右クリックして
　「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)
			}))
		})
	}