メモ:Atomの設定&ショートカット【1年使った】

Atomエディタの設定とショートカットの記事。

自分1年以上Atomを使っているのだけど、今の設定が一番しっくりきているので、紹介。

記事の内容はざっと下記のとおり。

  • Atomの設定編
  • Atomのパッケージ編
  • Atomのショートカット編

他の記事では、「それほぼ使わないだろ」という機能まで紹介されていて、初心者に優しいとは言えないので、本記事では最小限にまとめておいた。

Atomの設定編

はじめに、Atomはデフォルトで英語になっているが、わざわざ日本語に設定する必要はないと思う。

理由は、単純で「英語に慣れるため」。プログラミングは参考文献とか英語で書かれていること多くて、イヤでも英語と付き合わなきゃいけないため、免疫力をつけるという意味でもデフォルトの英語のままでOK。

では、Atomの設定に入る。

  • 1.フォント変える
  • 2.字下げをわかりやすくする
  • 3.改行されるようにする

まず、Atom上の「Fileタブ」もしくは「cmd+ 、」で設定画面を開く。(WindowsだとcmdではなくCtrlキー)

1.フォント変える

設定画面にあるEditorタブをクリック。

下記の画像のようにFont Familyを「Ricty Diminished」に変更。

Atomの設定

「 Ricty Diminished 」にすることで、例えば「0」と大文字の「O」の区別がしやすくなる。

2.字下げをわかりやすくする

そのまま下にスクロールすると、「Show Invisibles」という項目があるので、画像のようにチェックを押す。

Atomの設定

字下げが可視化できれば、記述ミスも減らせるはず。

3.改行されるようにする

同じく画像のように「Soft Wrap」にチェック。

Atomの設定

これで端までいっても自動的に改行してくれるので、Atomが超使いやすくなる。

※おまけ

必須というわけではないが、お好みでテーマの変更もできる。

画像のように「Themes」→「UI Theme」をいじってみるといい。

Atomの設定

ボクは「One Dark」で背景色が黒メインの落ち着いた感じにしている。

Atomのパッケージ編

次はAtomのパッケージのお話。

  • emmet
  • linter
  • linter-csslint
  • tag
  • wordpress-api

正直、これをやったら正解とかはないので、とりあえず上記5つを入れて、Atomに慣れてきたらほかのパッケージを使ってみるといい。

  • emmet→コードを直感的に書きやすくしたもの
  • emmetについてはこちらの記事をみれば十分使いこなせる。

  • linter→エラーチェックをするパッケージ(
    linter-csslint 、 linter-phpなど)のベース。
  • linter-csslint→cssのエラーを教えてくれる。linterがないと使えない。
  • linter系はいろんな言語のものがありますが、個人的にcssのエラーが見つけずらいと思ったので優先的に入れている。

  • tag→コードを補完してくれる
  • wordpress-api→WordPress関数を補完してくれる。WordPress使うのなら必須と言える。

Atomのショートカット編

ショートカットキーもいっぱいありすぎて、若干イラっとくる。

だから、よくあるショートカットをまとめた。上から順によく使うものから並べてある。

操作キー
上書き保存 cmd-S
行の複製
cmd-shift-D
特定のキーワードの検索
cmd-F
新しいタブを開く cmd-N
設定画面を開く cmd-,

以上でAtomの設定&ショートカットの解説は終わり。

ボク自身、これらの設定でスムーズに開発できているし、色んな機能を使えるほうが偉いというわけでもないので、設定・ショートカットはチャチャっと済ませて覚えてしまって、開発に時間を費やすのが合理的な選択だと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です