Sublime Text3でclass名の自動補完が機能しない件についての対処法


Webデザインを本格的に学び初めて、テキストエディタもBrackets、Atom、Sublime Text、Visual Studio Code(VSCode)などをそれぞれ使ってみました。

現在はVSCodeとSublime Textを主に使用している訳ですが、今回は以前から気になっていたSublime TextのCSSでのclass名の自動補完が機能しない件について、対処法を紹介したいと思います。

CSSでのclass名自動補完

vscodeは自動補完される

VSCodeではデフォルトでHTMLファイルで使用されているclass名をcssで自動補完し、候補として表示されます。

Sublime TextではAll Autocompleteというパッケージがその機能に当たります。

補完されない

しかし、何故かSublime Text3ではその機能がCSSでは正常に動作しない。というわけで、対象法を紹介したいと思います。ちなみに僕の環境はmacOSです。

1. PackageResourceViewerをインストール

PackageResourceViewerをインストールする

まず、shift+command+PでPackage Controlを呼び出し、「Install」と入力して候補に表示される「Package Congrol: Install Package」を選択ます。続いて、「PackageResourceViewer」と検索してインストールします。

2. CSS/css_completions.pyを書き換え

インストールしたら、Package Controlから「PackageResourceViewer: Open Resource」を実行し、【CSS/css_completions.py】にアクセスします。そして、467行目にあるelse:を消去して以下のように書き換えます。

3. CSS/Completion Rules.tmPreferencesを書き換え

続いて「PackageResourceViewer: Open Resource」を実行して【CSS/Completion Rules.tmPreferences】を開きます。9行目にある<string>.*</string>の部分を以下のように書き換えます。

書き換えたら保存してください。

無事自動補完されるように

本来はクラス名のコード補完がさるれはず

問題なく書き換えが完了していれば.や#と入力してclass名が自動補完されるようになっているかと思います。これでSublime Textでも作業が少しスムーズになりそうです。

同じように悩んでいる方の参考になれば幸いです。