質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • JavaScript

    15304questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Atom (テキストエディタ)

    481questions

  • Sass

    236questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Visual Studio Code

    220questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 300

simesava

score 54

非常に初歩的な事かもしれないのですが、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 追記)

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

/**
 * 
 * 
 * 
 */


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • fiwa

    2018/05/11 20:08

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

    キャンセル

  • simesava

    2018/05/12 11:42

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

    キャンセル

  • fiwa

    2018/05/12 17:27

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

    キャンセル

回答 3

checkベストアンサー

+2

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/12 18:11

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

    キャンセル

+2

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

/**
 * 
 */

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 13:03

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

    キャンセル

  • 2018/05/11 13:15

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

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

    キャンセル

  • 2018/05/11 13:25

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

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

    キャンセル

  • 2018/05/11 13:33

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

    キャンセル

  • 2018/05/11 13:43

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

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

    キャンセル

  • 2018/05/11 14:50

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

    キャンセル

  • 2018/05/11 14:57 編集

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

    キャンセル

  • 2018/05/11 15:13

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

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

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

    キャンセル

+1

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 15:18

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15304questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Atom (テキストエディタ)

    481questions

  • Sass

    236questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • Visual Studio Code

    220questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。