最近、Web制作のコーディングに利用するテキストエディタをVSCodeに変更したのですが、起動した後しばらく（10分くらい）は以下のような症状が発生して困っていました。
- EmmetでTabキーを押してから数秒待たないと展開されない
- SFTP（FTP連携）の設定をしているはずなのにファイルがアップロードされない
- そもそも全体的にラグい
特にEmmetの展開に毎回数秒待たされるのはストレスがマッハでありまして、ハッキリ言って使い物にならないレベル。
んで結論から言うと、今回の症状は「IntelliSense for CSS class names in HTML」というプラグインが原因ということが判明し、今は無事に解決しております。
以下から原因と対策について解説していきます。
IntelliSense for CSS class names in HTMLとは？
「IntelliSense for CSS class names in HTML」は、VSCodeにインストールすることができるプラグインの一つです。
「VSCode オススメプラグイン」で検索すると結構ヒットしますし、実際にボク自身クラス名をド忘れすることも有るので、念のためにインストールしていました。
IntelliSense for CSS class names in HTMLでVSCodeがラグくなる
VSCodeを立ち上げると同時にIntelliSense for CSS class names in HTMLがワークスペース内にあるCSSファイルからクラス情報の読み込みを始めます。
クラス情報を読み込んでいる間は、VSCodeの左下に「Looking for CSS classes in the workspace…(●%)」というメッセージが表示される。
※ (●%)の部分は読み込みの進捗が表示
上記のように、クラス情報を読み込んでいる間はVSCodeの動作が重くなり、冒頭にも記載した以下の症状が発生します。
- EmmetでTabキーを押してから数秒待たないと展開されない
- SFTP（FTP連携）の設定をしているはずなのにファイルがアップロードされない
- そもそも全体的にラグい
僕の環境では「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をアンインストールする
手っ取り早い方法はこれです。笑
私も普段は①で問題ないのですが、複数のフォルダを行き来しながら作業を行う案件も結構あるので、IntelliSense for CSS class names in HTMLの使用を諦めてアンインストールしました。
※アンインストールした所で大して困らないという事実も発覚。
VSCodeは神エディタ
今回はネットでオススメされているプラグインを手当り次第にインストールしたのが仇となり、原因の発見に時間を要しました。
やっぱこういうツールって、まず自分なりに最低限の機能で使ってみて「こういう機能があればもっと便利なのに！」と必要性を感じてから拡張していくのが良いですよね。
ツールを「育ててる感」にロマンを感じますし。笑
巷で良いと言われていても、自分には合わない物って結構ありますからね、VSCodeに限らず日常生活でも気をつけねば！と一人で反省した出来事でした。
ちなみに本件が解決してからのVSCodeの使用感は快適そのもので、テキストエディタで迷っている人にはオススメしたいですね！
それでは皆さんも良いコーディングライフを！