MENU
  1. ホーム
  2. ツール
  3. settings.json | Visual Studio Code

settings.json | Visual Studio Code

ツール
目次

はじめに

Visual Studio Code（ビジュアル スタジオ コード）はMicrosoft社が開発している高機能なフリーのエディターです。略して「VS Code」と表記されることもあります。コード補完、スニペット、シンタックスハイライトなど、プログラムのソースコードやHTMLの作成に向いた機能がてんこ盛りです。また拡張機能をダウンロードすることで、さまざまな機能を追加することができます。

settings.json

「settings.json」とはVisual Studio Codeの設定を保存したJSON形式のファイルです。Visual Studio Codeはチェックボックスやコンボボックスなどで設定を行えますが、その設定は「settings.json」に保存されます。逆に「settings.json」に適切に入力することで、設定に反映させることができます。

  • 設定にはデフォルト値というものがあり、デフォルト値から変更した項目のみが「settings.json」に登録されます。
  • JSON（JavaScript Object Notation）は、その名のごとくJavaScriptで用いられているオブジェクト表記法です。昨今ではJavaScriptに限らず、クラウドへのデータ送信などさまざまなデータのフォーマットに用いられています。
  • JSONファイルのエンコードはUTF-8である必要があります。

「settings.json」の開き方

STEP
下図①②の順に操作し、設定を開きます。
STEP
赤枠部の[設定（JSON）を開く]ボタンをクリックします。
STEP
settings.jsonファイルに設定を書き込んだり、読み出したりします。

設定には2種類ある

設定にはユーザー用とワークスペース用の2種類あります。

項目内容
ユーザー用Visual Studio Code全体に共通する設定です。
ワークスペース用ワークスペース（特定のフォルダー）内だけに適用される設定です。ユーザー用より優先度が高く、相反する設定を行った場合、ワークスペース用の設定が反映されます。

初期状態で表示されているのはユーザー用で、下図赤枠部をクリックすることでワークスペース用に切り替えることができます。

設定例

設定例と、以降にいくつかの設定項目を紹介します。

[settings.json]

{
	// 全体の表示倍率
	"window.zoomLevel": -0.8,
	// フォントサイズ
	"debug.console.fontSize": 16,
	"editor.fontSize": 16,
	"terminal.integrated.fontSize": 16,
	// 行間
	"editor.lineHeight": 20,
	//
	// 起動時に無題の新規ファイルを開く
	"workbench.startupEditor": "newUntitledFile",
	// ファイルを開く際にエンコードを自動判別する
	"files.autoGuessEncoding": true,
	// ファイル保存時に整形する
	"editor.formatOnSave": true,
	// 保存時に行末の空白を削除する
	"files.trimTrailingWhitespace": true,
	// 終了時に保存確認する
	"files.hotExit": "off",
	//
	// タブキーでスペースを挿入
	"editor.insertSpaces": false,
	// ミニマップを非表示
	"editor.minimap.enabled": false,
	// ブラケットペアを有効
	"editor.guides.bracketPairs": true,
	// プレビューエディターを無効化する
	"workbench.editor.enablePreview": false,
	// ファイルを拡張子でソートする
	"explorer.sortOrder": "type",
	// アウトラインに変数を表示しない
	"outline.showVariables": false,
	// アウトラインに定数を表示しない
	"outline.showConstants": false,
	//
	// エクスプローラーから非表示にする拡張子・フォルダー
	"files.exclude": {
		"**/*.exe": true
	},
	// 検索の対象外にする拡張子・フォルダー
	"search.exclude": {
		"**/*.exe": true
	},
	//
	// ClangFormatをファイルで指定する
	"C_Cpp.clang_format_style": "file",
	// 整形しないタグ
	"html.format.contentUnformatted": "pre, code, textarea",
	// 整形時、直前に改行を入れるタグ
	"html.format.extraLiners": "head, body, section",
}

設定項目の紹介

window.zoomLevel

全体の表示倍率を変更します。0がデフォルトで、負の値なら縮小、正の値なら拡大表示します。

“window.zoomLevel”: 0
“window.zoomLevel”: -0.8

files.autoGuessEncoding

「true」に設定すると、ファイルを開く際にエンコードを自動判別します。しかしこの自動判別、あまり精度はよくありません。このため例えばエンコードが定まっているのであれば、下記のようにワークスペースに設定すると良いでしょう。

{
	"files.autoGuessEncoding": false,
	"files.encoding": "shiftjis",
}

editor.guides.bracketPairs

「true」に設定すると、カーソルを囲うブラケット（括弧）ペア示すガイドを表示します。

“editor.guides.bracketPairs”: false
“editor.guides.bracketPairs”: true

workbench.editor.enablePreview

「false」に設定することで、プレビューエディターを無効化できます。
下図赤枠部のようにファイル名が斜体となっているのがプレビュー状態です。プレビュー状態のタブは保持されません。他のファイルを選択すると置き換わります。編集状態で開くには、エクスプローラーからダブルクリックでファイルを選択する必要があります。これが手間なので、プレビューエディターは無効化しておくと便利です。

ツール
目次