【VSCode】コピペでできる初期設定とおすすめ拡張機能 20個

書き方・継続のコツ
各記事にあるclipをクリックすることで、あとからもう一度読みたい記事をクリップ一覧にまとめておくことができます。
【Visual Studio Code (VSCode)】インストールと初期設定
この記事で解決できるお悩み
  • VSCodeを使ってみたいけど、初期設定とか難しそう
  • 拡張機能って何を入れたらいいの?おすすめがあれば教えて欲しい!

この記事ではVSCode(Visual Studio Code)の初期設定の手順や、効率よくプログラミングができるようにするためのおすすめ拡張機能20個をご紹介します。

VSCodeはMicrosoftが開発した安心・安全なプログラミング用テキストエディタで、世界中のプログラマーに利用されているほど有名です。

しかも無料で利用することができるからビックリです!

VSCodeの特徴
  • Microsoftが開発しているため安心・安全
  • 必要に応じて機能を追加できる
  • LinuxやMacOSにも対応
  • 初心者からプロまで世界で多くのプログラマーに愛用されている
  • 軽快な動作

VSCodeはより便利に利用するための初期設定の項目がたくさんあるので難しく感じるかもしれませんが、僕のおすすめ設定と同じでよければコピペで一括設定できるように設定内容を公開しているので、ぜひ参考にしてください。

また、プログラミングが格段に効率良くなる拡張機能も全て画像付きで解説しているので、全て入れても良し、お気に入りを選んでも良し、自分なりにVSCodeをカスタマイズしていきましょう!

今回の記事で紹介する手順どおりに設定、導入すればすぐに効率よくプログラミングを始めることができますよ!

VSCodeのインストール

インストールするにはまず下記公式サイトからインストーラーをダウンロードしてください。

ダウンロードが完了したら、ダウンロードしたexeファイルを実行してください。

インストール画面が表示されますが、最後まで特に変更の箇所はないので全てそのまま[次へ]をクリックして進め、[インストール]、[完了]で終了です。

インストールは特に説明することもないくらいすぐに完了しますが、最初にやっておくべき初期設定がちょっと多いので、ここからが本題という感じです。

VSCodeの初期設定

VSCodeインストール時点では英語表記となっているので、まずは日本語化しましょう。

  1. メニューバー[View] > [Command Palette]をクリック
  2. [>Configure Display Language]を入力 > [Configure Display Language]を選択
  3. [Install Additional Laugage]を選択
  4. サイドバーから[Japanese Language Pack for Visual Studio Code]を選択 > [Install]をクリック
  5. [Restart]をクリック
メニューバー[View] > [Command Palette]をクリック
メニューバー[View] > [Command Palette]をクリック
[>Configure Display Language]を入力 > [Configure Display Language]を選択
[>Configure Display Language]を入力 > [Configure Display Language]を選択
[Install Additional Laugage]を選択
[Install Additional Laugage]を選択
サイドバーから[Japanese Language Pack for Visual Studio Code]を選択 > [Install]をクリック
サイドバーから[Japanese Language Pack for Visual Studio Code]を選択 > [Install]をクリック
[Restart]をクリック
[Restart]をクリック

最後に[Restart]をクリックしてVSCodeが再起動されると日本語表記になります。

日本語化が完了したらいよいよ初期設定です。

設定変更方法には次2つの方法があります。

  • 画面上の設定項目をマウス操作で変更する方法
  • 設定ファイルに設定内容を直接書き込む方法

ご自身で一つ一つ確認しながら設定したいならマウス操作での設定方法がおすすめですが、VSCodeは設定項目が多く一部の項目は設定ファイルに直接書き込まないと変更ができない設定もあるため、まずは僕が設定している内容をコピーして設定ファイルに直接まとめて書き込むと楽だと思います。

設定ファイル(settings.json)への書き込み手順と僕の設定内容を解説していきます。

VSCodeの設定ファイル(settings.json)を開く

設定ファイルは以下のように進むと開くことができます。

  1. メニューバー[表示] > [コマンド パレット]をクリック
  2. [>Open Settings (JSON)]を入力
  3. “Default”を含まない[Preferences:Open Settings (JSON)]を選択
メニューバー[表示] > [コマンド パレット]をクリック
メニューバー[表示] > [コマンド パレット]をクリック
[>Open Settings (JSON)]を入力
[>Open Settings (JSON)]を入力

初めて設定ファイル(settings.json)を開くと下記のとおり【{}】が表示されています。この『{』と『}』の間に設定内容を記載していきます。

なので、とりあえず先に改行して間を開けておくといいと思います。

{
}

↓間に改行

{
  //ココに設定内容を記載します。
}

VSCodeのおすすめ設定内容

僕が設定している設定内容を公開します。

あくまでも参考なので、必要ではないと思う項目は各項目ごとの解説を確認してご自身で適宜削除してください。

見てもよくわからない項目はとりあえずそのまま書いておけば大丈夫です。笑

【[/*]と[*/]の間】と【行内の[//]以降】はコメント扱いになります。

コメントとして各設定の簡易説明を記載しており邪魔なら消しても問題ないですが、そのまま記載しておいたほうが今後の設定変更時にパッと見たときにわかりやすいですよ。

下のコード内にマウスを乗せるとコード表示枠の右上にコピーボタンが表示されます。

コピーしたらそのまま先程の【{】と【}】の間に貼り付けてください。

  /* ---emmet--- */
  // true の場合、Emmet 候補をスニペットとして表示
  "emmet.showSuggestionsAsSnippets": true,
  // 有効にすると、TAB キーを押したときに Emmet 省略記法が展開されます。
  "emmet.triggerExpansionOnTab": true,
  // Emmet のスニペットで使用される変数
  "emmet.variables": {
    "lang": "ja" // Emmet で展開される HTML の言語を変更
  },
  /* ---window--- */
  // フォルダーを新しいウィンドウで開くか、最後のアクティブ ウィンドウを置き換えるかを制御します。
  "window.openFoldersInNewWindow": "on",
  // アクティブなエディターに基づいてウィンドウのタイトルを制御します。
  "window.title": "${activeEditorMedium}${separator}${rootName}",
  /* ---explorer--- */
  // ごみ箱を経由したファイル削除時にエクスプローラーが確認を求めるかどうかを制御します。
  "explorer.confirmDelete": false,
  // 貼り付けで重複するエクスプローラー項目に新しい名前を付けるときに使用する名前付け規則を制御します。
  "explorer.incrementalNaming": "smart",
  /* ---editor--- */
  // 他の修正候補と一緒にスニペットを表示するかどうか、およびその並び替えの方法を制御します。
  "editor.snippetSuggestions": "top",
  // エディターでインライン カラー デコレーターと色の選択を表示する必要があるかどうかを制御します。
  "editor.colorDecorators": false,
  // 構文ハイライトをクリップボードにコピーするかどうかを制御します。
  "editor.copyWithSyntaxHighlighting": false,
  // ドラッグ アンド ドロップによる選択範囲の移動をエディターが許可するかどうかを制御します。
  "editor.dragAndDrop": false,
  // 貼り付けた内容がエディターにより自動的にフォーマットされるかどうかを制御します。
  "editor.formatOnPaste": true,
  // ファイルを保存するときにフォーマットします。
  "editor.formatOnSave": true,
  // エディターで入力後に自動的に行のフォーマットを行うかどうかを制御します。
  "editor.formatOnType": true,
  // 表示するミニマップの最大幅を特定の列数に制限します。
  "editor.minimap.maxColumn": 60,
  // ミニマップ スライダーを表示するタイミングを制御します。
  "editor.minimap.showSlider": "always",
  // ミニマップのサイズを制御します。
  "editor.minimap.size": "fit",
  // 行にカラー ブロックではなく実際の文字を表示します。
  "editor.minimap.renderCharacters": false,
  // マウスを使用して複数のカーソルを追加するときに使用する修飾キーです。
  "editor.multiCursorModifier": "ctrlCmd",
  // ミニマップ スライダーを表示するタイミングを制御します。
  "editor.minimap.showSlider": "always",
  // エディターで制御文字を表示するかどうかを制御します。
  "editor.renderControlCharacters": true,
  // エディターで空白文字を表示するかどうかを制御します。
  "editor.renderWhitespace": "all",
  // とじしろのの折りたたみコントロールを表示するタイミングを制御します。
  "editor.showFoldingControls": "always",
  // 1 つのタブに相当するスペースの数。
  "editor.tabSize": 2,
  // 単語に関連したナビゲーションまたは操作を実行するときに、単語の区切り文字として使用される文字。
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/? 、。!?「」【】『』()",
  // 行の折り返し方法を制御します。
  "editor.wordWrap": "on",
  // エディターが現在の行をどのように強調表示するかを制御します。
  "editor.renderLineHighlight": "all",
  // 各言語に対して上書きされるエディター設定を構成します。
  "[csv]": {
    // 行の折り返し方法を制御します。
    "editor.wordWrap": "off"
  },
  "[json]": {
    // 他のすべてのフォーマッタ設定よりも優先される、既定のフォーマッタを定義します。
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[log]": {
    // 行の折り返し方法を制御します。
    "editor.wordWrap": "off"
  },
  "[python]": {
    // 1 つのタブに相当するスペースの数。
    "editor.tabSize": 2
  },
  "[tsv]": {
    // Tabキーで半角スペースを挿入
    "editor.insertSpaces": false,
    // 行の折り返し方法を制御します。
    "editor.wordWrap": "off"
  },
  /* ---debug--- */
  // デバッグ中にエディターの行内に変数値を表示します。
  "debug.inlineValues": true,
  // いつ内部デバッグ コンソールを開くかを制御します。
  "debug.internalConsoleOptions": "openOnSessionStart",
  // いつデバッグ ビューを開くかを制御します。
  "debug.openDebug": "openOnSessionStart",
  /* ---search--- */
  // 検索結果に行番号を表示するかどうかを制御します。
  "search.showLineNumbers": true,
  // フルテキスト検索および Quick Open でファイルやフォルダーを除外するための glob パターンを構成します。
  "search.exclude": {
    "**/tmp": true
  },
  /* ---files--- */
  // 既定の改行文字。
  "files.eol": "\n",
  //有効にすると、ファイルの保存時に最新の行を末尾に挿入します。
  "files.insertFinalNewline": true,
  // 有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。
  "files.trimFinalNewlines": true,
  // 有効にすると、ファイルの保存時に末尾の空白をトリミングします。
  "files.trimTrailingWhitespace": true,
  // ファイルとフォルダーを除外するために glob パターンを構成します。
  "files.exclude": {
    // エクスプローラーから非表示にするファイル
    "**/*.map": true,
    "**/node_modules": true
  },
  /* ---terminal--- */
  // アクティブなターミナル セッションがある場合に、終了時に確認を行うかどうかを制御します。
  "terminal.integrated.confirmOnExit": true,
  // ターミナルで選択したテキストをクリップボードにコピーするかどうかを制御します。
  "terminal.integrated.copyOnSelection": true,
  /* ---workbench--- */
  // エディターに表示するラベルの書式を制御します。
  "workbench.editor.labelFormat": "short",
  // エディターのタブのサイズ設定を制御します。
  "workbench.editor.tabSizing": "shrink",
  // ワークベンチで使用されるファイル アイコン テーマを指定するか、ファイル アイコンを表示しないように 'null' を指定します。
  "workbench.iconTheme": "material-icon-theme",
  // 起動時にどのエディターを表示するかを制御します。無い場合、前のセッションを復元します。
  "workbench.startupEditor": "readme",
  /* ---html--- */
  // 再フォーマットしてはならないタグの、コンマ区切りの一覧。
  "html.format.unformatted": null,
  // コンテンツを再フォーマットしてはならないタグの、コンマ区切りの一覧。
  "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p",
  // 直前に改行を 1 つ入れるタグの、コンマで区切られたリストです。
  "html.format.extraLiners": "",
  // 1 行あたりの最大文字数 (0 = 無効にする)。
  "html.format.wrapLineLength": 0,

設定を記載したら(貼り付けたら)保存して終了です。

  1. メニューバー[ファイル] > [保存]をクリック
  2. [×]で閉じる
メニューバー[ファイル] > [保存]をクリック
メニューバー[ファイル] > [保存]をクリック
[×]で閉じる
[×]で閉じる

保存が完了したら、設定内容を反映するためにVSCodeを再起動してください。

VSCodeのおすすめ拡張機能(プラグイン)

初期設定が終わったら、次はより使いやすくするため(作業を効率化するため)の機能の追加をします。

VSCodeには拡張機能(プラグイン)という機能を追加する仕組みが用意されており、エディタ上から簡単に検索して追加することができます。

開発環境に求めるものは人それぞれだと思いますが、とりあえず僕がインストールしている拡張機能(プラグイン)を紹介するので、ご自身の好みや使用するプログラム言語の開発環境に合わせて選ぶと良いかと思います。

現時点ではまだよくわからない場合はとりあえず全部いれちゃってください。笑

VSCodeの拡張機能(プラグイン)追加手順

  1. サイドバーの拡張機能ボタン(正方形4つのマーク)をクリック
  2. 上部の検索窓に追加したい拡張機能名を入力
  3. 表示された拡張機能の右側の[インストール]をクリック
サイドバーの拡張機能ボタン(正方形4つのマーク)をクリック
サイドバーの拡張機能ボタン(正方形4つのマーク)をクリック
上部の検索窓に追加したい拡張機能名を入力
上部の検索窓に追加したい拡張機能名を入力
表示された拡張機能の右側の[インストール]をクリック
表示された拡張機能の右側の[インストール]をクリック

以降、僕がインストールしている拡張機能(プラグイン)を紹介します。

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化します。

初期設定前に入れたやつですね。実は拡張機能だったんです。

最初にいれたはずので、もう入れなくて大丈夫です。

Material Icon Theme

ファイルやフォルダの種類に合わせてアイコンが変わり、見やすくなります。

Material Icon Theme faileIcons
Material Icon Theme faileIcons
Material Icon Theme folderIcons
Material Icon Theme folderIcons

インストール後、以下の手順で表示を切り替えることができます。

  1. メニューバー[ファイル] > [ユーザー設定] > [ファイル アイコンのテーマ]をクリック
  2. [Material Icon Theme]を選択
Material Icon Theme
Material Icon Theme
Material Icon Theme-2
Material Icon Theme-2

Bracket Pair Colorizer

括弧をペアごとに色分けします。

Bracket Pair Colorizer
Bracket Pair Colorizer

indent-rainbow

インデントを色分けすることでコードが見やすくなります。

indent-rainbow
indent-rainbow

zenkaku

全角スペースを強調します。

プログラムコードはスペースを含め全て半角文字ですが日本語は全角文字なので、誤って全角スペースを入力してしまっている場合がまれにあります。

プログラム内に全角文字が含まれているとバグ扱いとなりうまく動作しないため、全角文字が含まれていないか常に確認できるように入れておくと便利です。

※グレーの部分が全角スペースの強調された箇所です。赤い矢印はわかりやすいように僕が画像に追加したもので拡張機能とは関係ありません。

zenkaku
zenkaku

Auto Rename Tag

『HTML/XML』のタグを修正するとペアになっている反対側のタグも自動で修正します。

例えば、『<div></div>』を『<di></div>』とすると自動的に終了タグも『<di></di>』となります。

『<di></di>』を『<div></div>』とすると自動的に終了タグも『<div></div>』となります。

Auto Rename Tag
Auto Rename Tag

Auto Close Tag

『HTML/XML』のタグを書くと自動で終了タグも記載されます。

例えば、『<div>』と書くだけで『<div></div>』となります。

Auto Close Tag
Auto Close Tag
Auto Close Tag-2
Auto Close Tag-2

Code Spell Checker

コードの記述ミスを検出します。

Code Spell Checker
Code Spell Checker

Path Intellisense

ファイルパスを自動で補完します。

Path Intellisense
Path Intellisense

REST Client

VSCode上でHTTPリクエストを送信できるようになります。

REST Client
REST Client

HTML CSS Support

クラス属性やID属性の補完、css・scssファイルの検索をしてくれます。

【サポート】

  • html
  • laravel-blade
  • razor
  • vue
  • pug
  • jade
  • handlebars
  • php
  • twig
  • md
  • nunjucks
  • javascript
  • javascriptreact
  • typescript
  • typescriptreact

CSS Peek

HTMLコード上でCSSスタイルを確認できます。

CSS Peek
CSS Peek
CSS Peek-2
CSS Peek-2

Live Server

Visual Studio Code (VSCode)上でリアルタイムで簡単なHTMLやPHPの表示を確認できます。

Live Server
Live Server
Live Server-2
Live Server-2

Rainbow CSV

CSVファイルはExcelで確認するとセルで分けられるので見やすいですが、テキストで確認するとかなり見にくいので、列ごとに統一された色分けをして見やすくします。

Rainbow CSV
Rainbow CSV

Partial Diff

比較したいコードを選択して簡単に比較確認することができます。

Partial Diff
Partial Diff

Todo Tree

あとからやることリスト【TODOリスト】をコード内に『// TODO ~』とコメントとして記述することで、サイドバーにツリー状にまとめて表示してくれます。

また、表示されたツリーから対象のTODOを選択すると該当行を表示します。

Todo Tree
Todo Tree

Log File Highlighter

ログファイルを見やすくします。

Log File Highlighter
Log File Highlighter

Output Colorizer

出力結果(操作結果)を見やすくします。

Output Colorizer
Output Colorizer

VSCodeでGitを利用するための拡張機能

プログラミング開発において、『いつどの時点で追加(変更)した機能か?』『いつどの時点までは正常だったか?』など、デバッグ(バグ修正)作業をする上でコードの編集履歴を管理することはかなり重要なことで、編集履歴を管理することで、スピーディーなデバッグ作業ができるようになります。

この編集履歴管理で世界的に活用されている開発ツールがGitです。

Gitは無料で使える必須の開発管理ツールなので、まだ導入していない方はこの機会に入れておきましょう。

以降、2つの拡張機能を紹介しますが、Gitに関連するものなので、利用するには先に別途Gitをインストールしておく必要があります。

Gitの導入手順は以下の記事で詳細に解説しています。

GitLens

コミット単位での編集履歴を比較確認することができます。

GitLens
GitLens

Git Graph

視覚的に編集履歴を確認することができます。

Git Graph
Git Graph

まとめ

最後にこの記事で解説した内容をおさらいしておきましょう。

効率よくプログラミングするためのポイントまとめ
  1. プログラミングテキストエディタ【VSCode】をインストール
  2. 設定ファイル(settings.json)に設定項目をコピペで一括設定
  3. 自身の開発環境に合わせて拡張機能を導入
  4. 編集履歴を管理するためにGitを導入して、VSCodeに専用拡張機能を導入

VSCodeをインストールして初期設定、拡張機能を導入するだけで誰でも簡単にプログラミング開発環境を構築することができますね。

また、拡張機能は他にもたくさんあるので、利用するプログラミング言語に合わせて拡張機能を追加するともっと効率よく使えるようになるので、自分に合わせた専用のVSCodeにカスタマイズしていきましょう!


▼ コメント ▼

タイトルとURLをコピーしました