Bracketsでhtml・css・JavaScriptをコードフォーマットして読みやすく自動整形する方法

スポンサーリンク
スポンサーリンク

BracketsのBeautify拡張機能を利用すると、htmlやcssやJavaScriptのコードをインデントしたり改行したりして読みやすく自動で整形 ―つまりコードフォーマット― してくれます


自動整形のタイミングを「手動」or「ファイル保存時に自動実行」と指定することができます。さらに自動整形の範囲も「ファイルの一部分」が「ファイルの全体」かを指定することができます。

ということで今日はBracketsコードフォーマットして読みやすく自動整形してくれるBeautify拡張機能の特徴・インストール方法・使い方について説明しますね。ちなみにBeautifyは英語で「美しくする」という意味です(^_-)-☆。

Beautify拡張機能の特徴

Beautify拡張機能は、html・css・JavaScriptなどでインデントや改行がグチャグチャになってしまったコードを、自動でコードフォーマットして読みやすく整形してくれるのがの特徴です。

htmlの場合




cssの場合



『今回は、インデントを揃えながら、きれいに読みやすいプログラムコードを書いていこう!』とはじたのに、気がつくといつの間にかhtmlやcssやJavaScriptのコードがグチャグチャ……『あー、もう修正するのはムリ(≧◇≦)』なんて時に使える便利な機能です。

Beautify拡張機能のインストール方法

それではBeautify拡張機能プログラムのインストール方法の説明をしますね。

まずは画面右側にあるツールバーをクリックして拡張機能マネージャーを表示します。


[入手可能]タグが選択されていることを確認し、検索ボックスに「Beautify」 と入力してください。

Beautify が表示されたら(一番上とは限らないので注意してください)、[インストール]ボタンをクリックしてください。

[拡張機能をインストール]メッセージ画面が表示されます。「インストールは成功しました。」とメッセージが表示されたら、[閉じる]ボタンをクリックしてください。

さらに[閉じる]ボタンをクリックしてください。

これでBeautify拡張機能が使えるようになりました。念のためBracketsのメニューバー[編集]をクリックして確認してみましょう。[Beautify]と[保存時にBeautifyする]との2項目が追加されていますね。

Beautify拡張機能の使い方

Beautify拡張機能でコードを自動整形する時の「タイミング」と「範囲」とを指定する時の使い方をご紹介します。

コード自動整形するタイミング

コードを自動整形するタイミングには、「手動で実行する」と「ファイル保存時に自動実行する」との2つのパターンがあります。

手動で実行する場合

手動で実行する場合は、あなたが『コード自動整形したいな』とおもったタイミングで、メニューバーの[編集]→[Beautify]を選択して下さい。ショートカットキーCtrl+Shift+lでも可能です。

メニューバーの[編集]→[Beautify]




ショートカットキーCtrl+Shift+l




ファイル保存時に自動実行する場合

ファイル保存時に自動実行する場合の流れは、

  1. 保存する前にメニューバーの[編集]→[保存時にBeautifyする]を選択しておく(一度選択しておけば、選択解除するまで有効)。
  2. 編集作業をする。
  3. ファイル保存操作(メニューバー[ファイル]→[保存] や ショートカットキーCtrl+S をする。

になります。これでコード自動整形してくれます。







コード自動整形する範囲

コードを自動整形する範囲は、「ファイルの一部分」が「ファイルの全体」かを指定することができます。

ファイルの一部分の場合

コードを自動整形する範囲がファイルの一部分の場合は、マウスなどであらかじめ自動整形する範囲を指定しておくと、指定した部分のみコード整形することができます。






ファイルの全体の場合

コードを自動整形する範囲がファイルの全体の場合は、どこも選択していない状態にして、Beautify拡張機能を実行するとファイル全体をコード整形します。




まとめ

今日は、html・css・JavaScriptなどでインデントや改行がグチャグチャになってしまったコードを、自動でコードフォーマットして読みやすく整形するBeautify拡張機能について説明しました。

読みやすく整形しておくと、コーディングミスをしている時、間違っている個所を早く発見し、修正することができます。ホームページの作成効率もあがりますので、ぜひインストールしておいてくださいね。

コメント

タイトルとURLをコピーしました