🔰 Visual Studio Code の日本語化とおすすめパッケージ

16904 ワード
editor 新人プログラマ応援 VSCode editor テキストリンク

言わずと知れた大人気ド定番エディタ、Visual Studio Codeを利用するときのおすすめの設定と導入手順です。

※ フロントエンドWeb制作を行う人向け
※ Setting Sync用のJSONがあれば十分という方はこちらのGistを参照してください。

1. Extensionのインストール

次の手順で、後述するExtension（以下、拡張機能）をインストールします。

  1. Ctrl＋Shift＋Xキーを押下して、「EXTENSTIONS MARKETPLACE（拡張機能）」を開く（MacではCtrlの代わりにCommandキーを使います）
  2. 「Search Extensions in Marketplace」に拡張機能名を入力
  3. 拡張機能の詳細画面で「Intall（インストール）」をクリック

まずは日本語化してみましょう

Japanese Language Pack for Visual Studio Codeをインストールします。

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

続いて、次の手順で日本語化の適応を行います。

  1. Ctrl + Shift + pを押下（MacではCtrlの代わりにCommandキーを使います）
  2. 「display」と入力し、「Display Language」を選択します

  3. 「ja」を選択します

  4. ダイアログが出たら「Restart」を選択します

  5. 無事に日本語になれば成功です

その他の拡張機能

続いて、その他の拡張機能をインストールします。

基本

記事・ドキュメント執筆（Markdown）

開発汎用

フロントエンド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」にします。

settings.json
{
  "editor.autoIndent": "advanced"
}

files.eol - デフォルトの改行コード


デフォルトの改行コードをLFにします。

settings.json
{
  "files.eol": "\n"
}

editor.fontFamily - フォントの設定

  1. Source Han Code JPをダウンロード
    1. Releaseページから「(OTF, OTC)」とついてるリリースを見つける
    2. Assetsからzipファイルをダウンロードして解凍する
  2. フォントをインストール（SourceHanCodeJP.ttcを開く）
  3. VS Codeの設定画面でEditor: Font Familyに「Source Han Code JP」を指定する」
settings.json
{
  "editor.fontFamily": "Source Han Code JP"
}

editor.rulers - ルーラーの表示


1行の長さの目安にする線を表示させます。
JSONでの編集しかサポートされていないので、次の内容をsettings.jsonに追記します。

settings.json
{
  "editor.rulers": [80]
}

editor.tabSize - インデントのスペース数


VS Codeの設定画面でEditor: Tab Sizeを「2」にします。

settings.json
{
  "editor.tabSize": 2
}

editor.wordWrap - コードをの折り返し


次のいずれかの手段で設定できます。

  • Alt＋Zキーを押下
  • VS Codeの設定画面でEditor: Word Wrapを「on」にする
  • JSONに追記する
settings.json
{
  "editor.wordWrap": "on"
}

files.trimTrailingWhitespace - 保存時の空白文字トリミング


拡張機能「Trailing Spaces」をインストール済みのVS Codeで「Files: Trim Trailing Whitespace」を有効にします。

settings.json
{
  "files.trimTrailingWhitespace": true
}

既定のプロファイルの選択

Ctrl＋Shift＋@でターミナル（シェル）を開きます。
ターミナルの右上のUIから「既定のプロファイルの選択」をクリックします。

出てきたダイアログから、自分の好きなシェルを選んでください。
Windowsでは、私は別途インストールしたPowerShell（pwsh）を設定しています。

3. 【重要】Setting Sync

非常に強力なVS Codeの設定同期拡張機能です。
現在のVS Codeの設定内容をGitHubのGistに保存し、簡単にダウンロード・適応・アップロードができます。

  1. インストールする
  2. 「LOGIN WITH GITHUBボタン」をクリックしてGitHubと連携する
  3. すでに利用経験があれば「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を利用しています。
拡張機能も豊富でパフォーマンスもよく、非常に使いやすいのでおすすめです。

まだ使ったことがない方はぜひお試しください👀🥒