（JS・SCSSにて）入力済みのテキストを「/**/」の形式によりコメントアウトするショートカットが知りたい

Question

非常に初歩的な事かもしれないのですが、JSやSCSS等をエディタで開いている状態で、キーボードショートカットにより下記のようなコメントアウトを行うことは可能でしょうか？

/**
 * comment text.comment text.
 * comment text.comment text.
 * comment text.comment text.
 * comment text.comment text.
 */

#実現したいこと

コメントアウトを行う対象の行が選択されている状態でショートカット⌘ + /の操作を行うと、下記のキャプチャのように// ~~によるコメントアウトがなされる事は存じております。

同様の操作にて、/****/の形式によるコメントアウトは可能なものなのか、及びその方法をご教示頂きたいです。
なお、ショートカット以外の方法でも入力済みのテキストを簡単に/****/の形式にてコメントアウトできるのであれば、代替手段でも構いません。

環境

OS (version)
Mac OS X Sierra（10.12.6）

エディタ

• Atom
• Visual Studio Code

---

---

補足（'18.05.11 15:03 追記）

現状は代替策として、下記を適当なショートカットで呼び出せるように設定しています。

/**
 * 
 * 
 * 
 */

ただし、入力後のテキストに対してコメントアウトを行う手段が知りたいです。
上記では入力後のテキストをコメント内にコピペで持っていく必要があるため工程が増えてしまいます。

Comments

[fiwa]

Atom だと block-comment-plus とかでできそうな気がする（未確認）

[Bonito_Bonito]

有難うございます、実際に試しました。入力済みテキストを `/*` と `*/` によりwrapするには良いですね。ただ今回、 `/**` の後と `*/` の前に改行を入れ、さらに各コメントの行に ` * ` のプレフィックスが追加される手段を希望しています。

[fiwa]

外していたようで失礼しました

Answer 1

Atomの場合はとりあえず block-comment-lines というパッケージをいれて、パッケージのコードを改変すると実現可能だということが分かりましたので回答しておきます。
上記パッケージを導入後、~/.atom/packages/block-comment-lines/lib/block-comment-lines.coffeeの164〜182行目を書き換えます。

setBracket: ->
    editor = @editor
    language = @getLanguage()
    switch language
        when 'js'
            commentStart = '/**'
            commentEnd = '*/'
        when 'html', 'gfm'
            commentStart = '<!--'
            commentEnd = '-->'
        when 'coffee'
            commentStart = '###'
            commentEnd = '###'
        when 'sh', 'shell'
            commentStart = ": <<'COMMENT'"
            commentEnd = 'COMMENT'
        else
            commentStart = '/**'
            commentEnd = '*/'

さらに201〜202行目も書き換えます。

selectionText = selection.getText().replace(/^/gm, '* ')
selection.insertText(commentStart + '\n' + selectionText + '\n' + commentEnd, {select: false, autoIndentNewline: false})

このパッケージを呼び出すときに使いたいキーバインディングを~/.atom/keymap.csonに記述します。

'atom-text-editor':
  'alt-cmd-b': 'block-comment-lines:toggle'

Atomを再起動すれば改変したパッケージが読み込まれてalt-cmd-bで選択範囲をブロックコメントにできるはずです。

※ただしパッケージのコードを改変しているので、パッケージのアップデート等を行ったときは変更内容は消えてしまいます。

この回答はこちらを参考にしています。
How to create a keyboard shortcut for custom comment style in Atom - Stack Overflow

Comments

[Bonito_Bonito]

有難うございます、希望通りの操作が出来ましたm(_ _)m
パッケージのアップデートには注意しておきます。

Answer 2

「/」→「」→「」→「tab」で、以下の形式になります。

/**
 * 
 */

Comments

[kszk311]

テンキーがあるとめちゃ楽です

[Bonito_Bonito]

回答ありがとうございます！
すみません、ちょっと手順がわからず…

「/***」と入力し、「tab」でしょうか？
Atomではうまくいかず…

[kszk311]

はい。
「/***」までは一つずつ入力する必要があり、
次に「tab」キーで、いけます。
ちなみに最新Atomで確認しました。

「/***」入力後2秒ぐらいあけると、「tab」キー入力してもコメントアウトにはならないので、素早くおこなってください。

[think49]

この方法は質問者が意図している「選択行をコメントアウト」ではなく、「新規でコメントを手間なく入力する方法」のように読めます。

[kszk311]

選択範囲をこの形式にする方法はあいにく分からないです。
できるのかどうかも…。

なので、まずは新規でこの形式のコメントアウトを作成した後、
/**
* （ここの行）
*/
を行数分だけコピペしておいてから、
1行ずつコピペするのがいいかと思って回答したのですが…。

[Bonito_Bonito]

ありがとうございます。
ただ、上記手順のとおりに行っても同様にはなりませんでした。
JS、SCSSファイルのいずれもです。
補足の通り、 '/***' まで一つずつ入力し、すばやく 'tab' を押下するよう気を付けました。
なにかの手順が抜けている、もしくは設定などが必要なのでしょうか。

[kszk311]

失礼しました、手順の「*」が一つ多かったです。（3回ではなく2回）
回答の方も修正しておきました、ご確認ください。

[Bonito_Bonito]

ありがとうございます、JSファイルで確認することができました。（SCSSはうまくいきませんでした）

ただ、補足に追記したとおり、入力後のテキストを「/**/」形式にてコメントアウト出来る他の回答をまだ頂けるかもしれないので、引き続き回答受付中の状態にさせて頂こうと思います、すみません。

とは言え、ご回答頂いた手順は今まで知らずにスニペットで対応していた為、勉強になりました。
ありがとうございますm(_ _)m

Answer 3

エディタ画面右下のファイルの種類（デフォルトはPlainText）をHTMLやCSSに変更することでコマンド+/のコメントが種類に合わせたものになりませんか？
ここがわかりやすいかな
Atomテキストエディタでhtml・cssファイルを「新規作成→文字コード設定→改行コード設定→ファイル種類設定→保存する」操作方法のまとめ

あ、失礼しましたJSやSCSSの時に/**/ですね…これだとだめそうです

Comments

[Bonito_Bonito]

回答ありがとうございますm(_ _)m
>JSやSCSSの時に/**/ですね…これだとだめそうです
のとおり、JSやSCSSファイルが既に存在している前提です。

ただ、右下のファイルの種類の選択でファイルの種類をエディタ上で一時的に変更することができる機能は今後何かしらに役立ちそうです、ありがとうございす！