文系Webエンジニアの技術メモとたまに旅のメモ

未経験文系エンジニアとして働いてます。アウトプットとして簡単に技術メモを残していきます。たまに旅関係のも趣味で残していこうと思ってます。

【VSCode】開発効率が上るショートカットキー・便利機能

普段Visual Studio Code(通称VSCode)を使用して開発を行なっていますが、あまり使いこなせてる感じがしなかったので、色々調べて見ました。

今まで使ってなかった便利機能がいくつかあったので紹介します。

コマンドは、Macベースで記述してます。

1.1行コピー (⌘ + C)

誰もが知っているコピーですが、VSCodeの場合選択していない状態でコピーを行うと1行コピーする事ができます。

毎回1行選択してコピーを行なっていたので無駄な事をしてました。

カーソルは、先頭、行中、末尾どこにあっても未選択状態であれば1行コピーできます。

f:id:igarashi44:20200621032939p:plain

2.1行下に改行を追加する (⌘ + Enter)

選択している行の1つ下に改行を入れたい時に使用します。

行の末尾や、1行カーソルを下げてからEnterを押さずとも1行追加する事が出来るので、無駄なカーソル移動を省略する事ができます。

3.行上に行を追加する (⌘ + Shift + Enter)

1行上に行を追加したい時に使用します。

2の内容に+でShift を追加するだけですね。

4.1活コメント化 (⌘ + /)

複数行のコードを一括でコメント化したい際に、使います。

コメント化したいコードを選択し、(⌘ + /)を押すと、言語に合ったコメント化をしてくれます。

f:id:igarashi44:20200621041013p:plain

f:id:igarashi44:20200621041022p:plain

f:id:igarashi44:20200621041031p:plain

5.CSS:カラーピッカーの表示 (色をホバーするのみ)

CSSファイルで色を指定する際に、指定した色をホバーするとカラーピッカーが表示されるので、選択すれば書き換えてくれます。

仮に「black」と入力しホバーをするとカラーピッカーが表示されます。

任意の色を選択すると、CSSが書き換わります。

f:id:igarashi44:20200621035135p:plain

6.CSSセレクタをホバーすると、html要素を表示する (セレクタをホバーする)

 

CSSセレクタを記述した際に、ホバーをするとそのセレクタのhtml要素を表示してくれます。

スペースの有無で適用されるセレクタが変わるのでセレクタが深い際に使用して見ましょう。

f:id:igarashi44:20200621040147p:plain

f:id:igarashi44:20200621040151p:plain

 

7.ターミナルをVSCode内で使用する(shift + control + @)

「shift + control + @」のショートカットキーを押すと、画面下部にターミナルが表示されます。

アプリのターミナルと同じ動きをVSCode内でもしてくれるので、Gitコマンドなども使用ができます。

アプリの切り替えがめんどくさい場合などに使えるショートカットキーだと思います。

Windowsでも使用可能

f:id:igarashi44:20200704224322p:plain

コメント化と、カラーピッカーは普段から使用していましたが、他の内容は使っていなかったので、忘れずに使っていきたいです。

特にコピーは毎回選択がめんどくさかった。。。

他にも便利はショートカットキーや、機能があるので自分に合ったのを探して見てください。

 

ブログランキングに参加してます!

もしよければクリックをよろしくお願いします。

 

にほんブログ村 IT技術ブログ Webエンジニアへ
にほんブログ村