Q&A
ビルトイン拡張の CSS Language Features などは有効になっていますか？
vscodeで色見本を表示させたい.
CSSの言語モードをCSSで固定させたい.
vscoeのバージョン
$ code --version 1.63.1 fe719cd3e5825bf14e14182fddeb88ee8daf044f x64
参考にした対策
https://teratail.com/questions/302037
npx create-react-app project直後、vscodeで
App.cssやindex.cssを開くと#の直前の色見本が表示されません。
言語モード選択がPostCSSと認識されていました。
ステータスバー欄をクリックし、言語モードの選択モードにてCSSに設定しました。
色見本の四角が表示されました。
しかし、ファイルを閉じて再度開くとPostCSSに戻ってしまいます。
ワークスペースのsettings.jsonを以下の記述のみにしてみました。
症状は改善しません。
json
1{ 2 "editor.colorDecorators": true, 3 "files.associations": { 4 "*.css": "css" 5 } 6}
React.jsだけではなく、HTML+CSSのプロジェクトでも
同じ現象です。
どのような修正を行えば
CSSの色見本を表示できますか？
言語モードをCSSに固定できますか？
よろしくお願いします。
その後
vscodeの更新通知があったので適用しました。
$ code --version 1.63.2 899d46d82c4c95423fb7e10e68eba52050e30ba3 x64
また以下の記述を参考にsettings.jsonを次のように変更しました。
https://github.com/microsoft/vscode/issues/17419
json
1{ 2 "editor.colorDecorators": true, 3 "files.associations": { 4 "*.css": "css", 5 "*.postcss": "css" 6 } 7}
問題の状況は改善しておりません。
CSS Language Features は、これです。
上記のように「無効にする」状態になっております。
また、ワークスペースの settings.json で試しているということは、他のワークスペースでは問題が発生していないということでいいですか？
いいえ。
HTML+CSSのみのプロジェクトやReact.jsのプロジェクトで同じ現象が発生しています。
ユーザー設定でsettings.jsonを編集したことがないです。
また以下のURL
https://dev.classmethod.jp/articles/vscode-automatic-language-detection-disable/
に従い自動検出設定を無効化しましたが問題の状況は改善しておりません。
現在のワークスペースsetting.jsonの設定
json
1{ 2 "editor.colorDecorators": true, 3 "files.associations": { 4 "*.css": "css", 5 "*.postcss": "css" 6 }, 7 "workbench.editor.languageDetection": false 8}
Tailwind CSS IntelliSenseプラグインを無効化した状態で
Tailwindを用いたjsxファイルでは色見本が表示されます。
この時の言語設定はreactと認識されています。
@Lhankor_Mhy
> ビルトイン拡張の CSS Language Features などは有効になっていますか？
vscodeのGUI設定画面にてFeaturesで検索しましたが
CSS Language Features 項目が見つかりません。
どうすればよいでしょうか？
Featuresで検索するとCSSの文字を含んだ以下の項目がありました。
Tailwind CSS: Include Languages
この項目は値はなにも設定してありません。
CSS Language Features は、これです。
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e7334147e28d29c972ebb5a4d3681fad.png
また、ワークスペースの settings.json で試しているということは、他のワークスペースでは問題が発生していないということでいいですか？
@hankor_Mhy
ありがとうございます。
画像付きでの返答方法がわからないため質問エリアにわかる範囲のことを記入いたしました。
ユーザーの settings.json を確認してみるのはどうでしょうか？
@Lhankor_Mhy
Ubuntuを使っているので
`$HOME/.config/Code/User/settings.json`を開いたら80行近くの記述がありました。
すべてコメントしCSSファイルを含むプロジェクトで確認しましたが状況に変化はありません。
確認の際にはVSCodeを再起動しました。PCの再起動しました。
CSSファイルを含むプロジェクトのワークスペースsettings.jsonを全削除や以下の記述にも
試しましたが状況に変化はありません。
```json
{
"editor.colorDecorators": true,
"files.associations": {
"*.css": "css",
"*.postcss": "css"
},
"workbench.editor.languageDetection": false
}
```
当方で試したところ、そちらの設定はグレーアウトしておりマウスホバーで以下のメッセージが表示されました。
This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.
マルチルートだからですかね……？
なお、そのままでは設定は有効にならなかったため、.workspace ファイルに移してみたところ有効になりました。
@Lhankor_Mhy
幾度となくアドバイスありがとうございます。
言語モードの選択モードにてCSSに設定後、
ファイルを閉じないという回避方法で様子を観てみます。
あなたの回答
tips
プレビュー
