【Atom】atom-beautifyの設定方法

前回の記事では、文法チェックをしてくれる「linter」の設定方法を紹介しました。

今回は、コード整形をしてくれる「atom-beautify」の設定方法を説明していきたいと思います。

これまでの記事をご覧になっていない方はこちらからぜひご覧くだいさい→カテゴリ「atom」

※この記事ではWeb開発用のatom環境作成を目的としているため、html、javascript、css、PHPのみを扱います。

2018年7月31日追記 : PHP及びphp-cs-fixerへのパス設定を更新しました。

atom-beautifyはコード画面を右クリックし、「Beautify editor contents」をクリックすることで使用できます。

キャプチャ

「html」「javascript」「css」はatom-beautifyをインストールするだけで使用できますが、「PHP」に関しては設定が必要です。

まずはコーディング規約自動調整ソフトPHP CS Fixerをダウンロードします。

こちらのサイトのInstallationにあるLocallyの「Download the php-cs-fixer.phar file」をクリックしましょう。→https://github.com/FriendsOfPHP/PHP-CS-Fixer

phpcs2

ダウンロードした「php-cs-fixer.phar」を任意の場所にコピーします。(今回は「C:\xampp\php\php-cs-fixer.phar」にコピーしました)

次にPHPへのパスを通します。PHPがパソコンにインストールされていない方は前回の記事を参考にXAMPPをインストールしてください。→【Atom】linterの設定方法

「コントロールパネル」→「システムとセキュリティ」→「システム」→左のサイドバーの「システムの詳細設定」をクリックします。

xamllint4

右下の環境変数をクリック

xmllint5

システム環境変数のPathを選択し、編集をクリック

phpcs3

新規をクリックして「php」フォルダへのパス(C:\xampp\php)を追加しましょう。(※Windows10でない場合は、一行で表示されますのでセミコロン(;)で区切って入力します。)

コマンドプロンプトを起動し「php -v」コマンドを実行してみましょう。

以下のようにPHPのバージョンが表示されれば正しく設定されています。

phpcs4

PHPへのパスが通せたら、atomを起動して環境設定を開きます

phpcs5

atom-beautifyの設定をクリックします

少し下にスクロールしてExecutablesをクリック (2018年7月31日更新)

・Executables内の「PHP」の「Binary/Script Path」にPHPへのパスを入力します。
(今回は「C:\xampp\php\php.exe」)(2018年7月31日更新)

・Executables内の「PHP-CS-Fixer」の「Binary/Script Path」に先ほどコピーした「php-cs-fixer-v2.phar」へのパスを入力します。
(今回は「C:\xampp\php\php-cs-fixer-v2.phar」)(2018年7月31日更新)

これで設定は完了です。適当なPHPファイルを開き、コード画面を右クリックして、「Beautify editor contents」をクリックしてみましょう。

正しく設定されていればコードが自動整形されるはずです。

いかがでしたか?Atomシリーズはこの記事で最後となる予定です。本当は多くても2記事にする予定でしたが結構長くなってしまいました(;´д`)

何かありましたらコメント欄に書き込んでください!お疲れ様でした(´∀`∩)

atom

Posted by takumi9942