Web Design Leaves

アンインストール

Mac の場合、VS Code をアンインストールするにはアプリケーションフォルダ（/Applications）の Visual Studio Code.app を右クリックして「ゴミ箱に入れる」を選択します。

ユーザーデータの削除（設定のリセット）

VS Code をアンインストール後、ユーザーデータを削除したい場合は、ユーザーデータの Code フォルダと .vscode フォルダを削除します。

これにより、VS Code をインストールする前の状態に戻ります。

VS Code をアンインストールしない場合は、この方法ですべての設定をリセットすることができます。

Mac の場合、フォルダは以下にあります（$HOME はユーザーのホームディレクトリです）。Library 及び .vscode は隠しフォルダになっています。

• $HOME/Library/Application Support/Code
• $HOME/.vscode

Uninstall Visual Studio Code

日本語化

日本語化するには拡張機能（Extensions）の「Japanese Language Pack for Visual Studio Code」をインストールします。

画面上に「表示言語を日本語に変更するには言語パックをインストールします」というウィンドウが表示されていれば「インストールして再起動」をクリックするだけです。

または、左側にある拡張機能（Extensions）のアイコンをクリックして「Japanese Language Pack for Visual Studio Code」を検索してインストールします。

入力欄に「Japanese Language Pack for Visual Studio Code」と名前全体、または「Japanese」などのキーワードを入力して、表示される候補の中から「Japanese Language Pack for Visual Studio Code」を選択してインストールします。

日本語化を完了して適用するには再起動する必要があります。以下のようなウィンドウが表示されたら「Restart」をクリックして再起動します（または手動で再起動します）。

再起動すると日本語化されています。

ビュー（表示位置）のリセット

アクティビティバーのエクスプローラーのアイコンが消えてしまった場合など、コマンドパレットで以下のコマンドを実行すると、表示位置を初期状態（デフォルト）に戻すことができます。

View: Reset View Locations

先日、パネルのポート（built-in port forwarding のタブ）を非表示にしたところ、その後、再度表示できなくなってしまいました（右クリックしてもポートを表示するオプションがない）。

上記コマンドを実行して表示されるようになりました。エクスプローラーのアイコンの場合もそうですが、時々このようなことがあるようです。

コマンドラインからの起動

Mac のターミナルなどのコマンドラインから VS Code を起動することもできます。

Visual Studio Code on macOS

ターミナルから VS Code を起動できるようにするには、以下の方法で path を通す必要があります。

VS Code を起動し、command + shift + p でコマンドパレットを開き、「shell command」と入力して Shell Command: Install 'code' command in PATH コマンドを検索して実行します。

以下が表示されれば path が正常に追加されています。

ターミナルを再起動すると、code コマンドが利用できます。

% code --version return //バージョンの確認
1.67.2
c3511e6c69bb39013c4a4b7b9566ec1ca73fc4d5
x64

% code --help return //ヘルプの表示
Visual Studio Code 1.67.2

Usage: code [options][paths...]

To read from stdin, append '-' (e.g. 'ps aux | grep code | code -')

Options
  -d --diff <file> <file>           Compare two files with each other.
  -a --add <folder>                 Add folder(s) to the last active window.
  -g --goto <file:line[:character]> Open a file at the path on the specified
                                    line and character position.

   ・・・中略・・・

  --max-memory <memory>           Max memory size for a window (in Mbytes).
  --telemetry                     Shows all telemetry events which VS code
                                  collects.

以下は開きたいディレクトリに移動して code . コマンドで VS Code を起動する例です。

% cd /Applications/MAMP/htdocs/myProject return //開きたいディレクトリへ移動
% code . return  //VS Code を起動

Command Line Interface (CLI)

コマンドパレット

VS Code はメニュー項目などをクリックして操作するメニューコマンド以外にも「コマンドパレット」を使ってキーボードからも操作することができます。

コマンドパレットには、VS Code のを操作するためのコマンドが並べられていて、ここから VS Code の機能にアクセスすることができます。設定や特定の操作などいろいろな場面でよく使います。

コマンドパレットはショートカットコマンドの command + shift + p、または［表示］メニューから［コマンドパレット］で表示することができます。

入力欄にキーワードを入力してコマンドを検索することができます。

例えば「preference」と入力すると、以下のように preference（基本設定）に関連する候補が表示されるので、候補のいずれかをクリックするとそのコマンドが実行されます。

また、command + p でクイックオープンを開いて、> と入力すると、コマンドパレットを開くのと同じことになります。クイックオープンも便利な機能なので覚えておくと良いと思います。

※ version 1.82 からはコマンドセンターがデフォルトで表示されているので、もっと簡単にコマンドパレットやクイックオープンにアクセスできます。

• User Interface/Command Palette
• Visual Studio Code Tips and Tricks/Command Palette

クイックオープン

クイックオープンはファイルを開いたり、指定した行にジャンプしたりすることができる機能です。

command + p でクイックオープンを起動すると、最近開いたファイルの履歴が表示されます。 return を押すか、またはクリックで選択されているファイルを開くことができます。

ファイル名の一部を入力すると、候補のファイルが表示されます。

ファイル選択する際に 右矢印 ▶ キーを使用すると、選択されたファイルはバックグラウンドで開かれ、複数のファイルを続けて開くことができます。

また、ファイルを検索したり、: の後に行番号を指定して行に移動したり、@ と入力してシンボルに移動することもできます。

? を入力すればコマンドの提案（候補）を表示させることができます。

また、> と入力するとコマンドパレットを表示したのと同じ状態になります。

Quick Open

コマンドセンター

version 1.82 からはコマンドセンターと呼ばれる入力ボックスが最上部のタイトルバー部分にデフォルトで表示されるようになりました。

ボックスにカーソルを置くと、以下のようにオプションが表示され、選択するとファイルへの移動やコマンドの実行が簡単に行えるようになりました。 > と入力すればコマンドパレットを呼び出せます。

• ファイルへ移動する：command + p を押して実行するクイックオープンと同じ
• コマンドの表示と実行：shift + command + p を押して実行するコマンドパレットと同じ（単に > と入力しても同じ）

コマンドセンターの操作を中止するにはボックスの外でクリックするか esc キーを押します。

Visual Studio Code August 2023 (version 1.82)

設定エディタ

ユーザー設定を変更するには「設定エディタ」を使用することができます。

macOS の場合、「設定エディタ」を開くには、ツールバーから［Code］→［基本設定］→［設定］を選択するか、ショートカットコマンドの command + , を実行します。

設定エディタを開くと、ユーザー設定スコープのタブの「よく使用するもの」が選択された状態で設定項目が表示されます。

設定項目は「設定グループ」にグループ化されていて、上部に「よく使用するもの」があります。

設定グループ名の左のアイコンをクリックして、設定したい項目を表示させたり、検索バーにキーワードを入力して設定項目を検索することができます。

上記のスクリーンショットでは、ユーザー設定スコープのタブのみが表示されていますが、フォルダを開いたり、ワークスペースを開いている場合は、そのコンテクスト（何を開いているか）により、ワークスペース設定のタブやフォルダ設定のタブも表示されます。

管理ボタンから開く

設定エディタは左下の「管理」ボタンをクリックして表示される項目の「設定」を選択して表示できます。

また、管理ボタンからはコマンドパレットやキーボードのショートカットなどを表示することができます。

コマンドパレットから開く

コマンドパレットから設定エディタを開くには、例えば open setting と入力して表示される候補の「Preference: Open User Settings」や「Preference: Open Settings (UI)」を選択します。

「Preference: Open Settings (JSON)」を選択すると、ユーザー設定ファイル settings.json を開くことができます。

"files.exclude": {
  "**/.git": true,
  "**/.svn": true,
  "**/.hg": true,
  "**/CVS": true,
  "**/.DS_Store": true,
  "**/Thumbs.db": true
},

"search.exclude": {
  "**/node_modules": true,
  "**/bower_components": true,
  "**/*.code-search": true
},

 "files.watcherExclude": {
  "**/.git/objects/**": true,
  "**/.git/subtree-cache/**": true,
  "**/node_modules/*/**": true,
  "**/.hg/store/**": true
},

再読み込み（リロード）

設定の変更や拡張機能を有効・無効にしたりアップデートがあった場合など、再読み込み（リロード）が必要になる場合があります。

VS Code を終了して再起動することもできますが、コマンドパレットを表示して入力欄に rel や reload などと入力し、「Develper: Reload Window」を選択すれば再読み込みすることができます。

コマンドパレットを表示するには以下のいずれかを実行します。

• command + shift + p を押す
• command + p を押してクイックオープンを開いて> と入力
• 最上部のタイトルバー部分の入力窓（コマンドセンター）に> と入力

Single-folder workspaces

フォルダを VS Code のワークスペースとするには、フォルダを開くだけです。

例えば、ツールバーの［ファイル］→［フォルダーを開く］でフォルダーを開くとそのフォルダがワークスペース（Single-folder workspaces）になります。

１つのフォルダを開いて作業する場合、そのフォルダはシングルフォルダーワークスペースになります。

以下は「myProject」というフォルダを開いた例です。エクスプローラー上ではフォルダ名は全て大文字で表示されています。

一度フォルダを開くと、VS Code は開いているファイルやエディタのレイアウトなどを自動的に記録し、そのフォルダを再び開いたときにエディタが元の状態になるようにします。

シングルフォルダーワークスペースの場合、エクスプローラーに表示して作業できるルートフォルダは１つだけになります。新たに［ファイル］→［フォルダーを開く］でフォルダーを開くと、今まで開いていたフォルダは閉じられ、新たなフォルダが表示されます。

また、ワークスペース固有の設定やタスク定義、デバッグ起動ファイルなど、フォルダ固有の設定を追加することもできます。任意のフォルダを開いて［Code］→［基本設定］→［設定］、または command + , で設定エディタを開くと、ワークスペース設定のタブが表示されます。

関連：ワークスペースの設定

Workspace Trust

VS Code では安全にコードを参照、編集できるように「Workspace Trust」という機能があり、フォルダを最初に開く時にフォルダでコードの自動実行を許可または制限するかどうかを決めることができます。

最初にフォルダを開く際には「Workspace Trust」の機能により以下のようなウィンドウが表示されます。信頼できる作成者であれば「はい、作成者を信頼します」をクリックしてすべての機能を許可することができます。

また、「親フォルダxxxx内のすべてのファイルの作成者を信頼します」にチェックを入れることでその親フォルダ内の全てのファイルですべての機能を許可すすることもできます。

Multi-root workspaces

マルチルートワークスペース（Multi-root workspaces）機能を利用すると、複数の異なるフォルダをワークスペースとして構成・管理することができます。

VS Code では通常複数のフォルダを同時に開くことはできませんが、（マルチルート）ワークスペースを作成しフォルダを追加することで複数のフォルダを同時に開くことができます。

また、作成したワークスペースを保存しておくことで、次回 VS Code を利用するときに保存したワークスペースを開けば前回と同じフォルダを開いた状態で作業を行うことができます。

マルチルートワークスペースを利用するには、フォルダをワークスペースとして登録する必要があります。

{
  "folders": [
    {
      "path": "../myProject"
    },
    {
      "path": "../cbp"
    }
  ],
  "settings": {}
}

ワークスペースの設定

ワークスペースの設定は、開いたワークスペースのコンテキスト（シングルフォルダーワークスペース または マルチルートワークスペース）で設定を行うことができ、ユーザー設定をオーバーライドします。

シングルフォルダーワークスペース

シングルフォルダーワークスペースとしてワークスペースを開いた場合、ワークスペース設定のタブで行った設定はそのフォルダ内に .vscode ディレクトリが作成され、settings.json ファイルに保存されます。

マルチルートワークスペース

マルチルートワークスペースとして（.code-workspace ファイルから）ワークスペースを開いた場合は、ワークスペース設定のタブで行った設定は .code-workspace に保存されます。

また、ルートフォルダごとに設定を行うことも可能で、設定エディタには「フォルダ設定」という3つ目の設定スコープが表示されます。

「フォルダ設定」に設定した内容はそのフォルダ内の .vscode/settings.json ファイルに保存されます。

コマンドパレットから設定ファイルを開く

command + shift + p などでコマンドパレットを開いて Preferences: Open Workspace Settings (JSON) と入力して直接設定ファイルを開いて編集することもできます。

ショートカットキーの設定・変更

ショートカットキーのキーバインドを変更、削除、リセットすることができます。

一覧から設定・変更したいコマンド（項目）を検索し、項目をダブルクリックするか、マウスオーバーした際に表示される「＋」をクリックします。

以下は Emmet のラップ変換（Wrap with Abbreviation）のショートカットキーを設定する例です。

入力ボックスが表示されるので、利用したいショートカットキーを入力し return を押します。

ショートカットキーが追加されます。キーバインドに設定したキーの組み合わせが表示され、ソースが「既定」から「ユーザー」に変わります。

項目を右クリックすると、メニューが表示され、キーバインドの削除やリセットなどが行なえます。

「同じキーバインドを表示」を選択すると同じキーバインドのコマンドを表示させることができるので、キーバインドの競合などを確認することができます。

必要に応じて「いつ（when clause contexts）」を設定することができます。項目を右クリックして表示されるメニューで「when 式を変更」を選択すると「いつ」を設定・変更することができます。

変更したキーバインドの表示

右上の「その他の操作」ボタンをクリックして、表示される「ユーザーのキーバインドを表示」を選択するとユーザーが設定したキーバインドが表示されます。

これは検索ボックスに @source:user と入力して検索するのと同じです。

keybindings.json

ショートカットキーの設定ファイル keybindings.json は、キーボードショートカットエディターの右上のファイルのアイコンをクリックして表示することができます。

キーボードショートカットエディターで設定・変更した独自のショートカットが記述されています。このファイルを直接編集してショートカットキーを設定・変更することもできます。

コマンドパレットからアクセスすることもできます。

例えば、「keyboard json」と入力すると以下のような候補が表示されるので、「基本設定: キーボードショートカットを開く（JSON）」を選択すると「keybinding.json」を開くことができます。

コマンドパレットでは様々なキーワードで検索をすることができるので、例えば「shortcut」と入力すれば以下のような候補が表示されます。

「基本設定: 既定のキーボードショートカットを開く（JSON）」を選択すると「既定のキーバインド」の JSON ファイルが開くので、既定のキーバインドや使用できるコマンドを確認することができます。

手動でフォーマット

手動でコードをフォーマットするにはコマンドパレットまたはショートカットキーを使います。

コマンドパレット

コマンドパレットを開いて、format と入力すると候補が表示されます。

ファイル全体をフォーマットするには、Format Document を選択し、選択されている範囲をフォーマットするには Format Selection を選択します。

ショートカットキー

以下のショートカットキーでフォーマットすることができます（Windows の場合は、option の代わりに Alt、command の代わりに Ctrl）。

• ファイル全体をフォーマット： shift + option + f
• 選択されている範囲をフォーマット： command + k に続いて command + f
  ※ HTML をフォーマットする際に、選択範囲をフォーマットすると pre タグ内もフォーマットされてしまうようなので注意が必要（ファイル全体の場合は大丈夫）。

ファイル保存時に自動でフォーマット

ファイル保存時に自動でフォーマットするには、設定エディタ（または settings.json）で設定します。

設定エディタを開いて format などで検索して、「ユーザー」または「ワークスペース」のタブで（グローバルに設定するにはユーザー）、editor: Format On Save にチェックを入れます。

特定の言語のファイルで自動フォーマット

特定の言語のファイルで保存時に自動でフォーマットするには、言語固有の設定の Format On Save を有効にします。

拡張機能でフォーマット

VS Code 標準のフォーマッターの代わりに、インストールした拡張機能が提供するフォーマッターを使用するには、設定エディタ（または settings.json）で設定します。

例えば、検索欄に formatter と入力すると Editor: Default Formatter が表示されるので、プルダウンから使用するフォーマッターを選択します。

拡張機能の Prettier というフォーマッターをすでにインストールしてあれば、以下のようにプルダウンのリストに表示されるので選択することができます。

拡張機能の Prettier というフォーマッターを Default Formatter に設定すると、settings.json には "editor.defaultFormatter": "esbenp.prettier-vscode" が追加されます。

"[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
},
"html.format.wrapLineLength": 0

拡張機能の設定

左側にあるアクティビティバーの「拡張機能」のアイコンをクリックして、目的の拡張機能を選択して表示すると、設定などにアクセスするための管理ボタン（歯車のアイコン）があります。

拡張機能の管理ボタンをクリックして「拡張機能の設定」をクリックすることで、その拡張機能の設定画面を表示することができます。

以下は拡張機能 Project Manager の管理ボタンから、その設定を開いた場合の例です。

または、macOS の場合、ツールバーから［Code］→［基本設定］→［設定］を選択するか、ショートカットキーの command + , で設定エディタを開きます。

管理ボタンやコマンドパレットから開くこともできます。

設定グループの「拡張機能」をクリックするとインストールされている拡張機能が展開されるので、該当する拡張機能を選択します。

検索欄にキーワードを入力して検索することもできます。※但し、必ずしも拡張機能の名前で検索できるとは限りません。

フォルダやワークスペースを開いている場合は、ワークスペース設定のタブも表示されるので、フォルダやワークスペース固有の設定もできます。

Project Manager

Project Manager はフォルダーやワークスペースをプロジェクトとして管理できる拡張機能です。Project Manager をインストールするとアクティビティバーに Project Manager のボタンが追加されます。

インストールしたら念の為 VS Code を再読み込み（または再起動）します。

プロジェクト（FAVORITES）を管理するには、まずフォルダーやワークスペースを開き、Project Manager のボタンをクリックします。

フォルダーを開くにはメニューの「ファイル」から「フォルダーを開く」を選択します。

そしてフロッピーディスクのようなアイコンをクリックするか、コマンドパレットで Project Manager: Save Project を実行します。

名前の入力欄が表示されるので、プロジェクトに名前を付けて return で保存することができます。

プロジェクトが保存されると、FAVORITES に追加されます。

追加されたプロジェクトをクリックすると、そのフォルダーやワークスペースを開くことができます。すでに Project Manager で開いている状態になっている場合は、アクティビティバーのエクスプローラーをクリックします。

また、追加されたプロジェクトを右クリックするとメニューが表示されるので名前を変更したり、削除することなどができます。

projects.json でプロジェクトを編集

編集ボタンをクリックするか、コマンドパレットで Project Manager: Edit Projects を実行して projects.json を編集してプロジェクトを管理することもできます。

name にはプロジェクト名（サイト名や案件名など）を設定し、rootPath にプロジェクト（サイト）のルートディレクトリ（パス）を設定します。

Project Manager の設定

設定エディタを開いてグローバルのユーザー設定またはワークスペース設定の拡張機能の設定グループを展開して Project Manager を選択して設定することができます。

また、Project Manager の管理ボタンをクリックして「拡張機能の設定」からも設定を表示することができます。

github: vscode-project-manager

SFTP

SFTP は FTP や SFTP でファイルをアップロードできる拡張機能です。

アクティビティバーの「拡張機能」のアイコンをクリックして「SFTP」で検索してインストールします。

同じ名前の SFTP という拡張機能があります。以下はオリジナルの liximomo による SFTP（現在は非推奨）を例にしていますが、Natizyskunk による SFTP でもほぼ同様に機能するようです。

［追記 2022/10］オリジナルの liximomo による SFTP は非推奨

オリジナルの liximomo による SFTP は長期間メインテナンスされていないため現在は非推奨となっています。※ 問題があるインストール済みの拡張機能には「移行」ボタンや「非推奨」のマークが表示されます。

• microsoft/vscode-discussions： Deprecated extensions #1
• liximomo/vscode-sftp：Deprecated extension? #999

現在は Natizyskunk による SFTP に変更して使用しています。使い方はほぼ同じです（以下の設定を変更せずそのまま使えてます）。

インストールしたら念の為 VS Code を再読み込み（または再起動）します。

対象のプロジェクト（フォルダー）を開いて、コマンドパレットで SFTP: config と入力して実行すると sftp.json というファイルがプロジェクトの .vscode ディレクトリに作成されます。

この sftp.json というファイルに設定を記述します。

必要に応じてプロジェクト（フォルダ）ごとに設定することができます。

remotePath

remotePath はサーバー環境やプロトコルに合わせて指定する必要があります。間違った値を指定すると、接続エラーになったり、おかしなところに不要なフォルダを作成してしまったりする可能性があるので注意が必要です。

例えば、SFTP で接続する場合は、remotePath には先頭にスラッシュ（/）を付けるとエラーになるなど、FTP と SFTP の場合で異なる場合があります。

※ ファイルをアップロードする前に、リモートエクスプローラーでサーバーのファイルが正しく参照できるかを確認すると良いと思います。

FTP の場合の設定例

以下は FTP で接続する場合の設定例です。

{
  "name": "Example",
  "host": "xxxxx.conoha.ne.jp",
  "protocol": "ftp",
  "port": 21,
  "username": "ftp_user@example.com",
  "password": "1234!@#$987*%$",
  "remotePath": "/public_html/example.com/",
  "uploadOnSave": false
}

SFTP の場合の設定例

以下は SFTP で接続する場合の設定例です。

{
  "name": "Example",
  "host": "xxxxx.conoha.ne.jp",
  "protocol": "sftp",
  "port": 8022,
  "username": "c1234567",
  "passphrase": "xxxxxxxxxx",
  "privateKeyPath": "/Users/xxxxx/.ssh/id_rsa",
  "remotePath": "localhost/public_html/example.com/",
  "uploadOnSave": false
}

関連ページ： SSH 鍵の作成

リモートエクスプローラー（SFTP EXPLORER）

アクティビティバーの SFTP EXPLORER のアイコンをクリックして、表示される名前をクリックすると、リモート（サーバー）のファイルが表示されます。

sftp.json が正しく設定されていれば、host に指定したサーバーのファイルが表示されます。サーバーのファイルが表示されない場合は、sftp.json の remotePath などの値が正しいかを確認します。

SFTP ステータス

画面下のステータスバーの SFTP をクリックすると、SFTP による出力を確認することができます。

sftp.json で設定を変更したり、ファイルをアップロードしたりするとその結果などが表示されます。

ファイルをアップロード

"uploadOnSave": false に設定している場合は、手動でアップロードします（"uploadOnSave": true に設定している場合は、保存すると自動でアップロードされます）。

手動でアップロードするには、アップロードしたいファイルを右クリックし、メニューから［Upload］を選択します。

または、コマンドパレットからアップロードするコマンドを実行します。

liximomo vscode-sftp: Commands

ローカルとサーバーのファイルを比較

比較したいファイルを右クリックして［Diff with Remote］を選択すると、ローカルとサーバーのファイルを比較して異なる部分がハイライト表示されます。

Live Server

Live Server は編集したコードをリアルタイムでブラウザに反映する（ブラウザを自動的にリロードする）機能です。

アクティビティバーの拡張機能のアイコンをクリックして「Live Server」で検索してインストールします。

インストールしたら念の為 VS Code を再読み込み（または再起動）します。

Live Server をインストールするとステータスバーの右側に「Go Live」というボタンが表示されます。

フォルダやワークスペースを開き、「Go Live」をクリックすると、「http://127.0.0.1:5500/」でローカルサーバーが起動して既定のブラウザでサイトが表示されます。

HTML ファイルを開いていれば、アクティブな HTML ファイルが表示されます。

Live Server が起動している状態でフォルダ内のファイルを更新すると自動でブラウザがリロードされます。また、「Go Live」の部分が「Port:5500」とるので、これをクリックするとサーバーが停止します。

設定

macOS の場合、ツールバーから［Code］→［基本設定］→［設定］を選択するか、ショートカットキーの command + , で設定エディタを開きます（拡張機能の設定）。

フォルダやワークスペースを開いている場合は、ワークスペース設定のタブも表示されるので、フォルダやワークスペース固有の設定もできます。

例えば、ブラウザを変更するには、settings: CustomBrowser でブラウザを選択します。

settings.json を編集して設定することもできます。

ローカル IP アドレスを使う useLocalIp

settings.useLocalIp を true にすると、http://127.0.0.1/ の代わりにローカル IP アドレス（例 http://192.168.11.3:5500/）で表示します。

WiFi でスマホを接続していれば、このアドレスで閲覧することができます。また、以下のような設定項目もあるので必要に応じて設定します。

その他の設定項目は vscode-live-server :Settings（Live Server 設定ページ）で確認できます。

htdocs
└── sample //このディレクトリを VS code でフォルダとして開く
    ├── head.php
    └── index.php

Sass コンパイラー

Sass をコンパイルする拡張機能として Live Sass Compiler と DartJS Sass Compiler and Sass Watcher を掲載しています。

オリジナルの Live Sass Compiler は Darts Sass 未対応（及び更新されていない）とのことで、DartJS Sass Compiler and Sass Watcher を使おうとして調べていましたが、パーシャルを Watch の対象にできないなどの問題があります。

Glenn Marks が作成している Live Sass Compiler は Darts Sass に対応していて、パーシャルを Watch の対象にすることができます。

どちらか使いやすい方を使えば良いと思います。

"liveSassCompile.settings.formats": [

  {
    "format": "compressed",  //アウトプットスタイルを compressed に
    "extensionName": ".css",
    "savePath": "/css",  //出力先を css ディレクトリに
    "savePathSegmentKeys": null,
    "savePathReplaceSegmentsWith": null
  }
]

"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 2 versions",
  "ie >= 11"
]

その他の拡張機能

追加すると便利かもしれない拡張機能

Emmet

VS Code ではデフォルトで Emmet が有効化されています。但し、デフォルトの設定のままだと、HTML の lang 属性は en になっていたりするので、設定を変更することで使いやすくなります。

lang="ja" に設定

command + , で設定エディタを開き、検索欄に emmet と入力すると、Emmet 関連の設定項目が表示されます（インストールされている拡張期ので Emmet に関連する項目があれば、それらも表示されます）。

Emmet: Variables を探します（Emmet: Variables で検索すると簡単です）。

「項目の追加」をクリックします。

lang を ja に変更して OK をクリックします。

以下のように lang が ja に設定されます。

HTML ファイルを開いて ! と入力して tab または return を押すと、以下のように lang="ja" で HTML5 の雛形が展開されます。

コメントフィルター

コメントフィルターは id や class を持つタグの周囲にコメントを追加するフィルタです。

例えば、|c を付けて div>div#foo>p.bar|c のように入力すると、Emmet の候補が表示されます。

その状態で tab または return を押すと、以下のように展開されます。

デフォルトでは改行されてコメントが追加されますが、改行したくない場合は、設定エディタで emmet.preferences で検索して Emmet: Preferences の「settings.json で編集」をクリックします。

settings.json が開き、emmet.preferences に指定する候補が表示されるので、filter.commentAfter を選択します。

デフォルトの値が設定されているので、「\n」を削除すれば改行されないようになります。

例えば、以下のように「\n」を削除して「/」を「end of 」に変更すれば、

"emmet.preferences": {
  "filter.commentAfter": "<!-- end of [#ID][.CLASS] -->"
}

div>div#foo>p.bar|c は以下のように展開されます

<div>
  <div id="foo">
    <p class="bar"></p><!-- end of .bar -->
  </div><!-- end of #foo -->
</div>

Emmet in Visual Studio Code

Emmet のキーバインド

例えば、ラップ変換（Wrap With Abbreviation）にはショートカットキーが割り当てられていないので、独自にキーバインドを設定することができます。

詳細：キーバインディング

Emmet の使用例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

<div class="foo"></div>

<div id="foo"></div>

<p></p>
<p></p>
<p></p>

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<dl>
  <dt></dt>
  <dd></dd>
</dl>

<div class="foo">
  <p class="bar"></p>
</div>
<ul>
  <li></li>
</ul>

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<a href="">Click here</a>

<!--  -->

<div id="foo"></div><!-- end of #foo -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia dicta hic nisi pariatur, molestias facilis nobis ratione, dolore corporis laboriosam praesentium consequuntur tempore eligendi fuga! Laborum odio officia nobis ex.</p>
<p>Inventore officiis libero nihil ullam? Iusto aliquam quae voluptate dolorem iure eum quaerat voluptatum, accusamus, est dignissimos distinctio et minima expedita placeat doloremque qui, sapiente facilis sed amet corrupti! Minus.</p>

<a href="" target="_blank"></a> 

<a href="http://"></a>

Emmetチートシート

Emmet のカスタマイズ（スニペットの登録・上書き）

Emmet に新たにスニペットを登録したり、既存のスニペットを上書きするには、snippets.json というファイルを作成し、任意のフォルダに保存します。

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

設定エディタを開き、emmet.extensionsPath で検索し、snippets.json を配置したディレクトリのパスを指定します。

※ パスにはファイル名（snippets.json）を含めてはいけません。

snippets.json に追加したいスニペットや既存のスニペットを上書きするスニペットを記述します。

VS Code のページ にサンプルのコードが掲載されています。

以下は dld で dl>dt+dd を展開、a:int で内部リンクを展開、a:blank で既存の展開をカスタマイズ（href や rel 属性の値を変更）して上書きする例です。

以前は dl+ で dl>dt+dd を展開できましたが、現在はサポートされていないようです（Troubleshooting）。

{
  "html": {
    "snippets": {
      "dld": "dl>dt+dd",
      "a:blank": "a[href='${0}' target='_blank' rel='noopener']",
      "a:int": "a[href='#${0}']"
    }
  },
  "css": {
    "snippets": {
      "bsd": "border: 1px solid ${1:#999}",
      "ls": "list-style: ${1}"
    }
  }
}

Emmet のスニペットがどのように設定されているかは emmet/snippets/html.json で確認でき、カスタマイズする際に参考にすることができます。

関連項目：ユーザースニペットの登録

Using custom Emmet snippets

スニペット

スニペットは定形のテキスト（コードなど）を登録しておいてそれを呼び出す機能です。

VS Code には標準で組み込まれているビルトインスニペットと独自に登録するユーザースニペットがあります。

ビルトインスニペット

VS Code には JavaScript や PHP など、いろいろな言語のビルトインスニペットが用意されています。

例えば、JavaScript のファイルで for と記述すると候補が表示されますが、その中にスニペットも含まれています。

上記の場合、上から2番目の「For Loop」を選択すると、以下のようなスニペットが出力されます。

または、コマンドパレットを開いて Insert Snippet を実行すると、スニペットを選択することができます。

表示される候補の中からスニペットを選択して実行（出力）することができます。※表示される候補には、ユーザーが登録したユーザースニペットも含まれます。

拡張機能のスニペットをインストール

マーケットプレイスにはスニペットの拡張機能が多数あり、拡張機能としてスニペットをインストールすることもできます。拡張機能の検索欄に @category:"snippets" と入力すると、スニペットをリストすることができます。

{
  "スニペット名": {
    "prefix": "スニペットを呼び出す際に使用する文字列",
    "body": [ //複数行ある場合は、カンマ区切り（配列）で指定
      "出力の1行目",
      "出力の2行目",
      "・・・"  //最後の行はカンマは不要
    ],
    "description": "スニペットの説明（オプション）"
  }
}

{
  "スニペット名 1": {
    "prefix": "スニペットを呼び出す際に使用する文字列",
    "body": [
      "出力の1行目",
      "出力の2行目",
      "出力の3行目"  //最後の行はカンマは不要
    ],
    "description": "スニペットの説明（オプション）"
  },  //カンマで区切る

  "スニペット名 2": {
    "prefix": ["トリガー文字列 1", "トリガー文字列 2" ],
    "body": "出力の行",  //１行のみの場合
    "description": "スニペットの説明（オプション）"
  }//最後はカンマは不要
}

"2column Table": {
  "prefix": "2c table",
  "body": [
    "<div class=\"table-responsive\">",
    "\t<table class=\"table table-bordered\">",
    "\t\t<caption></caption>",
    "\t\t<tr>",
    "\t\t\t<th></th>",
    "\t\t\t<th></th>",
    "\t\t</tr>",
    "\t\t<tr>",
    "\t\t\t<td></td>",
    "\t\t\t<td></td>",
    "\t\t</tr>",
    "\t</table>",
    "</div>"
  ],
  "description": "２列レスポンシブテーブル"
}

"Blockauote with Image": {
  "prefix": "bqimg",
  "body": [
    "<div class=\"bq\">",
    "\t<blockquote class=\"imgbq\" cite=\"http://$1\" title=\"$2\">",
    "\t\t$0",
    "\t</blockquote>",
    "</div>"
  ],
  "description": "画像を使ったブロッククォート"
}

"PHP StyleSheet link": {
  "prefix": "css php link",
  "body": "<link rel=\"stylesheet\" href=\"<?php echo ${1:\\$path}; ?>css/${2:style.css}?<?php echo filemtime(${1:\\$path}.'css/${2:style.css}'); ?>\">",
  "description": "PHP StyleSheet Link with filemtime"
}

"Anchor with target_blank and rel_noopener": {
  "prefix": "alink",
  "body": [
    "<a href=\"$1\" target=\"_blank\" rel=\"noopener\">$2</a>"
  ],
  "description": "Link with target and rel"
},
"target and rel": {
  "prefix": "targetrel",
  "body": [
    "target=\"_blank\" rel=\"noopener\""
  ]
}

マルチカーソル

マルチカーソルは複数の位置にカーソルを置いて同時に編集できる機能です（以下は Mac の場合）。

クリックした位置にカーソルを追加

任意の複数の場所にカーソルを置いて編集する場合は、option を押したまま選択したい場所をクリックすると、クリックした箇所にカーソルが1つずつ追加されます。

マルチカーソルの解除

どこか別の場所をクリックするか、esc を押します。

連続する行にまとめてカーソルを追加

連続する行にまとめてカーソルを置きたい場合は shift + option を押しながらドラッグします。垂直方向にドラッグするだけでなく、矩形の範囲を選択することもできます。

または、option + command + 上下矢印キー でまとめてカーソルを置くこともできます。

複数行の末尾にカーソルを追加

複数行の末尾にカーソルを追加するには、複数行をドラッグで選択後、shift + option + i を押します。

同じ単語を選択

編集したい単語にカーソルを置いて、command + d を押すと同じ単語が1つずつ追加で選択されます。

同じ単語をまとめて選択する場合は、shift + command + L を押します。

同じ単語を選択する際にスキップ（解除）する

command + d で同じ単語を選択する際に、選択された単語を解除するには command + k を押します。

command + k を押した後に、再び command + d を押せば次の同じ単語を追加して選択できます。

大文字小文字を区別して選択

同じ単語を選択する際に、大文字小文字の区別をつけたい場合は、まず、control + f を押して、検索ポップアップを出して、 Aa を選択します。

そして、command + d を押すと大文字小文字の区別した同じ単語を選択できます。

ローカル履歴（タイムライン）

VS Code のバージョン 1.66 から作業履歴を保存する Local history（ローカル履歴）機能が標準搭載され、デフォルトで有効になっています。

ローカル履歴はエクスプローラービューのタイムラインに表示され、ファイルの保存などの操作が行われるたびにエントリーが追加されます。

エントリーを選択すれば、その時点の編集状態と現在のファイルを比較することができます。

エクスプローラービューでファイルを選択すると、左下にタイムラインにローカル履歴が表示されます。

タイムラインの履歴をクリックすると、その時点の編集状態と現在のファイルの比較が表示されます。

必要であれば内容を元に戻す（選択した時点の状態に復元する）ことや削除したファイルを取り戻すこともできます。

詳細ページ：VS Code ローカル履歴（タイムライン）

NPM スクリプトパネル

NPM スクリプトパネルには package.json に記載されている npm scripts が表示されます。

プロジェクトで package.json を使用していない場合は表示されません。

NPM スクリプトパネルが表示されていない場合は、サイドバー上部の「…」をクリックして表示されるメニューで「npm スクリプト」にチェックを入れるか、エクスプローラビューで package.json を選択して表示すると表示されます。

例えば、npm run watch とターミナルに入力してコマンドを実行する代わりに、パネルのボタンをクリックすれば同じコマンドを実行できるので便利です。

スクリプト名の部分をクリックすると、package.json が編集画面に表示されます。

設定

設定エディタを開いて、npm で検索すると設定項目が表示されます。