Learning site for website creation

Visual Studio Code おすすめ拡張機能

  • 投稿日:2019年09月12日
  • 更新日:2019年11月11日

おすすめ拡張機能

基本機能の拡張

Japanese Language Pack for Visual Studio Code:日本語化

EvilInspector:全角スペースを表示

Activitus Bar:アクティビティバーをステータスバーに表示

Visual Studio IntelliCode:AIコード補完

indent-rainbow:インデントを色分け

HTML

AutoFileName:ファイルパス補完

Auto Rename Tag:開始タグを変更すると終了タグも変更される

Color Picker:色を表示

CSSTree validator:CSSの記述ミスチェック

HTML Snippets:HTML5スニペット追加

HTMLHint:HTML記述ミスチェック(軽度)

W3C Validation:HTML記述ミスチェック(要JavaRuntime)

open in browser:右クリックでブラウザ表示確認

IntelliSense for CSS class names in HTML:クラス名補完

Code Spell Checker:英単語スペルチェッカー

Browser Preview:VS Code上で表示確認

JavaScript

Bracket Pair Colorizer 2:ブラケットを色分けして表示

JavaScript (ES6) code snippets:JSコードスニペット追加

PHP

PHP Intelephense:PHP開発用拡張パック(コード整形機能もあり)

phpcsfixer:コード整形「Shift」+「alt」+「f」

  • ダウンロード:https://github.com/FriendsOfPHP/PHP-CS-Fixer#installation
  • ダウンロードした「php-cs-fixer.phar」ファイルを任意の位置に配置(ダウンロードしたファイルに「v2」などがついている場合は削除するなりして合わせる)
    • 例)C:\Users\ユーザ名\.vscode\php-cs-fixer.phar
  • 拡張機能追加:「PHP CS Fixer」
  • VSCodeの「設定」をJSON形式で開いて以下を追加
"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"php-cs-fixer.rules": "@PSR2",
"php-cs-fixer.formatHtml": true,
"php-cs-fixer.onsave": true,

※以上でエラーが出る場合はPHP実行環境を環境変数に登録する
 XAMPPの場合は「C:\xamppフォルダのパス\php」を環境変数に登録
 コマンドプロンプトで「php -v」と入力してバージョン番号が表示されればOK

  • 「PHP Intelephense」にも自動整形機能があるので「Shift」+「alt」+「f」押したときにどちらを使用するか選択

Java

Java Extension Pack:Java開発用拡張パック

Debugger for Java:デバッグ用拡張パック

GIT

Git History:GIT履歴を見やすく表示

GitLens