Webデザインを本格的に学び初めて、テキストエディタもBrackets、Atom、Sublime Text、Visual Studio Code(VSCode)などをそれぞれ使ってみました。
現在はVSCodeとSublime Textを主に使用している訳ですが、今回は以前から気になっていたSublime TextのCSSでのclass名の自動補完が機能しない件について、対処法を紹介したいと思います。
CSSでのclass名自動補完
VSCodeではデフォルトでHTMLファイルで使用されているclass名をcssで自動補完し、候補として表示されます。
Sublime TextではAll Autocompleteというパッケージがその機能に当たります。
しかし、何故かSublime Text3ではその機能がCSSでは正常に動作しない。というわけで、対象法を紹介したいと思います。ちなみに僕の環境はmacOSです。
1. 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でも作業が少しスムーズになりそうです。
同じように悩んでいる方の参考になれば幸いです。
