atom-beauty001

最近、エディタをSublime TextからAtomに変えました。もともと、エディタにはそんなにこだわりはなく、変えた理由もAtomがいいという声を聞くようになったからという単純なものです。

AtomもSublime Textと同じように”パッケージ”をインストールすることで様々な機能を追加することができます。これで自分が使いやすいエディタに進化させていくわけですね。

今回はソースコードを自動で綺麗に整形してくれる”atom-beautify“というパッケージを試してみました。

スポンサードリンク

対応言語はHTML、CSS、Java、Rubyなど

atom-beautifyのWebサイトから引用しますが、以下に示したように多くのプログラミング言語に対応しています。一部の言語においては別のツールをあらかじめインストールしておかなければいけない場合があるそうです。

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, and SQL in Atom

atom-beautify

ソースコードを整形してみよう

atom-beauty002

まずはパッケージのインストールを行います。上部のメニューバーからAtom > Preferences > Installと進み、テキストボックスにatom-beautifyと入力してパッケージの検索をします。atom-beautyが検索結果に出てきたら、右のInstallボタンを押して、しばらく待つとインストール完了です。

atom-beauty003

インデントを少しぐちゃぐちゃにしたCSSを用意しました。エディタ上で右クリックをして、”Beauty editor contents”を押すとCSSが整形されます。

atom-beauty004

ご覧のように綺麗に整形されました。整形時のフォーマットの設定は上部のメニューバーからAtom > Preferences > Packagesと進み、atom-beautifyのsettingsで行えます。

以上、ソースコードを綺麗に整形するatom-beautyの紹介でした。

AtomはGUIで細かい設定ができるので個人的にはSublime Textよりも好きです。しばらく使ってみて便利なパッケージを見つけたらまとめて紹介しようと思います。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。