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

HTML / CSS

スポンサードサーチ


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

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

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

ネコーダー
ネコーダー

長っ!

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

 

私

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

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

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

VSCode拡張機能(プラグイン)「IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS 」

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

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

IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS

設定方法

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

  • 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」

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

IntelliSense for CSS class names in HTML

書籍「はじめてのCSS設計」ではSassが必須

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

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

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

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


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

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

ネコーダー
ネコーダー

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

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

コメント

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