HTML Programming

Visual Studio Codeを使いこなそう!!効率よく書けるショートカットキーを紹介(Mac & Windows)

  1. HOME >
  2. HTML >

Visual Studio Codeを使いこなそう!!効率よく書けるショートカットキーを紹介(Mac & Windows)

やっはろー
みんなは、コードを書くとき何のエディターを使っていますかー?
僕は、Visual Studio Code(VSコード)を使用してます!
使っていけば早く描ける様になりますが、より便利にエディターを活用する為に今回は、良く使用するショートカットキーを紹介していくよ。

MUKIRYOKU
ITAMAE

MacとWindows両方とも紹介してくださいね!VSコードのインストールをしていない人は、こちらからインストールして使ってみてね!インストールや使用は無料だから安心して!

Contents

おすすめエディタ!Visual Studio Code の基本設定 : Mac版

続きを見る

ショートカットキー一覧(Mac版)

まずは、Mac版のコードを書く時によく使う、使えるショートカットキーの紹介です。身につける事でコードが効率的に早く書く事ができます。文字で説明するより表で見た方が分かりやすく、確認が早いと思うので、下記で一覧にて記載します。

基本操作のショートカットキー

キー動作
command + N新規ファイルを開く
command + Sファイルの保存
command + (+)表示画面のズームイン
command + (-)表示画面のズームアウト
command + F検索
command + shift + Pコマンドパレットを開く

テキスト編集と選択のショートカットキー

キー動作
command + X行の切り取り
command + C行のコピー
command + Vペースト(貼り付け)
shift + command + Kカーソルを合わせている行の削除
command + Z一つ前に戻る
option + ↑カーソルを合わせている行を上に移動
option + ↓カーソルを合わせている行を下に移動
option + shift + ↑カーソルを合わせている行を上に複製
option + shift + ↓カーソルを合わせている行を下に複製
command + D選択している文字と
次にくる同じ文字が選択される
※複数回押す事が可能。選択文字を変えると選択した箇所全て変わる
command + shift + L選択している文字と同じ文字が全て選択される
※複数回押す事が可能。選択文字を変えると選択した箇所全て変わる
command + /選択位置のコメントアウト
command + A全選択
shift + カーソル(↑・↓・←・→)カーソル移動時に選択
shift + Home行の最後までを選択
shift + End行の最初までを選択
command + shift + ↑カーソル位置より上を全選択
command + shift + ↓カーソル位置より下を全選択
shift + option + Fコードをきれいに整える

ショートカットキー一覧(Windows版)

次はWindows版です。Mac版と同じ様に記載していきますので、手早く確認していきましょう。

基本操作のショートカットキー

キー動作
Ctrl + N新規ファイルを開く
Ctrl + Sファイルの保存
Ctrl + (+)表示画面のズームイン
Ctrl+ (-)表示画面のズームアウト
Ctrl + F検索
F11フルスクリーン表示
Ctrl + shift + pコマンドパレットを開く

テキスト編集と選択のショートカットキー

キー動作
Ctrl + X行の切り取り
Ctrl + C行のコピー
Ctrl + Vペースト(貼り付け)
shift + Ctrl + Kカーソルを合わせている行の削除
Ctrl + Z一つ前に戻る
Alt + ↑カーソルを合わせている行を上に移動
Alt + ↓カーソルを合わせている行を下に移動
Alt + shift + ↑カーソルを合わせている行を上に複製
oAlt + shift + ↓カーソルを合わせている行を下に複製
Ctrl + /選択位置のコメントアウト
Ctrl + A全選択
shift + カーソル(↑・↓・←・→)カーソル移動時に選択
shift + Home行の最後までを選択
shift + End行の最初までを選択
Ctrl + shift + ↑カーソル位置より上を全選択
Ctrl + shift + ↓カーソル位置より下を全選択
shift + Alt + Fコードをきれいに整える

ショートカットキーのカスタマイズ方法

最後にショートカットキーを自分好みにカスタムする方法も記載しておきます。既存のショートカットではなく自分にあったショートカットキーを設定する事でより早く、より使いやすくなると思います。

  • 手順.1 command + shift + P でコマンドパレットを開く
  • 手順.2 Key と入力する
  • 手順.3 Preferences: Open Keyboard Shortcuts を選択する
    ※この時Preferences: Open Keyboard Shortcuts(JSON)も出てくるがこちらは選びません。
  • 手順.4 変更したいショートカットキーまたは追加したいショートカットを検索
  • 手順.5 検索結果が出てきたら、検索結果左側の鉛筆マークをクリック
  • 手順.6 ショートカットキーに設定したいキーを入力してEnterキーを押すと完了

簡単な箇条書きになりましたが、何も難しいことはありません!上記手順にて進めればショートカットキーを変更する事が可能です。

まとめ

今回は、VSコードのショートカットキーを紹介したのですが、エディタには他にもたくさんの便利な機能がたくさんあります。全てをしっかり使いこなすのはとても難しいです。まずは、ショートカットを身につけてコードを早く、丁寧に描ける様にして、そこから色々な機能を試していくのが最善の道かと思います。

スポンサーリンク
  • この記事を書いた人
  • 最新記事

MUKIRYOKU

インテリアや空間デザインの仕事をしているサラリーマンである。 日々、世界を救おうと思っている。 PC SKIL.... Illustrator / Photoshop / Shade3D / VectorWorks / HTML / CSS / Javascript / etc...

-HTML, Programming
-, , , ,

© 2024 Sicacu.to.Maru Powered by AFFINGER5