AtomでのJSX内コメントアウト方法

#まずはじめに
ども〜
普段エディターは何使ってますか？？
私はいろいろ手を出してるのですが、主に使っているのがAtomです。
ある日、普段通りAtomでReactを書いているときにJSXコード内のHTMLタグをコメントアウトしようと思いmacのcommand + /を押してみると

App.js

return(
  <div className="App">
    //<p>コメントアウトされたい</p>
  </div>
)

となり、JSXのコメントアウト記法である{/* */}で文字を囲めないのである。
VScoder「VScodeではパッケージインストールすれはできるけど？」
周りを見れば結構な割合でVScodeを使っているし(私の周りだけかな？)、実際使いやすい。
しかし私のエディターの使い初めがAtomで、どうも慣れから抜け出せない。
私「Atomがいい...Atomがいい（; ;）」

ということでタイトルの通りAtomでのJSXコメントアウト方法について備忘録ながら書く。
急いでいるときは2からみてね

1 Atomのパッケージをインストール(失敗)

まずやったことがlangage-babelのインストールである。
Link : langage-babel
以下はlangage-babelパッケージに書いてある説明。

###Commenting out JSX elements
JSX elements cannot be commented out by using standard // or /* / commenting. Normally {/ */} is used instead. language-babel changes the Atom toggle comments behaviour when inside a JSX block to support this behaviour. Nested elements within JSX that require a // form of commenting will be detected automatically.

JSXの要素は//か/* */でコメントアウトできないよね。
でもこのパッケージ入れればJSX内のコメントアウト！と検知してJSXにあったコメントアウト{/* */}を使えるよ〜とのこと。

うん。解決。なんで今まで探すのめんどくさがってて入れなかったんだろ。手打ちでめんどくさい思いともさよなら。

Atomにて
Preference -> install -> Search packagesで langage-babelと入力。
そしてインストールしてAtomを再起動。
JSXを記述しているファイルに行き、command + /
すると...

App.js

return(
  <div className="App">
    //<p>コメントアウトされたい</p>
  </div> 
)

... ^_^;
その後もこのパッケージについて少しみてみたがコメントアウトがショートカットでできそうにない。
しょうがないからVScodeにするか手打ちでやるか〜と思い(10回目)やっていたReactの勉強に戻る。
しかし、またすぐにコメントアウトする場面に出会い手打ちでやろうと思ったがこの手打ちめんどくさいな、と思うのが後何回続くのかと嫌になりもう一回だけ調べてみようと決心。次できなければGood Bye Atom また会う日まで。

そしてJSX commentoutで検索。情報の海へ。
すると以下にたどり着く。

2 keymap と initscriptに書き込む(成功)

Link : Comment out JSX code on Atom
にたどり着いた。
諦め癖のついているプログラマーには到底向いてない私はあまり期待せずに読んでみる。

# If you worked with React and JSX you probably noticed that you can't use JS comments when inside JSX sections
# Add this to your Atom init script
# Then add 'ctrl-cmd-/': 'comment-jsx' to your keymap.cson
# Then when you are on a JS/JSX file, just press cmd+ctrl+/ to use JSX-style comments that work with JSX elements
# Is not the most efficient way, but it's the cleanest and reliable one

なになに、React及びJSXでコメントアウトが正常にできないのに気づいたあなたはこれをいれればいいよ。とのこと。
ほう。期待してないけど手順の通りやってみよう。

####1. まずAtomのInit Scriptを開いて以下を記入

init.coffee

atom.commands.add 'atom-workspace', 'comment-jsx', ->
  atom.config.set('editor.commentStart', '{/*', {scopeSelector: '.source.js.jsx'})
  atom.config.set('editor.commentEnd', '*/}', {scopeSelector: '.source.js.jsx'})
  for selection in atom.workspace.getActiveTextEditor().selections
    selection.toggleLineComments()
  atom.config.unset('editor.commentStart', {scopeSelector: '.source.js.jsx'})
  atom.config.unset('editor.commentEnd', {scopeSelector: '.source.js.jsx'})

####2. 次はKeymapを開いて以下を記入

keymap.cson

'atom-workspace':
  'ctrl-cmd-/': 'comment-jsx'

####3. 再起動
コメントアウトしたいファイルを開いてcommand + control + /を押す。

App.js

return(
  <div className="App">
    {/*<p>コメントアウトされたい</p>*/}
  </div>
)

...（ ; ; ）できた！！
やっとショートカットでコメントアウトできた。
諦めずに(?)探してよかったです。


ちなみに...Comment out JSX code on Atom のプログラマーさんたちのコメントで langage-babel は私も機能してないと2件ほどコメントされてたのでなんか間違ってるんでしょう( langage-babelの更新も2年前に止まってますし、bugsのコメントをみてみたらAtomのアップデートでの関係で使えなくなってるそうです。)

ちなみに、AtomにReact関係で入れているパッケージは

• react : JSX内でHTMLの補完をしてくれるもの(これも2018年からアップデート止まってる)

• platformio-ide-terminal : Atomでターミナル開けるやつ。Atomの左下にターミナル開くボタンがついてる。ターミナル開くのはVScodeに最初っからあるやつだけど..うんまあAtomがスキダカラ..

• あとは特に入れた覚えないです。入れた方がいいものあれば教えてください。

##3 終わりに
ようやくAtomでのReactのJSX内でコメントアウトできたのでよかったですv(^ ^)
日本語の記事探していても見つからず、やるのめんどくさいし辞めよかな〜と思っていましたが無事にAtomライフを続けられそうです。
日本語の記事が見つからないと同時にPC変えた時などの設定でわかりやすいようにここにまとめておきます。

最後に一言 : これをみてAtomを使ってる将来の自分へ、めんどくさがらずにすぐ調べ英語の記事を積極的に読もう！

それじゃ、ばいばい〜