Web制作

[Atom]コードの行を半自動的にそろえて綺麗にする2つの方法

どうも、学生エンジニアのなか(@nakafreelog)です!

今回はAtom利用者なんだけど手動でコードの行をそろえるのが大変で困ってる・・・そんな人に向けてAtomで半自動的に行をそろえてコードを綺麗にする方法をAtom内の機能を使ってそろえる方法atom-beautifyというプラグインを使ってそろえる方法の2種類に分けて解説したいと思います!

 

迷えるエンジニア
迷えるエンジニア
今ちょうどコード書いてる途中でぐちゃぐちゃになって困ってたんだよね~、でも半自動的にそろえるって難しかったりしないの?
なか
なか
大丈夫!半自動って聞くと難しく感じるかもしれないけどこれから紹介する方法はどっちも簡単に出来るよ!

ぼくも以前まで手動でコードを整えていたのですが、これらの方法を使ってからは一瞬でコードを整えられるようになりました

それでは紹介していきたいと思います!

Atom内の機能を使って揃える方法

まず最初にAtom内の機能を使って半自動的に行をそろえる方法を紹介します
↓今回は説明のためにわざと汚いコードを作ってみました

 

迷えるエンジニア
迷えるエンジニア
これを手動でそろえなきゃいけなくなったら凄く大変そう・・・
なか
なか
そうだよね、でも一見大変そうだけど実はすごく簡単にそろえられるんだ

行をそろえたいところを選択する

やり方はすごく簡単で、まずは上の画像のように行をそろえたい場所の選択を行います

自動インデントを行う

そして画像のように編集>行>自動インデントを選択します

 

すると、、、

なんとこんなふうに一瞬でコードの行をそろえることが出来ます!!!

 

この方法ならめちゃくちゃ簡単に出来るのでおすすめです!

迷えるエンジニア
迷えるエンジニア
なるほど、これなら簡単だね!
なか
なか
そうだね、ちなみにぼくもいつもはこの方法を使ってるんだ

 

atom-beautifyを使って揃える方法

2つ目はAtomのatom-beautifyというプラグインを使って行揃えを行う方法を解説したいと思います

そもそもプラグインってなに?って人のために↓

プラグインとは?

機能拡張のためにソフトウェアに導入するプログラムのこと

迷えるエンジニア
迷えるエンジニア
えっ・・・プラグインってちょっと難しそう
なか
なか
そんなに難しく考えなくて良くて、ここではAtomに導入するお役立ちツールぐらいに思っておけば大丈夫だよ

atom-beautifyのインストール

まず最初にプラグインのインストールを行っていきたいと思います

Atomのファイル>環境設定を選択します

ここでSetting画面が開かれると思うのでInstallの検索部分からatom-beautifyと検索すると出てくるatom-beautifyというパッケージのInstallをクリックします

インストールが終わったら自動でatom-beautifyが有効化されていると思います

もしもされていなかったらPackagesを押してatom-beautifyEnableを押せば有効化されると思います

atom-beautifyの使い方

整えたいソースコードを開いて右クリック>Beautify editor contentsを選択します

するとこんな風にソースコードが整えられます!

しかし、なぜかこの方法だと<html><head>末尾の</body></html>が離れてしまうので、ぼく個人としては一つ目の方法がおすすめです!

 

まとめ

ソースコードを整えたいなら編集>行>自動インデントを行うかatom-beautifyというプラグインをインストールしてBeatify editor contentsを行う!

というわけで、ぜひお試しあれ。

RELATED POST