VSCodeのプラグインと設定(JSONファイル)

VSCode(Visual Studio Code)のおすすめプラグイン【2021】
VSCode(Visual Studio Code)の設定をJSONファイルで行おう。

VSCode(Visual Studio Code)のおすすめプラグイン【2021】

おすすめというか、実際に導入しているプラグインだ。
とりあえず全部入れておけば問題ない。

プラグイン名	内容
auto rename tag	開始タグを修正したときに、自動的に終了タグも修正してくれる。
beautify	保存時に自動整形
bracket pair colorizer	対応している括弧ごとに色が変わるので、入れ子になってもどれがどの括弧かが分かりやすくなる。
color highlight	カラーコードに色をつけて可視化。
evillnspector	全角スペースを可視化。
htmlhint	HTML記述に問題があった場合は、問題パネルにエラー内容表示。
IntelliSense for CSS class names in HTML	CSSの参照をサポート
Japanese Language Pack for VS Code	日本語化
japanese word handler	Ctrl + 矢印(←.→)の単語移動を日本語にも対応させる拡張
live html previewer	HTMLプレビュー
Live Sass Compiler	「Watch Sass」を押しておけばscssを自動コンパイル
Path Autocomplete	パスの入力を支援してくれる。
PHP intellisense	PHP構文ハイライト、コード補完など
Trailing Spaces	行末の空白を強調表示してくれる。

VSCode(Visual Studio Code)の設定をJSONファイルで行おう。

[ファイル]―>[基本設定]―>[設定]の順にクリックして設定画面を出す。
設定画面右上の｛｝をクリックするとJSONファイルが開く
開いたJSONファイルに設定内容を書き込もう。
以下は設定のサンプルだ。

{
  // Tab キーを押すとスペースが挿入されます
  "editor.insertSpaces": false,
  // 1 つのタブに相当するスペースの数
  "editor.tabSize": 2,
  // エディターで空白文字を表示するかどうかを制御します。none スペースを表示しない、all 全てのスペースを表示、boundary 単語間の単一スペースは非表示
  "editor.renderWhitespace": "boundary",
  // ミニマップを表示するかどうかを制御します
  "editor.minimap.enabled": false,
  // 有効にすると、ファイルの保存時に末尾の空白をトリミングします
  "files.trimTrailingWhitespace": true,
  // 有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします
  "files.trimFinalNewlines": true,
  // カラーテーマを設定
  "workbench.colorTheme": "Monokai",
  // 貼り付けた内容がエディターにより自動的にフォーマットされるかどうかを制御します
  "editor.formatOnPaste": true,
  // ファイルを保存するときにフォーマットします
  "editor.formatOnSave": true,
  // エディターで入力後に自動的に行のフォーマットを行うかどうかを制御します
  "editor.formatOnType": true,
  // コンテンツを再フォーマットしてはならないタグの、コンマ区切りの一覧
  "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p",
  // 直前に改行を 1 つ入れるタグの、コンマで区切られたリストです
  "html.format.extraLiners": "",
  // 1 行あたりの最大文字数 (0 = 無効にする)
  "html.format.wrapLineLength": 0,
  // 有効な場合、ファイルを開くときに文字セットエンコードをエディターが推測します、言語ごとに構成することも可能です
  "files.autoGuessEncoding": true,
  // 情報メッセージを表示しない
  "liveServer.settings.donotShowInfoMsg": true,
  // ごみ箱を経由したファイル削除時にエクスプローラーが確認をもとめるかどうかを制御します
  "explorer.confirmDelete": false,
  // フォントファミリを制御します
  "editor.fontFamily": "'Source Han Code JP', 'MyricaM M', Consolas, 'Courier New', monospace",
  // PHP 実行可能ファイルを指定します
  "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
  // PHP 7以降の実行可能ファイルへのパス
  "php.executablePath": "C:\\xampp\\php\\php.exe",
  // 組み込みの PHP 言語候補機能を有効にするかどうかを制御します
  "php.suggest.basic": true,
  // リンターを保存時に実行するか、入力時に実行するか
  "php.validate.run": "onType"
}

{

// Tab キーを押すとスペースが挿入されます

"editor.insertSpaces": false,

// 1 つのタブに相当するスペースの数

"editor.tabSize": 2,

// エディターで空白文字を表示するかどうかを制御します。none スペースを表示しない、all 全てのスペースを表示、boundary 単語間の単一スペースは非表示

"editor.renderWhitespace": "boundary",

// ミニマップを表示するかどうかを制御します

"editor.minimap.enabled": false,

// 有効にすると、ファイルの保存時に末尾の空白をトリミングします

"files.trimTrailingWhitespace": true,

// 有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします

"files.trimFinalNewlines": true,

// カラーテーマを設定

"workbench.colorTheme": "Monokai",

// 貼り付けた内容がエディターにより自動的にフォーマットされるかどうかを制御します

"editor.formatOnPaste": true,

// ファイルを保存するときにフォーマットします

"editor.formatOnSave": true,

// エディターで入力後に自動的に行のフォーマットを行うかどうかを制御します

"editor.formatOnType": true,

// コンテンツを再フォーマットしてはならないタグの、コンマ区切りの一覧

"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p",

// 直前に改行を 1 つ入れるタグの、コンマで区切られたリストです

"html.format.extraLiners": "",

// 1 行あたりの最大文字数 (0 = 無効にする)

"html.format.wrapLineLength": 0,

// 有効な場合、ファイルを開くときに文字セットエンコードをエディターが推測します、言語ごとに構成することも可能です

"files.autoGuessEncoding": true,

// 情報メッセージを表示しない

"liveServer.settings.donotShowInfoMsg": true,

// ごみ箱を経由したファイル削除時にエクスプローラーが確認をもとめるかどうかを制御します

"explorer.confirmDelete": false,

// フォントファミリを制御します

"editor.fontFamily": "'Source Han Code JP', 'MyricaM M', Consolas, 'Courier New', monospace",

// PHP 実行可能ファイルを指定します

"php.validate.executablePath": "C:\\xampp\\php\\php.exe",

// PHP 7以降の実行可能ファイルへのパス

"php.executablePath": "C:\\xampp\\php\\php.exe",

// 組み込みの PHP 言語候補機能を有効にするかどうかを制御します

"php.suggest.basic": true,

// リンターを保存時に実行するか、入力時に実行するか

"php.validate.run": "onType"

}