2012-10-19

EmEditorのマクロでCSSのコードを整形する

EmEditorでCSSの整形用のマクロを作成してみました。
CSSの整形はjsbeautifier.orgの整形が良さそうだったので、jsbeautifierのコードを利用してマクロを作成しました。
jsbeautifierは、JavaScript用のコード整形サービスサイトですが、HTMLとCSSの整形もでき、HTMLとCSSのコード整形用のJavaScriptコードが公開されていたので、そのコードを利用しました。
JavaScript用のマクロはEmEditorマクロでJavaScriptのコードを整形するを見てください。

■目的
CSSのコードをEmEditor上で整形する。
整形には、jsbeautifierのCSS整形コード(beautify-css.js)を使用する。

■環境
OS Windows XP
EmEditor EmEditor Professional (32-bit) Version 11.0.5

■HTML整形コード(beautify-css.js)のダウンロード
jsbeautifier.orgが使用しているCSSを整形するJavaScriptのコード「beautify-css.js」をhttps://github.com/einars/js-beautifyからダウンロードします(*1)。
*1:この説明では、2012-10-04時点での「beautify-css.js」を使用しています。

■EmEditor用JavaScritp整形マクロファイルの作成
EmEditor用のマクロファイル(beautity-css.jsee)を作成します。

【マクロファイル(beautity-css.jsee)のコード】
#include "include/beautify-css.js";
/*
 beautify for EmEditor
 CSS
 Created by Shinichi Yamaura.
*/
document.selection.SelectAll();
// beautifyのオプション設定
var options = {
 'indent_size': 1,
 'indent_char': '\t'
};
code = document.selection.Text;
// 整形前に改行コードをLFに変換(beautifyのコードを実行用)
code = code.replace(/\r\n/g, '\n');
// beautifyの実行
var code = css_beautify(code, options);
// 整形後に改行コードをCR+LFに変換
code = code.replace(/\n/g, '\r\n');
// 行先頭の半角スペース1個を削除(beautify-cssのバグ対応)
code = code.replace(/\n /g, '\n');
document.selection.DestructiveInsert(code);
document.selection.StartOfDocument(false);

■整形マクロの説明
「beautify-css.js」をインクルードして、マクロから「beautify-css.js」を利用しています。
【注意】#includeは、スクリプトのメイン コードの上の最初の行に指定する必要があります。

編集しているコードを「beautify-css.js」の関数「css_beautify()」を使用して整形し、整形前のコードを上書きして整形後のコードを挿入します。

「css_beautify()」では、二番目の引数に整形のオプションを指定します。マクロの中で、beautifyのオプション指定をしているので、好みに合わせて設定してください。
beautifyのオプションは「beautify-css.js」のコメントに記載されています。補足説明にコメントに記載されているオプションの説明を整理しました。

マクロ内で、改行コードの置換をしています。これは補足説明を参照してください。

2012-10-04時点の「css_beautify()」では、整形後に、コメント行の次の行の先頭に半角スペースが挿入されてしまうので、マクロ内で半角スペースを削除する処理を追加しています。

■ファイルの配置
「CSS整形コード(beautify-css.js)」と「マクロファイル(beautify-css.jsee)」をEmEditorマクロフォルダに配置します。
「CSS整形コード」は、EmEditorマクロフォルダ内にサブフォルダ(include)を作成して配置します。

My Macros
│  beautify-css.jsee
│
└─include
        beautify-css.js

■実行方法
EmEditorのマクロで、マクロファイル(beautify-css.jsee)を実行してください。

■補足説明

●改行コード
マクロを作成している時に、改行コードで問題が発生したので、問題とその対応についての説明を記載しておきます。
EmEditorは、改行コードの混在ができるため「css_beautify()」での整形前に、編集しているテキストのコードの改行コードをLFに変換してから整形しています。
「css_beautify()」で出力されるコードは、改行コードをLFで出力されます。Windowsでは、改行コードをCR+LFにしたいので「css_beautify()」の整形後に、改行コードをCR-LFに変換しています。

●css_beautify()のオプション
2012-10-04時点
オプション 既定値 説明
indent_size 4 indentation size
indent_char space character to indent with

2012-10-17

EmEditorのマクロでHTMLのコードを整形する

EmEditorでHTMLの整形用のマクロを作成してみました。
HTMLの整形はjsbeautifier.orgの整形が良さそうだったので、jsbeautifierのコードを利用してマクロを作成しました。
jsbeautifierは、JavaScript用のコード整形サービスサイトですが、HTMLとCSSの整形もでき、HTMLとCSSのコード整形用のJavaScriptコードが公開されていたので、そのコードを利用しました。
JavaScript用のマクロはEmEditorマクロでJavaScriptのコードを整形するを見てください。

■目的
JavaScriptのコードをEmEditor上で整形する。
整形には、jsbeautifierのHTML整形コード(beautify-html.js)を使用する。

■環境
OS Windows XP
EmEditor EmEditor Professional (32-bit) Version 11.0.5

■HTML整形コード(beautify-html.js)のダウンロード
jsbeautifier.orgが使用しているHTMLを整形するJavaScriptのコード「beautify-html.js」をhttps://github.com/einars/js-beautifyからダウンロードします(*1)。
*1:この説明では、2012-10-04時点での「beautify-html.js」を使用しています。

■EmEditor用JavaScritp整形マクロファイルの作成
EmEditor用のマクロファイル(beautity-html.jsee)を作成します。

【マクロファイル(beautity-html.jsee)のコード】
#include "include/beautify-html.js";
/*
 beautify for EmEditor
 HTML
 Created by Shinichi Yamaura.
*/
document.selection.SelectAll();
// beautifyのオプション設定
var options = {
 'indent_size': 1,
 'indent_char': '\t',
 'max_char:': 100,
 'brace_style': "end-expand",
 'indent_scripts': "normal"
};
code = document.selection.Text;
// 整形前に改行コードをLFに変換(beautifyのコードを実行用)
code = code.replace(/\r\n/g, '\n');
// beautifyの実行
var code = style_html(code, options);
// 整形後に改行コードをCR+LFに変換
code = code.replace(/\n/g, '\r\n');
document.selection.DestructiveInsert(code);
document.selection.StartOfDocument(false);

■整形マクロの説明
「beautify-html.js」をインクルードして、マクロから「beautify-html.js」を利用しています。
【注意】#includeは、スクリプトのメイン コードの上の最初の行に指定する必要があります。

編集しているコードを「beautify-html.js」の関数「style-html()」を使用して整形し、整形前のコードを上書きして整形後のコードを挿入します。

「style-html()」では、二番目の引数に整形のオプションを指定します。マクロの中で、beautifyのオプション指定をしているので、好みに合わせて設定してください。
beautifyのオプションは「beautify-html.js」のコメントに記載されています。補足説明にコメントに記載されているオプションの説明を整理しました。

マクロ内で、改行コードの置換をしています。これは補足説明を参照してください。

■ファイルの配置
「HTML整形コード(beautify-html.js)」と「マクロファイル(beautify-html.jsee)」をEmEditorマクロフォルダに配置します。
「HTML整形コード」は、EmEditorマクロフォルダ内にサブフォルダ(include)を作成して配置します。

My Macros
│  beautify-html.jsee
│
└─include
        beautify-html.js

■実行方法
EmEditorのマクロで、マクロファイル(beautify-html.jsee)を実行してください。

■補足説明

●改行コード
マクロを作成している時に、改行コードで問題が発生したので、問題とその対応についての説明を記載しておきます。
EmEditorは、改行コードの混在ができるため「js_beautify()」での整形前に、編集しているテキストのコードの改行コードをLFに変換してから整形しています。
「style-html()」で出力されるコードは、改行コードをLFで出力されます。Windowsでは、改行コードをCR+LFにしたいので「js_beautify()」の整形後に、改行コードをCR-LFに変換しています。

●style-html()のオプション
2012-10-04時点
オプション 既定値 説明
indent_size 4 indentation size
indent_char space character to indent with
preserve_newlines true whether existing line breaks should be preserved
max_char 70 maximum amount of characters per line
brace_style "collapse" "collapse" | "expand" | "end-expand" put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line
unformatted inline tags list of tags, that shouldn't be reformatted
indent_scripts normal "keep"|"separate"|"normal"

EmEditorマクロでJavaScriptのコードを整形する

EmEditorでJavaScriptの整形用のマクロを作成してみました。
JavaScriptの整形はjsbeautifier.orgの整形が良さそうだったので、jsbeautifierのコードを利用してマクロを作成しました。

■目的
JavaScriptのコードをEmEditor上で整形する。
整形には、jsbeautifierの整形コード(beautify.js)を使用する。

■環境
OS Windows XP
EmEditor EmEditor Professional (32-bit) Version 11.0.5

■JavaScritp整形コード(beautify.js)のダウンロード
jsbeautifier.orgが使用しているJavaScriptを整形するJavaScriptのコード「beautify.js」をhttps://github.com/einars/js-beautifyからダウンロードします(*1)。
*1:この説明では、2012-10-04時点での「beautify.js」を使用しています。

■EmEditor用JavaScritp整形マクロファイルの作成
EmEditor用のマクロファイル(beautity-js.jsee)を作成します。

【マクロファイル(beautity-js.jsee)のコード】
#include "include/beautify.js";
/*
 beautify for EmEditor
 JavaScript
 Created by Shinichi Yamaura.
*/
document.selection.SelectAll();
// beautifyのオプション設定
var options = {
 'indent_size': 1,
 'indent_char': '\t',
 'preserve_newlines': false,
 'break_chained_methods': false,
 'jslint_happy': true,
 'brace_style': "collapse",
 'space_before_conditional': true,
 'unescape_strings': false
}
code = document.selection.Text;
// 整形前に改行コードをLFに変換(beautifyのコードを実行用)
code = code.replace(/\r\n/g, '\n');
// beautifyの実行
var code = js_beautify(code, options);
// 整形後に改行コードをCR+LFに変換
code = code.replace(/\n/g, '\r\n');
document.selection.DestructiveInsert(code);
document.selection.StartOfDocument(false);

■整形マクロの説明
「beautify.js」をインクルードして、マクロから「beautify.js」を利用しています。
【注意】#includeは、スクリプトのメイン コードの上の最初の行に指定する必要があります。

編集しているコードを「beautify.js」の関数「js_beautify()」を使用して整形し、整形前のコードを上書きして整形後のコードを挿入します。

「js_beautify()」では、二番目の引数に整形のオプションを指定します。マクロの中で、beautifyのオプション指定をしているので、好みに合わせて設定してください。
beautifyのオプションは「beautify.js」のコメントに記載されています。補足説明にコメントに記載されているオプションの説明を整理しました。

マクロ内で、改行コードの置換をしています。これは補足説明を参照してください。

■ファイルの配置
「JavaScritp整形コード(beautify.js)」と「マクロファイル(beautify-js.jsee)」をEmEditorマクロフォルダに配置します。
「JavaScritp整形コード」は、EmEditorマクロフォルダ内にサブフォルダ(include)を作成して配置します。

My Macros
│  beautify-js.jsee
│
└─include
        beautify.js

■実行方法
EmEditorのマクロで、マクロファイル(beautify-js.jsee)を実行してください。

■補足説明

●改行コード
マクロを作成している時に、改行コードで問題が発生したので、問題とその対応についての説明を記載しておきます。
EmEditorは、改行コードの混在ができるため「js_beautify()」での整形前に、編集しているテキストのコードの改行コードをLFに変換してから整形しています。
「js_beautify()」で出力されるコードは、改行コードをLFで出力されます。Windowsでは、改行コードをCR+LFにしたいので「js_beautify()」の整形後に改行コードをCR-LFに変換しています。

●js_beautify()のオプション
2012-10-04時点
オプション 既定値 説明
indent_size 4 indentation size
indent_char space character to indent with
preserve_newlines true whether existing line breaks should be preserved
max_preserve_newlines unlimited maximum number of line breaks to be preserved in one chunk
jslint_happy false if true, then jslint-stricter mode is enforced
brace_style "collapse" "collapse" | "expand" | "end-expand" | "expand-strict" put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line.
space_before_conditional true should the space before conditional statement be added, "if(true)" vs "if (true)"
unescape_strings false should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
opt_break_chained_methods false 2012-10-04時点でコメントに記載がないがコード内では実装されている。メソッドチェーンに関するオプション。