VS Codeの初期段階に入れるべき拡張機能

2025年1月6日2025年1月12日

Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

ExtractionCssSelector

https://marketplace.visualstudio.com/items?itemName=gonishiduka1985.extractioncssselector

勘違いかも知れないが、MacのVS Codeではこの拡張機能を入れた記憶がないのにこの機能が使えたような気がして、WindowsのVS Codeを使い出したときにこの機能がなかったので、探したところ、拡張機能だった。MacのVS Codeは純正から入っていたのだろうか？　ちょっと記憶が曖昧。

この機能は本当に重要。html タグから css セレクターを生成する。これがないとCSSの記述がとても手間になる。
具体的には、htmlでclass名やid名を付けたコード、たとえばulタグ・liタグのひとかたまりを作成し、そこについてのCSSを記述しようとするとき、ul開始タグからul終了タグまでを選択し、右クリックしたときに「extractionCssSelector【filter1】」などという選択肢で出現してくれるので、それを選択することでコピーすると、画面右下に「cssセレクタをクリップボードにコピーしました」とメッセージが出る。
そしてCSSファイルを開いてペーストすると、コピーした領域に書いたclass名やid名が付いたセレクター状態で貼り付けられてくれる。
以下の感じで。これはコーディング作業においてものすごい時短になるし、無意味に時間を浪費することを削減してくれる非常に優れた機能。

.drawer-menu__items {

}

.drawer-menu__item {

}

.drawer-menu__link {

}

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

単に、ファイルをChromeでブラウジングするだけでいい気もするが

Live Sass Compiler

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

Prettier – Code formatter

本当にこれがベストか？検証必要

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

DartJS Sass Compiler and Sass Watcher

https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

説明がよさげ

https://moshashugyo.com/media/dart-sass

Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

Zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

HTML CSS Support

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

HTMLHint

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

htmltagwrap

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Color Highlight

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSSTree validator

https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree

プログラミング：PHP：Tips