Webデザインを本格的に学び初めて、テキストエディタもBrackets、Atom、Sublime Text、Visual Studio Code(VSCode)などをそれぞれ使ってみました。
現在はVSCodeとSublime Textを主に使用している訳ですが、今回は以前から気になっていたSublime TextのCSSでのclass名の自動補完が機能しない件について、対処法を紹介したいと思います。
CSSでのclass名自動補完
![vscodeは自動補完される](https://yutolog.com/wp-content/uploads/2018/06/706728181f53899edb47bbb7ba82c6ef.png)
VSCodeではデフォルトでHTMLファイルで使用されているclass名をcssで自動補完し、候補として表示されます。
Sublime TextではAll Autocompleteというパッケージがその機能に当たります。
![補完されない](https://yutolog.com/wp-content/uploads/2018/04/9cc201c8383b06504b15cfa7d479242b.png)
しかし、何故かSublime Text3ではその機能がCSSでは正常に動作しない。というわけで、対象法を紹介したいと思います。ちなみに僕の環境はmacOSです。
1. PackageResourceViewerをインストール
![PackageResourceViewerをインストールする](https://yutolog.com/wp-content/uploads/2018/06/7445de6bdac49aad14e4fb213685f949.png)
まず、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>の部分を以下のように書き換えます。
書き換えたら保存してください。
無事自動補完されるように
![本来はクラス名のコード補完がさるれはず](https://yutolog.com/wp-content/uploads/2018/06/5091a87c63e8accbad05fbbf6692cadf.png)
問題なく書き換えが完了していれば.や#と入力してclass名が自動補完されるようになっているかと思います。これでSublime Textでも作業が少しスムーズになりそうです。
同じように悩んでいる方の参考になれば幸いです。