IT備忘録 エディタ

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

投稿日:2019年8月20日 更新日:

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

 

★ファイルの新規作成

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」+「,」

 

★コマンドパレット

コマンドを入力する

Windows 「Ctrl」+「Shift」+「P」

Mac「Cmd」+「Shift」+「P」

 

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

 

 

 

★設定

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

 

Auto Save

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

 

Font Size

Macは12、Winは14がデフォルトみたい。14くらいがちょうどいいかも。

 

Font Family

Ricty Diminishedに変更する

 

Tab Size

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

 

Render Whitespace

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

 

Word Wrap

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

 

 

 

 

 

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

結構使います。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」ではないので注意

 

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

例えばPタグを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」

 

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

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

 

★拡張機能について

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

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」+「左右」

 

パネルを閉じる

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

Windows 「Ctrl」+「W」

Mac「Cmd」+「W」

 

 

 

 

マークダウンプレビューを表示

emmetプラグインを入れていると効かなくなるので、設定時に注意が必要。

Windows 「Ctrl」+「Shift」+「M」

Mac「Ctrl」+「Shift」+「M」

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

 

文字の拡大

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

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」

 

5秒巻き戻し

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

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

 

5秒早送り

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

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

スポンサーリンク




スポンサーリンク




-IT備忘録, エディタ

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

Vimエディタ 簡単な説明

Windowsではテキストファイルを編集するとき、メモ帳やTeraPadなどを使いますが、LinuxではVimというのを使います。   たかがテキストの編集だろと思ったら大間違い。 何も知ら …

MySQLのrootパスワードを変更したらphpMyAdminに入れない

XAMPPとはいえ、MySQLのRootのパスワードは無防備すぎて変更したくなる衝動にかられるが、変更したらphpMyAdminに入れなくなったという話。 phpMyAdminはrootでログインして …

PHP 自分の備忘録

知識 文字コード PHPはUTF-8N(ボムなし)で保存する。BOMはByte Order Markの略称。 改行コードはLinuxに入れる場合はLFで。 LF(UNIX.Linux.MacOS) L …

【ExcelVBA】シフト文字を含めてバイト数をカウントする

AS400にエクセルに入力したデータをアップロードする仕組みがあるのだが、もちろん10バイトしか入らないカラムだとすると、エクセル上も10バイトしか入れてはいけない。     しか …

AS400/IBMi ACSのキーボード設定

クライアントアクセスのときと同じでキーボード設定が必要。 拡張子は同じ.KMPだが中身は全く違うので、最初は一から設定しなければいけないみたい。   設定まで 「編集」をクリック 「設定」か …

Adsense広告


文字で検索

人気記事

なぜだか人気記事

読んでほしい順に