Atomでコメントアウトをショートカットで爆速で行う&コメントの色の変更方法!

Atomでコメントアウトをショートカットで爆速で行う&コメントの色の変更方法!

Atomでコードをコメントアウトする方法でメニューバーから行う方法と、爆速でショートカットから行う方法をご紹介します。また一括コメントアウトする方法の解説と、コメントの文字色の設定を変更する方法もあわせてご紹介します。


目次[非表示]

  1. Atomでコメントアウトする方法
  2. Atomでコメントの色を変更する設定

Atomでコメントアウトする方法

今回はAtomでコメントアウトする方法をご紹介します。Atomでコメントアウトするには大きく分けてメニューバーから行う方法と、ショートカットでコメントアウトする方法があります。

メニューバーからコメントアウト

コメントしたい行にカーソルを合わせます。次に、メニューのEdit(編集)から「Toggle Comments(コメントの切り替え)」を選択
まずはコメントしたい行にカーソルを合わせます。次に、メニューのEdit(編集)から「Toggle Comments(コメントの切り替え)」を選択します。
選択した行がコメントアウト
すると選択した行がコメントアウトされます。

ショートカットからコメントアウト

ショートカットでのコメントアウト
ショートカットでコメントアウトした方が素早く行えます。行を選択し、
  • Macであれば 「Command + /
  • Windowsであれば「Ctrl + /
を押しましょう。

メニューバーの時と同様にコメントアウトが行われます。

一括コメントアウト

全ての行がコメントアウト
上記のコメントアウトの方法は選択した行に対して行われます。極論全ての行を選択して、ショートカットのコメントアウトの処理を行うと、全ての行がコメントアウトされます。

このように一括でコメントアウトしたい場合は
  • コメントアウトした行の選択
  • Mac: 「Command + / 」
  • Windows: 「Ctrl + /」を実行
しましょう。

Atomでコメントの色を変更する設定

Atomでのコメントアウトの方法を見てきましたが、コメントした色がグレーで見づらいという方もいるかと思いますので、コメントの文字色を変更する設定方法をご紹介します。

Atomのメニューから「Preferences...(設定)」を選択
Atomのメニューから「Preferences...(設定)」を選択します。
左メニューの「Themes(テーマ)」を選択し、右側の「your stylesheet」をクリック
左メニューの「Themes(テーマ)」を選択し、右側の「your stylesheet」をクリックします。
表示されたせて設定ファイルに以下の記述を追記
表示されたせて設定ファイルに以下の記述を追記します。
atom-text-editor::shadow .comment {
  color: green; // 変更したい色
}

変更したい色の箇所は任意の色に変更してもOKです!CSSで色の設定をするように、好きな色に変えましょう。(例では緑にしています)

コメントアウトした箇所が設定したカラーに変化
するとすぐにコメントアウトした箇所が設定したカラーに変化します。