Zenn
Open8

VSCode拡張メモ

VS Code
よしよし

汎用

Japanese Language Pack for Visual Studio Code

ms-ceintl.vscode-language-pack-ja

日本語化パック。

vscode-icons

vscode-icons-team.vscode-icons

ファイルアイコンセット。ここら辺はお好みで。

Bracket Pair Colorizer 2

coenraads.bracket-pair-colorizer-2

開始括弧と閉じ括弧の組み合わせが判別しやすいよう、色を付ける拡張。
1系と2系があるうちの2系。

※VSCode 本体に機能が実装されたので、そちらに移行。

Trailing Spaces

shardulm94.trailing-spaces

スペースを赤で誇張し、見落としにくくする拡張。

SVG Viewer

cssho.vscode-svgviewer

SVG ファイルのビューワー

EditorConfig for VS Code

editorconfig.editorconfig

VSCode 基本エディタ設定より .editorconfig ファイル設定を優先して使うようにする拡張。

Prettier - Code formatter

esbenp.prettier-vscode
コードフォーマッタ拡張。
自動整形が非常に役立つが、各種言語側のコードフォーマッタとの連携に注意して扱う必要がある。

デフォルトでは以下のファイルに対応

  • JavaScript
  • TypeScriot
  • Flow
  • JSX
  • JSON
  • CSS
  • SCSS
  • Less
  • HTML
  • Vue
  • Angular
  • GraphQL
  • Markdown
  • YAML

コミュニティにより、他言語に対応したものも公開されている。

Color Highlight

naumovs.color-highlight

カラーコードの色を可視化する拡張。
.css や .tsx など、デフォルトで表示されるファイル形式もあるが、.ts ファイルは対応していないようだったのでいれた。
可視化の形式は設定で変更できる（underline がちょうどいいかも）

よしよし

リモート

Remote Development

ms-vscode-remote.vscode-remote-extensionpack

後述の3つの拡張をまとめたパック。

Remote - WSL

ms-vscode-remote.remote-wsl

WSL に接続して VSCode が使える拡張。

Remote - Containers

ms-vscode-remote.remote-containers

コンテナに接続して VSCode が使える拡張。

Remote - SSH

ms-vscode-remote.remote-ssh

外部サーバなどに SSH 接続して VSCode が使える拡張。

よしよし

設計

Draw.io Integration

hediet.vscode-drawio

VSCode 上で Draw.io を扱えるようになる拡張。
注意点として Google Drive 版と比較すると、使用できるアイコンが異なる。
（技術スタックのアイコン等は Google Drive 版の方が圧倒的に多い）

ERD Editor

dineug.vuerd-vscode

VSCode 上で、ER 図を描ける拡張。
作成した ER 図の実体は JSON ファイルのため、Git 管理との相性が良い。

よしよし

ドキュメント

Markdown All in One

yzhang.markdown-all-in-one

マークダウンに関する機能拡張。

vscode-textlint

taichi.vscode-textlint

VSCode エディタ上で Textlint を動かすための拡張。
Textlint 本体や、そのルールセットについては、別途 yarn なり npm なりでインストールする。

Marp for VS Code

marp-team.marp-vscode

マークダウンでスライドが作れる拡張。

よしよし

JavaScript・TypeScript

ESlint

dbaeumer.vscode-eslint

VSCode エディタ上で ESLint を動かすための拡張。
ESLint 本体や、そのルール拡張については、別途 yarn なり npm なりでインストールする。

Fullstack React/React Native snippets

walter-ribeiro.full-react-snippets

React、React Native に関するスニペット群の拡張。

vscode-styled-components

styled-components.vscode-styled-components

2021/12/9以前はこちらだった（公式に取り込まれたっぽい）
jpoissonnier.vscode-styled-components

styled-components での開発補助拡張（emotion でも問題なく使える）
styled-components 形式コードの、シンタックスハイライトや入力補完を追加する。

よしよし

PHP

PHP Intelephense

bmewburn.vscode-intelephense-client

コード補完、コード解析拡張。
同様のものとして php-intellisense があるが、こちらの方が精度が高いらしい。

Laravel の場合、この拡張をいれるだけではファザードやモデルのコード補完が動作しないので、ide-helper で生成するヘルパーファイルと組み合わせて使う。

$ composer require --dev barryvdh/laravel-ide-helper

ヘルパーファイル生成時は、必ず$ php artisan clear-compiledを先に行うこと。

$ php artisan clear-compiled

$ php artisan ide-helper:generate
$ php artisan ide-helper:models --nowrite

それぞれ以下のファイルが自動生成される（このファイルは.gitignoreに追加する）
$ php artisan ide-helper:generate → _ide_helper.php
$ php artisan ide-helper:models --nowrite → _ide_helper_models.php

PHP Sniffer & Beautifier

valeryanm.vscode-phpsab

VSCode エディタ上で phpcs（コーディング規約チェック）と phpcbf（コードフォーマッタ）を動かすための拡張。

php_codesniffer 本体は別途 composer でインストールする（これに phpcs、phpcbf ともに含まれている）

$ composer require --dev squizlabs/php_codesniffer

ルール定義ファイルの作成例

phpcs.xml
<?xml version="1.0"?>
<ruleset name="PSR12/Laravel">
    <description>PSR12 compliant rules and settings for Laravel</description>

    <arg name="extensions" value="php" />

    <!-- 適用コーディング規約の指定 -->
    <rule ref="PSR12" />

    <!-- 出力に色を適用 -->
    <arg name="colors" />

    <!-- オプション p:進捗表示  s:エラー表示時にルールを表示 -->
    <arg value="ps" />

    <!-- 除外ディレクトリ -->
    <exclude-pattern>/bootstrap/</exclude-pattern>
    <exclude-pattern>/config/</exclude-pattern>
    <exclude-pattern>/database/</exclude-pattern>
    <exclude-pattern>/node_modules/</exclude-pattern>
    <exclude-pattern>/public/</exclude-pattern>
    <exclude-pattern>/storage/</exclude-pattern>
    <exclude-pattern>/resources/</exclude-pattern>
    <exclude-pattern>/vendor/</exclude-pattern>
    <exclude-pattern>/server.php</exclude-pattern>
    <exclude-pattern>/app/Console/Kernel.php</exclude-pattern>
    <exclude-pattern>/tests/CreatesApplication.php</exclude-pattern>
    <exclude-pattern>/_ide_helper_models.php</exclude-pattern>
    <exclude-pattern>/_ide_helper.php</exclude-pattern>
    <exclude-pattern>/phpstorm.meta.php</exclude-pattern>
</ruleset>

VSCode の設定ファイル（.vscode/settings.json や ワークスペースファイルの settings）に追記

"phpsab.standard": "src/phpcs.xml",
"phpsab.composerJsonPath": "src/composer.json",
"phpsab.snifferMode": "onType",

phpsab.standardは適用するルール。ルール定義ファイルを作っておいて、それを指定するとよい。
phpsab.composerJsonPathはルート階層に Laravel のソースがない時のみ設定。
phpsab.snifferModeは静的解析をどのタイミングで動作させるか。

なお、全体の editor.defaultFormatter に Prettier 拡張を適用している場合は、バッティングするのか phpcbf が動作しなくなるため、PHP だけこの拡張を使うように設定する。

"[php]": {
      "editor.defaultFormatter": "valeryanm.vscode-phpsab",
      "editor.formatOnSave": true
    },
よしよし

HTML・CSS

Auto Rename Tag

formulahendry.auto-rename-tag

HTML タグ名を変更する際、開始タグを変更するだけで閉じタグも自動で変更してくれる拡張。

Autoprefixer

mrmlnc.vscode-autoprefixer

自動で CSS にベンダープレフィックスを付与したものを追加してくれる拡張。
一部のプロパティには対応していない？

※Vite と併用する際は、VSCode 拡張としては使わず、postcss のライブラリとして使用する。

ファイル保存時に動作させるときは、エディタ設定に追記

"autoprefixer.formatOnSave": true

IntelliSense for CSS class names in HTML

zignd.html-css-class-completion

CSS ファイルで定義しているクラスを入力補完してくれる拡張。
導入しているライブラリなどの外部ファイルにも対応。
jsx(tsx) にも対応。

エディタ下部に CSS 情報のキャッシュのアイコン（⚡）が表示されるので、それを押して CSS 情報を反映。

Emmet でも入力補完させるにはエディタ設定に追記

"html-css-class-completion.enableEmmetSupport": true

HTMLHint

mkaufman.htmlhint

HTML の構文チェック拡張。
類似のものとして W3C Validator もあるのだが、そちらは JDK を別途入れる必要があるのでこちらの方が導入が楽。

stylelint

stylelint.vscode-stylelint

StyleLint の VSCode 拡張。
ESLint 本体や、そのルール拡張については、別途 yarn なり npm なりでインストールする。

styled-components や emotion でも使用可能。

VSCode がもともと持っている構文チェックとバッティングするので、そちらはオフにしたうえで、ファイル保存時に動作するようにしておくとよい。

"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
},

Live Server

ritwickdey.liveserver

ローカルサーバを立ち上げてくれる拡張。
エディタ下部に起動切り替え表示が出るので、そこから起動。
ファイル保存とともに反映されるホットリロードに対応。