VSCodeで「Looking for CSS classes in the workspace」に悩んだ話

最近、Web制作のコーディングに利用するテキストエディタをVSCodeに変更したのですが、起動した後しばらく（10分くらい）は以下のような症状が発生して困っていました。

特にEmmetの展開に毎回数秒待たされるのはストレスがマッハでありまして、ハッキリ言って使い物にならないレベル。

んで結論から言うと、今回の症状は「IntelliSense for CSS class names in HTML」というプラグインが原因ということが判明し、今は無事に解決しております。

以下から原因と対策について解説していきます。

Contents

IntelliSense for CSS class names in HTMLとは？

「IntelliSense for CSS class names in HTML」は、VSCodeにインストールすることができるプラグインの一つです。

IntelliSense for CSS class names in HTMLの機能

VSCcodeのワークスペースにあるCSSファイル内からクラス名を読み込み、HTML上でクラスを指定する際にクラス名の候補を出してくれる。

「VSCode　オススメプラグイン」で検索すると結構ヒットしますし、実際にボク自身クラス名をド忘れすることも有るので、念のためにインストールしていました。

VSCodeを立ち上げると同時にIntelliSense for CSS class names in HTMLがワークスペース内にあるCSSファイルからクラス情報の読み込みを始めます。

クラス情報を読み込んでいる間は、VSCodeの左下に「Looking for CSS classes in the workspace…(●%)」というメッセージが表示される。
※ (●%)の部分は読み込みの進捗が表示

上記のように、クラス情報を読み込んでいる間はVSCodeの動作が重くなり、冒頭にも記載した以下の症状が発生します。

僕の環境では「Looking for CSS classes in the workspace…(●%)」のメッセージが消えるまで10分近く掛かり、そのあいだ作業効率が大幅にダウン・・・。

VSCodeの動作を重くしないための対策は以下の2つです。

IntelliSense for CSS class names in HTMLは、ワークスペース上に存在する全てのCSSファイルのクラス名を読み込みます。

複数のフォルダをワークスペース上に置いていると、それだけファイルの読み込み時間が延びてしまいますので、作業に無関係なフォルダはワークスペースに置かないようにしましょう。

手っ取り早い方法はこれです。笑

私も普段は①で問題ないのですが、複数のフォルダを行き来しながら作業を行う案件も結構あるので、IntelliSense for CSS class names in HTMLの使用を諦めてアンインストールしました。

※アンインストールした所で大して困らないという事実も発覚。

今回はネットでオススメされているプラグインを手当り次第にインストールしたのが仇となり、原因の発見に時間を要しました。

やっぱこういうツールって、まず自分なりに最低限の機能で使ってみて「こういう機能があればもっと便利なのに！」と必要性を感じてから拡張していくのが良いですよね。

ツールを「育ててる感」にロマンを感じますし。笑

巷で良いと言われていても、自分には合わない物って結構ありますからね、VSCodeに限らず日常生活でも気をつけねば！と一人で反省した出来事でした。

ちなみに本件が解決してからのVSCodeの使用感は快適そのもので、テキストエディタで迷っている人にはオススメしたいですね！

それでは皆さんも良いコーディングライフを！