VSCodeの初期設定とプラグイン。

テキストエディターのVSCode(Visual Studio Code)の初期設定とプラグインのメモ。

※ VSCodeの公式ドキュメント。

[ VSCodeのコアファイルの場所 ]

「起動ディスク」>「ユーザー」>「ユーザー名」>「ライブラリ」>「Application Support」>「 Code」。

設定

(1) 設定の変更方法

[ 方法 1 ]

VSCodeの設定画面の項目一覧から変更する方法。(以下のいずれかで設定画面を開く。)

• メニューバーの「Code」>「基本設定」>「設定」。
• ウィンドウ左下の「歯車アイコン」 > 「設定」。
• 「command」 + 「,」キー。

[ 方法 2 ]

VSCodeの設定ファイル(「settings.json」)を直接編集する方法。

1. 「起動ディスク」>「ユーザー」>「ユーザー名」>「ライブラリ」>「Application Support」>「 Code」 > 「User」 > 「settings.json」のファイルをエディターで開く。
2. JSON形式で任意の設定を直接記述する。

(2) 変更した内容

設定画面の左カラム「テキストエディター」の項目を選択

• Tab Size : 「2」。(インデントの幅。デフォルトは「4」。)
• Unicode Highlight: Include Comments : 「false」。(コメントアウト内の日本語が囲われて強調されるのを無効化。)
• Word Wrap : 「on」。(行の折り返しを有効化。)

※ 「Word Wrap」はファイル編集中に「option」 + 「Z」キーでもその場でオンオフが変更できる。

キーボード ショートカット

[ ショートカットの割り振りを変更 ]

• 「command」 + 「_」キーに「改行」を割り振り。

※ 誤操作多いのでショートカットの割り振りを上書きして対応。(デフォルトはフォントサイズ変更。)

※ ショートカットの変更方法は別記事。

Theme(配色)の変更

[ Theme(配色)を変更 ]

定番の「Monokai」に変更。

1. メニューバーの「Code」>「基本設定」>「テーマ」>「配色テーマ」か、「command」 + (「K」キーの後に「T」キー)を押す。
2. 表示されるプルダウン内から「Monokai」をクリック。
3. 自動的に適用される。

※ 表示されるプルダウン内を上下キーで移動するとそのテーマでのプレビュー状態を確認できる。

プラグイン

プラグインの設定を変更する場合は、VSCodeの設定画面内にある「拡張機能」の項目から該当プラグインを選択するか、VSCode自体の設定ファイル(「settings.json」)に直接記述する。(設定の記述方法は各プラグインの公式ページで確認。)

(1) VSCodeのシステム系

• Japanese Language Pack for Visual Studio Code : 日本語化。
• vscode-icons : ツリービューやタブのファイル名の前に拡張子別のアイコン表示。
• Project Manager : 複数プロジェクトをそれぞれフォルダ単位で管理できる拡張機能。

(2) 編集補助

• Path Intellisense : ディレクトリパス入力時の自動補完。
• indent-rainbow : インデントを強調。(色分けで列の視認性が上がる。)
• Prettier : コードを整形。
• ApacheConf : Apacheのモジュールであるmod_rewriteの構文ハイライト。

(3) 文法エラーチェッカー

• HTMLHint : HTML用。
• CSSTree validator : CSS用。
• ESLint : JavaScript用。
• Shader languages support for VS Code : GSLS用。

(4) HTML/CSS

• Auto Close Tag : HTMLファイル以外でもHTMLの閉じタグを自動化。(設定で「Sublime Text3 Mode」をオンにすると、「</」を入力したときに自動補完に変更できる。)
• Auto Rename Tag : タグのリネーム時に対のタグを自動編集。
• htmltagwrap : 選択した部分をHTMLの<p>タグで囲う。(範囲選択して「option」 + 「W」キーを押す。囲いのHTMLタグは設定で変更できる。)
• CSS Peek : HTMLのid、classからCSSの該当箇所を参照できる。(右クリックメニューに「ピーク」の項目が表示される。)
• Live Server : ローカルサーバーの立ち上げとブラウザの自動リロード。(ウィンドウ下部ステータスバーの「Go Live」クリックで起動。)
• Live Sass Compiler : Sass、Scssのコンパイラー。(ウィンドウ下部ステータスバーの「Watch Sass」クリックで自動コンパイルが起動。)

(5) PHP

• PHP Intelephense : PHPのエラー表示やコード補完など。(WordPressの組み込み関数がエラー扱いになるので、「設定」>「拡張機能」>「Intelephense: Stubs」>「項目の追加」で「WordPress」を追加。)
• PHP Debug : PHPのデバッグ。
• WordPress Snippets : WordPressの関数やクラスを補完。