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

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を再起動すればすぐに使えます。

~~インストールできたら設定で、~~

~~の項目にチェックを入れましょう。~~

~~Enable Emmet Supportはどちらでも大丈夫です。（私はお試しで入れてみましたが、VSCodeデフォルトのEmmetと競合するかも…と思い、このあと外しました）~~

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

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

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

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