Sass（sass,scss）でクラス名を自動補完してくれるVSCodeのおすすめ拡張機能（プラグイン）

HTML / CSS

2021.11.10 2019.11.04

この記事は約3分で読めます。

Contents

長いクラス名を打つの、面倒くさい！間違えそう！

最近CSS設計を学び始めて、命名規則なども取り入れ始めました。

しかし、CSS設計に出てくるBEM（MindBEMding）という命名規則（クラス名をつける時のルール）ではクラス名が長くなりがちなのです…。

ネコーダー

長っ！

HTMLファイルを見ながらクラス名を打っていたのですが、長いだけではなく、似たような単語だったり、アンダースコアがあったり、ラジバンダリ…と、途中で面倒くさくなりました。

私

このままでは時間と手間がかかる上に、いつかは打ち間違えするで…。

私はCSSファイルをscssで書いているので、scssでも使える、クラス名を自動補完してくれる拡張機能（プラグイン）を調べました。

上手く機能させることができる拡張機能を見つけたのでご紹介します。

以前掲載していた「IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS 」は現在、VSCodeのマーケットに存在してません。リダイレクトでSCSS Everywhereのページに飛ぶので、こちらに統合されたようです。

早速導入してみましょう。

VSCodeの拡張機能検索で検索してインストールしてください。（下記リンクからでもいけます）

インストールしたら念のためVSCodeを再起動すればすぐに使えます。

設定でいろいろチェックできますが、公式サイトではfalse推奨が多かったので、基本は何もせずに使うのがよいと思います。

こんな感じで、クラス名を入力している途中で候補が表示されます。

Emmetと同じなので、
stgN→st-header__globalNav
といった感じで入力もできます。

公式サイトにEJSも対応していると書いてあります。Pugの表記が見あたりませんでしたが、Pugで試したところ、きちんと機能していました。

EJSで利用する場合もPugで利用する場合も、拡張機能の設定で以下のように追加しておいた方がいいかもしれません。

（こちらの拡張機能は2021年5月現在も使用可能です。）

なお、CSSだけでコーディングしている方はこちらの方が適していると思います。