IT関連

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

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

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

 

★別ウインドウを開く

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

 

 

★コマンドパレット

コマンドを入力する

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で長い文書を打っても折り返さないのでスクロールすることになる。

 

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

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

  1. 「Ctrl」+「,」で設定画面を表示する
  2. 出てくるバーに「minimap」と入力する
  3. 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」ではないので注意

 

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

例えば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」

 

 

文字の拡大

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

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 *

関連記事

Atomエディタ 初期設定

Atom初期設定の覚え書きです。内容はドットインストール様の抜粋+αです。   起動直後 起動するとWelcome/Welcome Guide/Telementry Consentなどのタブ …

gitで本番と開発環境の連携 初めてのデプロイ

これは自分用の備忘録です。画像はありません。 他のサイトの説明が難しすぎて、文字だけでもヒントが欲しいという私と同じレベルの人はどうぞ。 何があっても責任は取れませんがご参考までに。   一 …

残業を無くしたい人に伝えたいExcelVBAの存在 エクセルプログラミング

簡単に自己紹介から 現在私は会社のIT部門でプログラムを書く仕事をやっていますが、約4年前は広島で営業補佐の仕事をやっていました。要するに事務職ですね。   広島というと地方になるのですが、 …

Laravel 生成読取更新削除 CRUD全手順 私の備忘録

事前注意事項 今回はXAMPPを使うので、インストールするパスはc:\xampp\htdocsとする。 ゆえに以下コードで>になっているものは、C:\xampp\htdocs>という意味。 …

AS400/IBMi からデータを取得 ExcelVBA クラス化編

注意 これは私の環境下における私の備忘録です。お使いの環境によっては内容が異なる場合があります。システム管理者でない方は絶対にやらないでください。システムにはログが残るものなので、万が一があればクビに …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に