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

HTML / CSS

2019.11.05 2019.11.04

スポンサードサーチ

Contents

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

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

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

ネコーダー

長っ！

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

私

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

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

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

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

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

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

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

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

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

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

スポンサードサーチ

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

CSS設計の勉強ではコチラの「はじめてのCSS設計」を使っています。

こちらの本ではコーディングする際にSassを使います。

またgulpなどの環境構築も必要ですので、CSS設計自体に集中して勉強したい場合は別の書籍を選んだほうがいいかもしれません…。

※ちなみに私はVSCodeでSassのコンパイルしているので、gulpは導入せずに進めています。

私もとりあえず手をつけ始めたので最後までやりますが^^;

終わったらコチラの緑の本も見てみようと思ってます。

ネコーダー

この本でもgulp使ってたらウケる。

CSS設計勉強している方、共に頑張りましょう！