現在，VSCode(Visual Studio Code)の設定を検証中．HTML，CSS，javascript, phpなど，ウェブサイト開発に関連する設定として何が適しているのか，調査＆設定をトライ中．
整理できたら公開予定．
| 設定（settings.json）の開き方 | ・左下の歯車アイコンまたはファイルメニューのユーザー設定を開く． ・中央の「ユーザー」を選択する．「ワークスペース」を選択した場合は，ワークスペースごとに設定可能． ・画面右上の，書類＋矢印の形のアイコン（マウスホバーで「設定を開く」と表示される）をクリック ・settings.jsonが開く |
| インデントの設定 | HTMLは2にする．CSSやjavascriptなどはデフォルトの4のまま． 設定（settings.json）を開き，下記項目を記載する． “[HTML]”: { “editor.tabSize”: 2, }, |
| emmetによるHTMLのひな型自動保管 | HTMLを新規に作成したら，「！」＋「タブ」をクリックする．ひな型がぱっと入る．便利． settings.jsonに下記のように記入しておけば，<html lang=”ja”>としてくれる． “emmet.variables”: { “lang”: “ja”, }, |
| 以下拡張機能 | フロントエンドエンジニアにとって便利なものをピックアップ |
| Live Server | テスト用ウェブサーバー． VSCode内で開くので，コードと表示を横並びにしながら開発できる． |
| PHP Server | phpファイルを開発しながら実行テストできる． settings.jsonを開き，”phpserver.php”を検索し，phpの実行ファイル（C:\php\php.exeなど）のパスを設定する |
| vscode-icons | さまざまなファイルにアイコンをつけてくれる |
| Auto Rename Tag | HTMLの開始タグを修正すると，終了タグも修正してくれる． |
| HTML CSS Support | CSSに書いたクラスをHTML編集じに候補として表示してくれる |
| CSS Peek | HTMLのクラスの定義箇所を開く |
| htmltagwrap | 選択要素をラップする要素を追加する |
| HTMLHint | コーディング規約をチェックする． デフォルトで標準的な規約は設定されているが，追加の規約は設定が必要． 画面下部の「問題（Problems）」を開くと，問題点が表示される． settings.jsonに以下のように記述する． "htmlhint.options": { "doctype-first": true, "html-lang-require": true, "title-require": true, "tag-pair": true, "tag-self-close": true, "tagname-lowercase": true, "attr-lowercase": true, "attr-no-duplication": true, "attr-value-double-quotes": true, "spec-char-escape": true, "id-unique": true, "src-not-empty": true, }, |
| CSSTree validator | CSSの構文チェックをしてくれる |
| Javascript and TypeScript Nightly | javascriptの入力補完 |
| PHP IntelliSense | php開発時の入力補完 |
| Live Sass Compiler | Sass(SASS or SCSS)を利用する場合のコンパイラ |
| Markdown All in One | Markdownを書くサポート． GitHubのREADME.mdを書く場合には使える． |
| SQLite Viewer | sqliteを利用する場合，データベースファイルを開くと中を参照できる． |
| Flutter / Dart | スマホアプリ開発時のサポート |
