言わずと知れた大人気ド定番エディタ、フロントエンドWeb制作でVisual Studio Codeを利用するときのおすすめの設定と導入手順です。
Setting Sync用のJSONがあれば十分という方はこちらのGistを参照してください。
1. Extensionのインストール
次の手順で、後述するExtension（以下、拡張機能）をインストールします。
-
Ctrl＋Shift＋Xキーを押下して、「EXTENSTIONS MARKETPLACE（拡張機能）」を開く（MacではCtrlの代わりにCommandキーを使います） - 「Search Extensions in Marketplace」に拡張機能名を入力
- 拡張機能の詳細画面で「Intall（インストール）」をクリック
まずは日本語化してみましょう
Japanese Language Pack for Visual Studio Codeをインストールします。
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
続いて、次の手順で日本語化の適応を行います。
-
Ctrl+Shift+pを押下（MacではCtrlの代わりにCommandキーを使います） - 「display」と入力し、「Display Language」を選択します
- 「ja」を選択します
- ダイアログが出たら「Restart」を選択します
- 無事に日本語になれば成功です
その他の拡張機能
続いて、その他の拡張機能をインストールします。
基本
- Hungry Delete：Deleteキーを便利にする
-
Material Icon Theme：エクスプローラー（
Ctrl＋Shift＋EorCommand＋Shift＋E）内の見た目を変化させる - Polacode：コードの画像を生成できる
- Project Manager：各プロジェクトのパスを管理する
- Sublime Text Keymap and Settings Importer：Sublime Textを併用している方で、キーを統一させておきたい人向け
- vscode-input-sequence：複数個所に連番を入力する
- vscode-textlint：VS Code上でtextlintを動かす
記事・ドキュメント執筆（Markdown）
- Markdown Preview Github Styling：Markdownプレビューの見た目を変化させる
- Markdown Preview Mermaid Support：MarkdownプレビューでMermaidをサポートする
- Mermaid Markdown Syntax Highlighting：Markdownファイル内のMermaidをハイライトする
- テキスト校正くん：日本語の校正を行う
開発汎用
- Better Comments：コメントアウトのハイライトをカスタムできる
- EditorConfig for VS Code：EditorConfigの有効化
- GitLens — Git supercharged：Gitで管理されてるプロジェクトではとにかく必携
- Gremlins tracker for Visual Studio Code：ゼロ幅スペースなど問題がありそうな文字列を検出する
- indent-rainbow：インデントに色付けする
- Live Server：簡易的なローカルサーバを立ちあげる
- Live Share：MicrosoftまたはGitHubアカウントを持っている人同士でリアルタイムに共同作業ができる
- Path Intellisense：ファイルパスを自動補完する
- Rainbow CSV：CSVファイルのハイライト
- Regex Previewer：正規表現のテストができる
- SVG Gallery：プロジェクト内のSVGを一覧化する
- Trailing Spaces：余計な空白文字を強調表示する
- Visual Studio IntelliCode：変数名やメソッド名などのサジェストが強化される
- Todo Tree：コードの中のTODOコメントをリストアップ・ハイライトしてくれる
フロントエンドWeb開発
- ESLint：EsLintの有効化
-
Import Cost：JavaScriptやTypeScriptで
importしたとき、モジュールの容量を表示する - SFTP：VS CodeからFTP通信ができる
- stylelint：StyleLintを有効化
2. エディタのおすすめ設定
いくつかのおすすめ設定を紹介します。
設定画面はCtrl＋,またはCommand＋,で表示できます。
「ファイル」→「ユーザー設定」→「設定」やコマンドパレットから「setting.json」を開くと、テキストファイル（JSON）として設定を編集できます。
editor.autoIndent - インデントの自動調整
VS Codeの設定画面でEditor: Auto Indentを「advanced」にします。
{
"editor.autoIndent": "advanced"
}
files.eol - デフォルトの改行コード
デフォルトの改行コードをLFにします。
{
"files.eol": "\n"
}
editor.fontFamily - フォントの設定
-
Source Han Code JPをダウンロード
- Releaseページから「(OTF, OTC)」とついてるリリースを見つける
- Assetsからzipファイルをダウンロードして解凍する
- フォントをインストール（
SourceHanCodeJP.ttcを開く） - VS Codeの設定画面のEditor: Font Familyで「Source Han Code JP」を先頭に追記する」
{
"editor.fontFamily": "Source Han Code JP, Consolas, 'Courier New', monospace"
}
editor.rulers - ルーラーの表示
1行の長さの目安にする線を表示させます。
JSONでの編集しかサポートされていないので、次の内容をsettings.jsonに追記します。
{
"editor.rulers": [80]
}
editor.tabSize - インデントのスペース数
VS Codeの設定画面でEditor: Tab Sizeを「2」にします。
{
"editor.tabSize": 2
}
editor.wordWrap - コードをの折り返し
次のいずれかの手段で設定できます。
-
Alt＋Zキーを押下 - VS Codeの設定画面でEditor: Word Wrapを「on」にする
- JSONに追記する
{
"editor.wordWrap": "on"
}
files.trimTrailingWhitespace - 保存時の空白文字トリミング
拡張機能「Trailing Spaces」をインストール済みのVS Codeで「Files: Trim Trailing Whitespace」を有効にします。
{
"files.trimTrailingWhitespace": true
}
既定のプロファイルの選択
Ctrl＋Shift＋@でターミナル（シェル）を開きます。
ターミナルの右上のUIから「既定のプロファイルの選択」をクリックします。
出てきたダイアログから、自分の好きなシェルを選んでください。
Windowsでは、私は別途インストールしたPowerShell（pwsh）を設定しています。
3. 【重要】Setting Sync
非常に強力なVS Codeの設定同期拡張機能です。
現在のVS Codeの設定内容をGitHubのGistに保存し、簡単にダウンロード・適応・アップロードができます。
- インストールする
- 「LOGIN WITH GITHUBボタン」をクリックしてGitHubと連携する
- すでに利用経験があれば「Select Your Existing Gist」から「Visual Studio Code Settings Sync Gist」を選び、なければSKIP
設定をダウンロードするときは、コマンドパレットから「Sync: Download Settings」を選びます。
現在の設定をアップロードするときは、「Sync: Update/Upload Settings」を選びます。
GistのURLを共有すれば、自分の設定をほかの人に簡単に共有できます。
Gist IDを設定画面で指定してからダウンロード（Sync: Download Settings）することで、ほかの人の設定を読み込むことができます。
たとえば、私のVS Codeの設定は次の通りです。
しっかりコーディングしたいときに助かるVisual Studio Code
ちょっとしたときの作業にはSublime Textを使っているわたしですが、メインの開発用エディタにはVS Codeを利用しています。
拡張機能も豊富でパフォーマンスもよく、非常に使いやすいのでおすすめです。
まだ使ったことがない方はぜひお試しください👀🥒