閉じる

【オススメ】vscode 設定・拡張機能

世界中のエンジニアの中でも利用者の多いVisual Studio Code。 設定・拡張機能の追加方法がわからない、種類が多すぎて何を追加したら良いのかわからない。そんな初心者の方向けに一からわかりやすく解説します。

カテゴリ: Visual Studio Code

vscodeを使い始めたいけど「どんな設定・拡張機能があるの・・?」
すでに使っているけど、もっと便利な「設定・拡張機能はあるの・・?」
そんな風に考えている方も多いのではないでしょうか?
vscodeには設定・拡張機能の追加をするだけで便利になる機能が数多くあります。
今回は、「vscodeの設定方法、拡張機能の追加方法」
「オススメの設定・拡張機能」を紹介していきます。

vscodeの設定・拡張機能とは

設定は、その名の通りvscodeで設定できる機能です。
例えば文字サイズの変更、ファイル保存時に自動でフォーマット、タブのサイズを変更してくれるなどです。

拡張機能は、後から追加できる便利機能です。
それぞれの拡張機能には開発者がおり、インストールし利用することができます。
表示を日本語化、スペルミスのチェック、タグの補完など、便利な拡張機能が多く開発されています。

設定はvscodeの中、拡張機能はvscodeの外という形になります。

設定方法

vscodeの設定は2通りあります。
①.GUIでの設定
②.settings.jsonでの設定

①.GUIでの設定

設定画面を開きます
「code」→「基本設定」→「設定」

例えばフォントサイズの設定であれば、検索バーに「font」などのキーワードをいれ、変更したい項目(今回であれば「Editor: Font Size」)を探し、数値を変更する事で設定を変更する事ができます。

※変更したい項目をインターネット検索すれば、項目にあったキーワードが出てきます。

②.settings.jsonでの設定

settings.jsonとはvscodeの設定内容を記載するファイルです。
settings.jsonを開きます。

「code」→「基本設定」→「設定」設定が画面を出し



settings.jsonを開くマークをクリック



settings.jsonファイルに定められた記述を記載することで、vscodeの設定を行う事ができます。

オススメの設定を紹介します。

オススメの設定

記述 動き
“editor.fontSize”: 14, エディターフォントサイズ14への変更
“terminal.integrated.fontSize”: 14, ターミナルの文字サイズ14への変更
“editor.fontFamily”: “Consolas, ‘MS 明朝’, monospace”, フォントファミリーを「Consolas, ‘MS 明朝’, monospace」に変更
“editor.tabSize”: 4, タブのサイズ変更
“editor.wordWrap”: “on”, エディターの幅で折り返し表示
“emmet.showSuggestionsAsSnippets”: true, Emmet の候補表示
“emmet.triggerExpansionOnTab”: true, TAB キーで Emmet を展開
“emmet.variables”:{“lang”: “ja” }, Emmet 展開時言語をjaに変更
“editor.formatOnSave”: true, ファイル保存時に自動でフォーマット
“editor.formatOnPaste”: true, ペースト時に自動でフォーマット
editor.formatOnType”: true 入力した行を自動でフォーマット
“editor.renderIndentGuides”: true, ガイドラインの可視化
“editor.renderLineHighlight”: “all”, 選択行を行番号含めすべてハイライト
“editor.minimap.showSlider”: “always”, ミニマップを常にハイライト
“editor.minimap.maxColumn”: 70, ミニマップの最大幅を指定
“editor.hover.enabled”: false, ホバー時の解説を消す
“files.insertFinalNewline”: true, ファイル保存時に行末を改行
“files.trimFinalNewlines”: true, ファイル保存時に最終行以降の空行削除
“files.trimTrailingWhitespace”: true, ファイル保存時に各行の末尾にある半角スペース削除
“html.format.extraLiners”: “”, html, head, body, タグ前に改行を入れない
“debug.inlineValues”: true, デバッグ中に変数値を表示

vscode 拡張機能の追加方法

拡張機能ボタンを押し→検索バーに追加したい拡張機能名を記述→インストールボタンを押す これで拡張機能を追加する事ができます。
※拡張機能によってはインストール後に追加設定するものもあります。

オススメ拡張機能

Japanese Language Pack for Visual Studio Code

vscodeを日本語表示
表示を日本語表示にする事ができ、英語が苦手な人にとってはありがたい機能です。

zenkaku

全角スペースを把握
コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。そこで全角を可視化してくれる拡張機能。

HTML Snippets(HTMLのマークアップのサポート)

HTMLスニペットを表示
入力中に、入力内容に応じたHTMLスニペット(マークアップのサポート)を表示してくれます。
HTMLのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれる機能。

Live Server

テキストエディタの変更内容をリアルタイムでブラウザに反映
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

vscode-icons

アイコンを見やすく表示
デフォルトだと少し味気ないアイコンになってしましますが、vscode-iconsで見やすいアイコン表示する事ができます。

Color Highlight

カラーコードの色を可視化
コード上でカラーを表示してくれるので、ブラウザに戻らなくても色を確認する事ができ、効率的に作業することができます。

trailing space

文末の空白を可視化する
プログラミングは文末にスペースがあると、機能しないことがあります。
スペースを可視化してくれる拡張機能。

EditorConfig for VS Code

コーディングスタイルを統一する
チームで開発を行う際、ルール統一をするための拡張機能です。

Power Mode

力強いコーディング
普段のコーディングを華やかに、便利というよりは飽きさせない拡張機能。

Prettier – Code formatter

自動ソースコード整形
自動で改行の余白、タブのサイズや位置を整形してくれる拡張機能。

Local History

変更前のファイルを保存
Local Historyを使用すると、ファイルを編集するごとに、保存時点でのバックアップがされます。ファイルを消してしまう不安を持たずに開発をするめる事ができます。

Partial Diff

選択範囲の差分を確認
選択範囲の差分を確認する事ができ、目視の工数を減らす事ができます。

Bracket Pair Colorizer 2

括弧に色をつける
括弧の範囲を色付きで目視確認できるようになり、括弧の範囲、閉じを確認することができます。

indent-rainbow

インデントを色分
インデントを色分けしてくれ目立たせてくれる拡張機能です。

Auto Rename Tag

開始タグを修正した時、閉じタグも自動修正
書き換えた時、開始タグだけしか修正していなかった、というミスを防いでくれます。

Bookmarks

エディタ内にブックマークつける
ブックマークをつける事で、どこまでコード読んだかなどの目印をつける事ができます。

Code Spell Checker

スペルチェックを実行
プログラミングでスペルミスは付きもの、目視ではなく自動確認してくれる拡張機能です。

htmltagwrap

選択したものをタグで囲んでくれる
選択したものをタグで囲んでくれるので、効率的に開発を進めまる事ができます。

HTML CSS Support

HTMLにCSS側で作ったclass名を表示
HTMLファイルCSSファイルが連動し、作成した、class名候補を出してくれるので書き間違いを防いでくれます。

CSS Peek

HTMLファイル上で、CSSファイルをチェック
HTMLファイル上で、CSSファイルをチェックしたり、class名からCSSファイルを検索できる拡張機能。

まとめ

今回は、「Visual Studio Codeの設定方法・拡張機能の追加方法」
「オススメの設定・拡張機能」を解説してきました。
本記事を参考に設定・拡張機能の追加をし、開発効率の改善に繋げていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。