• 最終更新日:

VScodeを使う前に - おすすめ初期設定と最低限の拡張機能をセットする

VScodeでおすすめ初期設定と最低限の拡張機能

VScode(Visual Studio Code)とは軽量かつ高速で動作する高機能エディタ。WindowsでもMacでも動作し、無料とは思えない機能の豊富さ、動作の軽さから多くのプログラマーから選ばれているエディタの1つです。

今回紹介する内容は以下の方が対象になります。

  • これからVScodeを始めたい
  • とりあえず基本的な設定を整えたい
  • 余計な拡張機能はいれたくない
  • gitのインストールができている
  • node.jsのインストールができている

説明する環境は以下の通りです。

  • macOS Mojar v10.14.6
  • Visual Studio Code v1.39.2

VScodeのおすすめ初期設定と最低限の拡張機能

初期設定をしていきましょう。
これからVScodeを始める方はまずは以下の設定を試してみてください。

初期設定をする

VScodeを立ち上げます。
そしたら画面上にあるツールバーから、【 Code > 基本設定 > 設定 】の順に選択します。

 

そしたら以下の画像にある部分をクリック。

 

その開かれたページに以下のコードをコピペします。コピペできたらファイルを保存します。

{
    "workbench.iconTheme": "vscode-icons",
    "diffEditor.renderSideBySide": false, // Git の差分を行内に表示
    "editor.colorDecorators": false, // カラーデコレーターを非表示
    "editor.formatOnPaste": true, // ペースト時に自動でフォーマット
    "editor.formatOnSave": true, // ファイル保存時に自動でフォーマット
    "editor.formatOnType": true, // 入力した行を自動でフォーマット
    "editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更
    "editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト
    "editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更
    "editor.renderControlCharacters": true, // 制御文字を表示
    "editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
    "editor.renderWhitespace": "all", // 半角スペースを常に表示
    "editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示
    "editor.tabSize": 2, // タブのサイズ変更
    "editor.wordWrap": "on", // エディターの幅で折り返し
    "emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示
    "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする
    "emmet.variables": { // Emmet で展開される HTML の言語を変更
        "lang": "ja"
    },
    "explorer.confirmDelete": false, // ファイル削除時の確認を表示しない
    "files.associations": { // ファイルと言語の関連付けを変更
        ".*lintrc": "json"
    },
    "files.exclude": { // エクスプローラーから非表示にするファイル
        "**/*.map": true,
        "**/node_modules": true
    },
    "files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
    "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
    "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
    "[markdown]": {
        "files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない
    },
    "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない
    "html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
    "html.format.unformatted": null, // フレージング・コンテンツ(旧インライン要素のようなタグ)はフォーマットしない
    "html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない
    "search.exclude": { // 検索対象外にするファイル設定( files.exclude のファイルも含む)
        "**/tmp": true
    },
    "window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く
    "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
    "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
    "workbench.editor.tabSizing": "shrink", // タブの表示設定
    "workbench.startupEditor": "none" // Welcome Page を表示しない
}

 

これで初期設定は終わりです。どのプロジェクトでもここで設定した内容が反映されるようになります。

最低限の拡張機能をセットする

次にVScodeに入れておくと便利な拡張機能(プラグイン)をセットしていきます。以下のとおり、拡張機能を検索できる画面まで移動します。

 

拡張機能の検索欄に以下を1つずつ選んでインストールしていきましょう。

Japanese Language Pack for Visual Studio Code

VScodeを日本語に翻訳してくれる。

vscode-icons

ファイルやフォルダに名前や拡張子にあったアイコンをつけてくれる。

Path Autocomplete

パスの候補を表示してくれる。ファイルや画像までの相対パスをすべて書く必要がないのでラク。

Prettier – Code formatter

コーディングのルールを統一して、コードを整理してくれる。

Project Manager

事前にプロジェクトを登録すれば、すばやくアクセスできる環境を作れる

GitLens — Git supercharged

git blameを打たなくても、「いつ、だれがコミットしたのか」を見ることができます。

Git History

git logを打たなくでもコミットの履歴を見やすく表示してくれる

SFTP

FTPソフトを使わずにVScodeからサーバーにアップロードができる。設定によってはファイルを保存した瞬間にサーバー側のデータも書き換えることも可能。

 

まずはこのくらいの拡張機能から初めてみましょう。以下の2つも有名ですが、候補から外しています。

  • Auto Rename Tag
    片方のタグを修正すると、もう片方のタグも自動で修正してくれる。
    確認していないが、致命的なバグがあるみたいなので使っていない。
  • zenkaku
    全角スペースを表示してくれる。
    特に必要ないので使っていない。

もっと細かい設定をしたい人は?

SassやAutoprefixerをサポートする拡張機能もありますが個人的には使っていません。プラグインは最低限の抑えて、あとはgulpなどのタスクランナーを使って作業の効率化・自動化しています。

gulpで設定している内容は以下。

  • sass(expandedとcompressedを選択可)
  • compressedときはcssを1行にする
  • autoprefixer(grid対応も)
  • htmlの共通部分のパーツ化(ejs)
  • 画像の圧縮
  • scriptの結合と圧縮(順番通りに結合してminify)
  • 開発と本番で処理を分岐
  • sourcemapの作成と削除

1度設定できてしまえば同じ環境を作ることは簡単ですし、状況に応じて処理内容も変更できます。最初にターミナルでコマンドを打てば、ファイルを保存しただけで書いた内容が実行されるのでオススメです。gulpの設定については今後紹介します。

2019.10.20追記
gulp4の設定を書いたので参考にしてみてください。