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

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

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

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

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

ネコーダー
ネコーダー

長っ!

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

 

私

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

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

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

VSCode拡張機能(プラグイン)「SCSS Everywhere」

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

 

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

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

SCSS Everywhere - Visual Studio Marketplace
Extension for Visual Studio Code - '.class' and '#id' completion for HTML, Svelte, Latte, Slim, Liquid, TSX/JSX, Haml, Elixir, Smarty, PHP, ERB, Javascript, CSS...

設定方法

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

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

  • Enable Find Usage
  • Enable SCSS Find Usage

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

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

機能する様子

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

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

cssだけの方には「IntelliSense for CSS class names in HTML」

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

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

IntelliSense for CSS class names in HTML

コメント

タイトルとURLをコピーしました