Visual Studio Codeは何よりもまずエディターであり、生産性の高いソースコードの編集に必要な機能を備えています。 このトピックでは、エディターの基本を説明し、コードを書き始める手助けをします。
キーボード ショートカット
コードを書くときにキーボードから手を離さないことは、高い生産性のために重要です。 VS Code には、デフォルトのキーボード ショートカットの豊富なセットがあり、また、それらをカスタマイズすることもできます。
- Keyboard Shortcuts Reference – リファレンス シートをダウンロードして、最もよく使われ人気のあるキーボード ショートカットを学んでください。
- キーマップ拡張機能をインストールする – キーマップ拡張機能をインストールすることにより、古いエディター (Sublime Text、Atom、Vim など) のキーボード ショートカットを VS Code で使用できます。
- キーボード ショートカットのカスタマイズ – 自分のスタイルに合わせてデフォルトのキーボード ショートカットを変更できます。
複数選択 (マルチ カーソル)
VS Code では高速同時編集のために複数のカーソルをサポートしています。 Alt+Click でセカンダリ カーソル (より薄くレンダリング) を追加できます。 各カーソルは、それが置かれているコンテキストに基づいて独立して動作します。 カーソルを追加する一般的な方法は、⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) または⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) で、下または上にカーソルを挿入する方法です。
Note: お使いのグラフィックス カード ドライバー (NVIDIA など) がこれらのデフォルト ショートカットを上書きする場合があります。
D (Windows, Linux Ctrl+D) カーソルまたは現在の選択対象の次のワードを選択します。
Tip: ⇧⌘L (Windows, Linux Ctrl+Shift+L) でさらにカーソルを追加することもでき、これは現在の選択テキストのそれぞれの出現位置で選択を追加することになります。
Multi-cursor modifier
複数のカーソルを適用する修飾キーを macOS では Cmd+Click、Windows と Linux では Ctrl+Click に変更したい場合は、editor.multiCursorModifier 設定で変更可能です。 これにより、Sublime Text や Atom などの他のエディターから来たユーザーは、使い慣れたキーボード修飾キーを引き続き使用できます。
-
ctrlCmd– Windows では Ctrl に、macOS では Cmd にマッピングします。 -
alt– 従来のデフォルト Alt に設定します。
また、この設定をすばやく切り替えるために、選択メニューにある [Ctrl+Click for Multi-Cursor] を使用するメニュー項目があります。 たとえば、設定が ctrlCmd の場合、Ctrl/Cmd+クリックで複数のカーソルを追加でき、Alt+クリックでリンクを開いたり定義に移動したりすることができます。 ⌃⇧⌘←（Windows、Linux Shift+Alt+Left）、⌃⇧⌘→（Windows、Linux Shift+Alt+Right）でトリガできます。
以下は、⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) で選択範囲を拡大する例です：
列（ボックス）選択
一つの角にカーソルを持ってきて、Shift+Altを押しながら反対の角までドラッグしてください。
注意: Ctrl/Cmd をマルチカーソル修飾子として使用すると、Shift+Ctrl/Cmd に変更されます。
また、macOS と Windows では、列の選択のためのデフォルトのキー割り当てがありますが、Linux ではありません。
| Key | Command | Command ID | |
|---|---|---|---|
| ⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux ) | Column Select Down | cursorColumnSelectDown |
|
| ⇧⌥ (Windows Ctrl+Shift+Alt+Up, Linux ) | Column Select Up | cursorColumnSelectUp |
|
| ⇧⌥⌘← (Windows Ctrl+Shift+Alt+Left, Linux ) | Column Select Left | cursorColumnSelectLeft |
|
| ⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Right, Linux ) | Column Select Right | cursorColumnSelectRight |
|
| ⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown.NET) | ⇧⌥⌥⌘PageDown(Windows Ctrl+Shift+Alt+PageDown, Linux ) | Column Select Page Down | cursorColumnSelectPageDown |
| ⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux ) | Column Select Page Up | cursorColumnSelectPageUp |
望めば、keybindings.jsonを編集してより身近なものに束ねることができます。
列選択モード
ユーザー設定のEditor: Column Selectionはこの機能を制御します。 このモードに入ると、ステータス バーに表示されるように、マウス ジェスチャと矢印キーはデフォルトで列の選択を作成します。 このグローバルなトグルは、[選択] > [列選択] メニュー項目からもアクセスできます。 さらに、ステータス バーから列選択モードを無効にすることもできます。
保存/自動保存
デフォルトでは、VS Code は変更をディスクに保存するために、⌘S (Windows, Linux Ctrl+S) の明示的操作を要求します。 このオプションをオンにすると、明示的にファイルを保存する必要はありません。 Auto Save を有効にする最も簡単な方法は、ファイル > 自動保存トグルで、遅延後の保存のオン/オフを切り替えます。
Auto Save をさらに制御するには、ユーザーまたはワークスペース設定を開き、関連設定を見つけます。
-
off– 自動保存を無効にします。 -
afterDelay– 設定された遅延時間後にファイルを保存します (デフォルトは 1000 ミリ秒です)。 -
onFocusChange– ダーティファイルのエディタからフォーカスが外れたときにファイルを保存します。 -
onWindowChange– VS Codeウィンドウからフォーカスが外れたときにファイルを保存します。
files.autoSaveDelay: files.autoSave が afterDelay に設定されたときの遅延をミリ秒単位で設定します。 デフォルトは1000ミリ秒です。Hot Exit
VS Codeはデフォルトで終了時にファイルへの未保存の変更を記憶しています。 ホットエグジットは、アプリケーションが File > Exit (macOS では Code > Quit) で閉じられたとき、または最後のウィンドウが閉じられたときに発生します。
files.hotExit を次の値に設定することによって、ホットエグジットを設定することができます:
-
"off": -
"onExit": アプリケーションを閉じたとき、つまりWindows/Linuxで最後のウィンドウを閉じたとき、またはworkbench.action.quitコマンド（コマンドパレット、キーボードショートカット、メニューから）が実行されたときにホットエグジットが開始されるようになりました。 -
"onExitAndWindowClose": アプリケーションを閉じたとき、つまりWindows/Linuxで最後のウィンドウを閉じたとき、またはworkbench.action.quitコマンドが（コマンドパレット、キーボードショートカット、またはメニューから）起動されたときにホット終了がトリガーされ、それが最後のウィンドウであるかどうかにかかわらずフォルダが開かれたウィンドウに対しても行われるようになりました。 フォルダを開いていないすべてのウィンドウは、次回起動時に復元されます。 フォルダーウィンドウをシャットダウン前の状態に戻すには、window.restoreWindowsをallに設定します。
ホットエグジットで何か問題が発生した場合、すべてのバックアップは標準的なインストール場所の以下のフォルダーに保存されます。
- Windows
%APPDATA%\Code\Backups - macOS
$HOME/Library/Application Support/Code/Backups - Linux
$HOME/.config/Code/Backups
検索と置換
VS Code では、現在開いているファイル内で素早くテキスト検索と置換を行うことが可能です。 ⌘F (Windows, Linux Ctrl+F) を押すと、エディタで検索ウィジェットが開き、検索結果はエディタ、概要ルーラー、ミニマップでハイライトされます。
現在開いているファイルに複数のマッチした結果がある場合、検索入力ボックスがフォーカスされているときに Enter と ⇧Enter (Windows, Linux Shift+Enter) を押して次または前の結果にナビゲートできます。
Seed Search String From Selection
検索ウィジェットを開くと、エディタで選択したテキストが自動的に検索入力ボックスに入力されます。
この機能は、editor.find.seedSearchStringFromSelectionをfalseに設定してオフにできます。
Find In Selection
デフォルトでは、検索操作はエディタでファイル全体に対して実行されます。 また、選択したテキストに対して実行することもできます。 この機能は、検索ウィジェットのハンバーガー アイコンをクリックしてオンにできます。
検索ウィジェットのデフォルト動作にしたい場合は、editor.find.autoFindInSelectionをalwaysに、コンテンツの複数行が選択されているときにのみ選択テキストで実行したい場合はmultilineに設定できます。
高度な検索および置換オプション
プレーン テキストでの検索と置換に加えて、検索ウィジェットには 3 つの高度な検索オプションがあります:
- Match Case
- Match Whole Word
- Regular Expression
replace input box support case preserving, Preserve Case (AB) ボタンをクリックしてオンにすることができます。
複数行のサポートと検索ウィジェットのサイズ変更
検索入力ボックスと置換入力ボックスにテキストを貼り付けると、複数行のテキストを検索できるようになりました。 Ctrl+Enter を押すと、入力ボックスに改行が挿入されます。
長いテキストを検索するとき、検索ウィジェットのデフォルトサイズが小さすぎることがあります。 左の帯をドラッグして検索ウィジェットを拡大するか、左の帯をダブルクリックして最大化またはデフォルトのサイズに縮小することができます。 ⇧⌘F（Windows, Linux Ctrl+Shift+F）を押して、検索語を入力します。 検索結果は、検索語を含むファイルにグループ化され、各ファイルのヒット数とその場所が表示されます。 ファイルを展開すると、そのファイル内のすべてのヒットのプレビューが表示されます。
Tip: 検索ボックスで正規表現検索もサポートしています。
右側の検索ボックスの下にある省略記号（Toggle Search Details）をクリックする（または ⇧⌘J (Windows, Linux Ctrl+Shift+J) を押す）と、高度な検索オプションを設定することができます。 これにより、検索を設定するための追加のフィールドが表示されます。
Advanced search options
Search boxの下にある2つの入力ボックスでは、検索に含める、または除外するパターンを入力することができます。 example と入力すると、ワークスペース内の example という名前のすべてのフォルダーとファイルに一致します。 ./example と入力すると、ワークスペースの最上位にある example/ フォルダーにマッチします。 複数のパターンを区切るには、,を使用します。 パスはフォワードスラッシュを使用する必要があります。 また、グロブ構文も使用できます。
-
*はパスセグメント内の 1 文字以上にマッチします -
?はパスセグメント内の 1 文字にマッチします -
**は任意の数のパスセグメントとマッチします。 noneを含む -
{}で条件をグループ化（例えば{**/*.html,**/*.txt}はすべてのHTMLとテキストファイルにマッチ） -
でマッチする文字の範囲を宣言（example.でexample.0,example.1, …にマッチ）。)
VS Codeは、興味のない検索結果を減らすために、デフォルトでいくつかのフォルダーを除外します（例：。 node_modules). files.exclude および search.exclude セクションでこれらのルールを変更するために設定を開きます。
検索ビューでのグロブパターンは、files.exclude や search.exclude などの設定と異なる動作をすることに注意してください。 設定では、ワークスペースのサブフォルダ folder1/example にある example という名前のフォルダに一致させるために **/example を使用する必要があります。 検索ビューでは、** という接頭辞が仮定されます。
また、除外するファイルボックスの［除外設定を使用］と［ファイルを無視］のトグルボタンに注目してください。 このトグルは、.gitignore ファイルによって無視されるファイル、および/または files.exclude と search.exclude 設定によって一致するファイルを除外するかどうかを決定します。
Tip: エクスプローラから、フォルダを右クリックして [フォルダ内を検索] を選択すると、フォルダ内のみを検索できます。
検索と置換
また、ファイル間で検索と置換ができます。
![[search and replace]](https://code.visualstudio.com/assets/docs/editor/codebasics/global-search-replace.png)
置換テキスト ボックスにテキストを入力すると、保留中の変更の差分表示が表示されます。 置換テキスト ボックスからすべてのファイルにわたる置換、1 つのファイルのすべての置換、または 1 つの変更の置換ができます。
Tip: ↓ (Windows, Linux Down) と (Windows, Linux Up) で検索語の履歴を移動すると、以前の検索語をすばやく再利用することができます。
IntelliSense
私たちは常に単語補完機能を提供していますが、JavaScript、JSON、HTML、CSS、SCSS、Less、C#、TypeScript などの豊富な言語に対しては、真の IntelliSense エクスペリエンスを提供しています。 言語サービスが可能な補完を把握している場合、入力中にインテリセンスの候補がポップアップ表示されます。 いつでも⌃Space (Windows, Linux Ctrl+Space)で手動で起動することができます。 デフォルトでは、Tab または Enter が受け入れ可能なキーボード トリガーですが、これらのキーバインディングをカスタマイズすることもできます。 たとえば、”cra” は “createApplication” をすぐに表示します。
Tip: IntelliSense の候補は
editor.quickSuggestionsおよびeditor.suggestOnTriggerCharacters設定で構成できます。
JavaScript および TypeScript 開発者は npmjs タイプ宣言 (typings) ファイル リポジトリを利用して、共通の JavaScript ライブラリ用の IntelliSense (Node.js や React, Angular)が得られます。 JavaScript 言語トピックと Node.js チュートリアルで、型宣言ファイルの使用に関する良い説明を見つけることができます。
詳細は IntelliSense ドキュメントでご確認ください。
- Format Document (⇧⌥F (Windows Shift+Alt+F、Linux Ctrl+Shift+I)) – アクティブなファイル全体をフォーマットします。
- Format Selection (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – 選択されたテキストをフォーマットします。
これらは Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) やエディタのコンテキスト メニューから呼び出せます。
VS Code には JavaScript, TypeScript, JSON, HTML のデフォルト フォーマッターが用意されています。 各言語には固有のフォーマット オプション (たとえば、html.format.indentInnerHtml) があり、ユーザー設定またはワークスペース設定で好みに合わせて調整できます。 また、同じ言語のフォーマットを提供する他の拡張機能がインストールされている場合、デフォルトの言語フォーマッターを無効にすることもできます。
"html.format.enable": false手動でコードの書式設定を呼び出すほかに、入力、保存、貼り付けなどのユーザーのジェスチャーに基づいて書式設定をトリガーすることもできます。 これらはデフォルトではオフになっていますが、次の設定によりこれらの動作を有効にすることができます:
-
editor.formatOnType– 入力後の行をフォーマットする。 -
editor.formatOnSave– 保存時にファイルをフォーマットする。
Note: すべてのフォーマッタが貼り付け時の書式設定をサポートしているわけではありませんが、そうするためには、テキストの選択または範囲の書式設定をサポートする必要があります。
Formattersカテゴリがあるので、書式設定拡張を簡単に検索して見つけることができます。Folding
行番号と行頭の間の溝にある折りたたみアイコンを使用して、ソース コードの領域を折りたたむことができます。 マウスをガター上に移動してクリックすると、領域を折りたたんだり広げたりすることができます。 Shift + 折りたたみアイコンをクリックすると、リージョンとその中のすべてのリージョンを折りたたんだり展開したりできます。
以下のアクションも使用できます。
Toggle Fold (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) カーソル位置のリージョンを折りたたむか展開します。 Fold Recursively (⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+]) カーソル位置とその内側のすべてのリージョンを折りたたみ展開します。 Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) エディタ内のすべてのリージョンを折りたたみます。 Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J))は、エディタ内のすべてのリージョンを折りたたみ解除します。 レベルXを折りたたむ (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) for level 2) は、現在のカーソル位置のリージョンを除く、レベルXのすべてのリージョンを折りたたみます。 Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) は、ブロック コメント トークンで始まるすべてのリージョンを折り返します。 Folding regions はデフォルトで行のインデントに基づいて評価されます。 1.22 リリース以降、折りたたみ領域はエディターで設定された言語のシンタックス トークンに基づいて計算されることもあります。 以下の言語は、すでに構文を意識した折りたたみを提供しています。 Markdown、HTML、CSS、LESS、SCSS、および JSON。
上記の言語のいずれか (またはすべて) のインデント・ベースの折りたたみに戻したい場合は、以下を使用します。 現在、以下の言語でマーカーが定義されています。
言語 開始地域 終了地域 Bat ::#regionまたはREM #regionになります。::#endregionまたはREM #endregionC# #region#endregionC/C++ #pragma region#pragma endregionCSS/Less/SCSS /*#region*//*#endregion*/Coffeescript #region#endregionの場合
F# //#regionor(#_region)//#endregionor(#_endregion)Java //#regionor//<editor-fold>// #endregionor//</editor-fold>Markdown <!-- #region --><!-- #endregion -->Perl5 #regionまたは=pod#endregionまたは=cutPHP #region#endregionPowerShell #region#endregionPython #regionまたは# region#endregionまたは# endregionTypeScript/JavaScript //#region//#endregionVisual Basic #Region#End Regionマーカーで定義した領域のみを折りたたみ、展開する場合。
- Fold Marker Regions (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) は、すべてのマーカー領域を折りたたみます。
- Unfold Marker Regions (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) はすべてのマーカー リージョンを展開します。
Indentation
VS Code ではテキストのインデントを制御し、スペースまたはタブストップを使用するかどうかを指定することができます。 デフォルトでは、VS Code はスペースを挿入し、Tab キーごとに 4 つのスペースを使用します。
"editor.insertSpaces": true, "editor.tabSize": 4,Auto-detection
VS Code は開いているファイルを分析し、ドキュメントで使用されているインデントを決定します。 自動検出されたインデントは、デフォルトのインデント設定より優先されます。 検出された設定はステータス バーの右側に表示されます。
Status Bar indentation display をクリックして、インデント コマンドのドロップダウンを表示し、開いたファイルのデフォルト設定を変更したり、タブストップとスペースの間で変換することが可能です。
Note: VS Code の自動検出は 2、4、6 または 8 スペースのインデントをチェックする。 ファイルが異なる数のスペースを使用している場合、インデントが正しく検出されないことがあります。 例えば、3つのスペースでインデントする慣習がある場合、
editor.detectIndentationをオフにして、明示的にタブサイズを3に設定するとよいでしょう。"editor.detectIndentation": false, "editor.tabSize": 3,File encoding support
ユーザー設定またはワークスペース設定の
files.encoding設定を使って、グローバルまたはワークスペースごとにファイルのエンコーディングを設定します。
ステータス バーでファイルのエンコーディングを確認することができます。
ステータスバーのエンコーディングボタンをクリックすると、アクティブなファイルを別のエンコーディングで再度開いたり保存したりすることができます。
次にエンコーディングを選択する”>
word wrap を有効にする方法は？
editor.wordWrap設定によって word wrap を制御できます。 デフォルトでは、editor.wordWrapはoffですが、onに設定すると、テキストはエディタのビューポート幅で折り返されます。"editor.wordWrap": "on"Z (Windows, Linux Alt+Z) で VS Code セッションのワードラップをトグルすることができます。
また、垂直方向のルーラーが必要な列の文字位置の配列を取る
editor.rulers設定で、エディターに垂直方向の列ルーラーを追加することができます。
コメントを残す