Visual Studio Code ショートカット Mac/Windows

VSCodeの便利なショートカットの備忘録です。

ショートカット一覧
★設定
Atomにはあるけど、VSCodeにあるのか確認したいないもの

ショートカット一覧

手動インデント（オートフォーマット）

「Shift」＋「Alt」＋「F」

★別ウインドウを開く

「Ctrl」＋「Shift」＋「N」

★ファイルの新規作成

Web開発ではエディタを開いているときに新規でファイルを作りたくなることって以外にあります。ショートカット一発でいけるのは楽ですね。

Windows 「Ctrl」＋「N」

Mac「Cmd」＋「N」

★カーソル行の内容をまるまる上下にコピー

同じ内容を簡単にコピーできるのですごく楽です。「Ctrl」＋「CV」とか馬鹿らしくなります。

Windows 「Alt」＋「Shift」＋「上下」

Mac「Option」＋「Shift」＋「上下」

★カーソル行の内容をまるまる削除

あまり使用頻度はありませんが、全選択してから削除よりは便利そうです。

Windows 「Ctrl」＋「Shift」＋「K」

Mac「？」＋「？」＋「？」

Macは「Cmd」ではないので注意

★ツリービューの表示・非表示切り替え

ボチボチ使います。

Windows「Ctrl」＋「B」

Mac「Cmd」＋「B」

★HTMLのテンプレートを呼び出す（Emmet）

「!」＋「Enter」

「html:5」＋「Enter」

どちらでも大丈夫。ビックリマークに続けてEnter(Return)と入力する方が簡単。

★ulとliを作る

ul>li*3

とする。数字はli要素の数。

★divにidを振ったものを作る

div#app

とする。これでappというIDが振られたdivタグができる。

★CSSを読みこむlink要素を作る

link:css

★JavaScriptを読みこむScript要素を作る

script:src

★cssやjsファイルに飛ぶ、ファイルが無ければ作成も

その要素をマウスホバーした上で「Ctrl」＋「クリック」

★色をホバーすると、カラーパレットが表示してくれる

色のアイコンではなく、文字やコードの方をホバーすること。

★セレクタをホバーすると、指定しているHTMLの要素や詳細度を表示してくれる

これは便利

★設定画面を表示する

Windows 「Ctrl」＋「,」

Mac「Cmd」＋「,」

★マークダウンプレビュー

.mdというファイル名を作ってから行うこと。

Windows 「Ctrl」＋「Shift」＋「V」

Mac「Cmd」＋「Shift」＋「V」

★マークダウンからpdfを印刷

MarkDornPDFをインストールする。
印刷したい文書.mdをアクティブにする
「Cmd」＋「Shift」＋「P』でコマンドパレットを出す
>の後に「export」と入力すると色々表示されるのでpdfのやつをクリック

すると同じディレクトリに.pdfファイルができる。

その他のファイル型式で取得することもできる。

コマンドパレット

コマンドを入力する

Windows 「Ctrl」＋「Shift」＋「P」

Mac「Cmd」＋「Shift」＋「P」

themeと打てばpreference Color Themeからテーマカラーを選べる。
minimapと打てば、右サイドに表示されるミニマップをオンオフできる。

★設定

UserのCommonly Userd、一般的に使うものをUser単位で設定する。デフォルトと違う値が設定されると、左側に青いラインが入る。

Auto Save

保存し忘れがあると困るのでafterDelayにしておく。ディレイ時間はAuto Save Delayで設定する

Font Family

Ricty Diminishedに変更する

Tab Size

２に変更する。デフォルトの４は横に広がり過ぎる。

Render Whitespace

allにする。半角スペースが・で表示されるので解りやすい。

Word Wrap

行の折り返し設定。onにする。デフォルトはoffで長い文書を打っても折り返さないのでスクロールすることになる。

ミニマップを表示／非表示にする

ソースコードの右にあるソースコードの短縮形みたいなやつ。幅を取るし基本的には要らないと思われる。非表示にする方法は

「Ctrl」＋「,」で設定画面を表示する
出てくるバーに「minimap」と入力する
Editor > Minimap:Enabledのチェックを外す

★直下に空行を追加し、その空行から打ち始める

結構使います。HTMLをタグ入力してるときとか重宝します。

Windows 「Ctrl」＋「Enter」

Mac「Cmd」＋「Enter」

★現在の行を下にずらし、現在の行から打ち始める

結構使います。これもHTMLをタグ入力してるときとか重宝します。

Windows 「Ctrl」＋「Shift」＋「Enter」

Mac「Cmd」＋「Shift」＋「Enter」

★文字をコメントアウトする

めちゃくちゃ使います。特にHTMLの<!– –>とか手で打つの面倒・・。

Windows 「Ctrl」＋「/」

Mac「Cmd」＋「/」

★カーソル行をまるまる上下に移動する

めちゃくちゃ使います。考えた人感謝。

Windows 「Alt」＋「上下」

Mac「Option」＋「上下」

対応するタグに移動する

これも便利です。片方のタグがマークされるだけでも便利ですが、ジャンプできるので尚よし。

Windows 「Ctrl」＋「M」

Mac「Ctrl」＋「M」

Macは「Cmd」ではないので注意

★カーソルが当たっている同じ文字を次次に選択する

例えばＰタグをliタグに変更したい場合などに便利。

Windows 「Ctrl」＋「D」

Mac「Cmd」＋「D」

★カーソルを好きなところに複数立てる

カーソルを複数立てて同時に編集できる。マルチカーソル。

Windows 「Alt」＋「クリック」

Mac「Option」＋「クリック」

★カーソルを下や上に次々と複数立てる

マルチカーソルの変化版。カーソルを下に下に、上に上に増やしていきたい場合。

Windows 「Ctrl」＋「Alt」＋「上下」

Mac「Cmd」「Option」＋「上下」

★検索窓の表示

言わずと知れた検索窓。

Windows 「Ctrl」＋「F」

Mac「Cmd」＋「F」

★置換窓の表示

置換窓。MacとWinでは違うので注意

Windows 「Ctrl」＋「H」

Mac「Cmd」＋「Option」＋「F」

★検索・置換窓の表示（プロジェクト全体）

左の虫眼鏡から検索するとプロジェクト全体から検索になる。

★拡張機能について

左のバーの一番した□が４つのアイコンをクリックして、・・・（三点メニュー）をクリック

show installed extentions　追加でインストールした拡張機能

show build-in extentions デフォルトでインストールされている拡張機能

検索窓にjapaneseと入力したら、Japanese Language Pack for Visual Studio Codeという日本語化拡張機能が表示されるので、インストールしておくと良い。

Atomにはあるけど、VSCodeにあるのか確認したいないもの

手動インデント（設定が必要）

インデントが崩れることは結構あるので重宝します。

Windows 「Alt」＋「Shift」＋「I」

Mac「Option」＋「Shift」＋「I」

画面右にエディタパネルを追加する

タブをドラッグする方が楽だけどあえてキーボードで操作したい場合使う。

Windows 「Ctrl」＋「K」＋「右」

Mac「Cmd」＋「K」＋「右」

パネル間のアクティブ移動

Windows 「Ctrl」＋「K」 & 「Ctrl」＋「左右」

Mac「Cmd」＋「K」 & 「Cmd」＋「左右」

パネルを閉じる

パネルを閉じることはあるけど、普通はＸボタンで済ませるかな。

Windows 「Ctrl」＋「W」

Mac「Cmd」＋「W」

文字の拡大

間違って文字の縮小が押された場合に使うくらい

Windows 「Ctrl」＋「Shift」＋「+」

Mac「Cmd」＋「Shift」＋「+」

文字の縮小

コメントアウトのショートカットと間違って押して困ること多々。

Windows 「Ctrl」＋「Shift」＋「 _ 」

Mac「Cmd」＋「 _ 」

Dotinstall Paneを表示

パネルを表示できないと始まらない。

Windows「Shift」+「Alt」+「d」

Mac「Shift」+「Option」+「d」

再生・停止

エディタにカーソルがあるときでも使えるので以外に便利。

Windows「Alt」+「Shift」+「Enter」

Mac「Option」+「Shift」+「Enter」

５秒巻き戻し

Windows「Alt」+「Shift」+「[」

Mac「Option」+「Shift」+「[」

５秒早送り

Windows「Alt」+「Shift」+「]」

Mac「Option」+「Shift」+「]」