開発環境の作り方 – まとめページ

これまでに書いた開発環境の作り方についての記事をまとめています。

XAMPP

 

Node.js

 

React + webpack + ESLint

 

コーディング規約

 

エディター

Atomおすすめパッケージ(5段階評価)

GitHubが開発したオープンソースのテキストエディター Atom(アトム)無料でこれだけの機能が使えるのは本当にすごい!世界中の有志が集まり、プラグインとして様々な機能を提供してくれています。

この記事では、Atomのおすすめパッケージを5段階評価で紹介しています。いいパッケージが見つかったら、ぜひ利用してみてください。

atom-beautify


Before

After

評価: ★★★★☆

コードを綺麗に整形してくれるパッケージです。右クリックで現れるメニューからBeautify editor contentsを選ぶと整形されます。統一感のある綺麗なコードで保存されるのは非常に気持ちがいいです。

パッケージをインストールしただけですぐに整形できる言語(html, css, jsなど)もあるのですが、他にも別途インストールしなければ整形できない言語もあります。この作業が結構面倒なので、もう少し簡単に導入できるシステムになってくれればいいのですが。

autocomplete-paths


評価: ★★☆☆☆

パスを自動補完してくれるパッケージです。/(スラッシュ)を入力すると、プロジェクト内のディレクトリやファイルを表示してくれます。使用頻度はあまり高くないですが、入れているとたまに役立ちます。

color-picker


評価: ★★★★★

右クリックで表示されるメニューからカラーピッカーを選ぶと、画像のような画面が現れ、色を視覚的に選択することができるようになります。RGB、HEXなど様々な方式で出力できるので非常に便利です。

editorconfig


評価: ★★★★☆

プロジェクトの文字コードや改行コード、インデントをどうするかについて設定することができるようになります。

複数人が関わる開発で記述ルールを統一することができたり、拡張子のよくわからないファイルが出てきた場合でも(例えば .editorconfig )自分で設定したインデントで編集することができます。

EditorConfigについて解説した記事がありますので、詳しく知りたい方はこちらを確認してください。

EditorConfigを使おう

file-icons


評価: ★★★☆☆

さまざまな拡張子に対応したアイコンが表示され、Atomのビジュアルが華やかになります。見た目に関わるものなので、絶対に必要な機能というわけではないのですが、一度入れると外せなくなります。

goto-definition


評価: ★★☆☆☆

定義元の関数を検索して開きます。例えば test() という関数を定義したとします。その test() という関数を使用しているファイルから、定義元のファイルを簡単に開くことができます。あの関数の戻り値ってどういう設定にしてたっけ?といったケースで手軽にチェックすることができるようになります。

ただし、このパッケージはうまく検索できなかったり、検索速度が遅かったりするので、使っていて残念に感じることも多いです。

highlight-line


評価: ★★★★★

現在、選択している行をハイライトします。一度使い出すと、これはあって当たり前のような機能になっています。

highlight-selected


評価: ★★★★★

ダブルクリックしたワードと同じものをハイライトします。例えば変数を違う名前に変えたいときに検索・置換ボックスを使う方法もありますが、数が少ないときはこれでハイライトさせて、簡単に置き換えるといったことができます。

japanese-menu


評価: ★★★★★

メニューバーとコンテキストメニュー、設定画面が日本語化されます。プログラム関係は英語に触れる機会がどうしても多くなりますが、基本的な部分はやはり日本語化されている方が楽です。設定画面で英語に悩むのは辛いですよね。

linter


評価: ★★★★★

間違ったコードの書き方をしている場合に警告してくれます。独自の書き方をすると後々後悔することが多いので、できるだけ基本的な作法に従って書いていきましょう。

linter はこれだけで動作しませんので、言語ごとに用意されているパッケージを追加でインストールしてください。例)linter-htmlhint(HTML用)

minimap


評価: ★★★★☆

ソースのプレビューを表示することができます。細かい文字まで把握することはできませんが、今いる大まかな位置を把握することができます。ミニマップ上でドラッグすると移動することもできます。

他のミニマップパッケージと一緒に使うとより便利です。

Atomエディタのminimapをもっと便利に使うパッケージのまとめ

pigments


評価: ★★★★★

コード上で色を確認できるようになるパッケージです。rgb(255, 0, 0)と書かれていても普通はどんな色かわからないですが、その場で確認できるようになるのでとても便利です。

project-manager


評価: ★★★★★

プロジェクトを管理するパッケージです。登録したプロジェクトを切り替えることができるようになります。開いているファイルを記憶してくれるので、前回の開発の続きをそのまま始めることができます。

symbols-tree-view


評価: ★★★☆☆

変数や関数を一覧にして表示してくれます。一覧上で表示されている関数をクリックすると、コード上でその関数が記述されている場所へ移動できます。

便利ですが、必要のない要素が一覧に大量に表示されてしまうため、それを除外する設定に手間がかかります。例えば関数だけを表示しようと思うと、不要な変数などを大量に除外設定しなければならないので大変です。