@matsushita_knzposted at 2022-11-15

Bootstrapなどの、<div class = "ここ"></>のコード補完について

Q&A

解決したいこと

Bootstrapを使ったり、html/cssをコーディングする際のコード補完(インテリセンス？)を便利に使いたい

内容）
コード補完について、Vscodeで、clと打てば、VScode標準の機能でclassと補完してしてくれるのですが、
classで指定する""ダブルクォーテーションの中も補完してほしいと思い、下記qiitaなどを参考にアドオンを入れたのですが、
https://qiita.com/84zume/items/476a29264fdc98d98201
普通にコードを打っていると、赤波線のように、範囲選択のようになってしまい(打ち終わるまで)、うまく補完してくれません。
矢印キーなどでカーソルをずらす、範囲選択を解除すると補完一覧が出てきてくれます。

発生している問題

自分で試したこと

Vscodeの設定をいろいろ見てみましたが、それっぽい場所を見つけられなかった。
仕方ないことなのでしょうか

0 likes

2Answer

@take_me posted at 2022-11-16

恐らく現在導入した拡張機能はCDNで読み込んだCSSに対する補完を提供していません。
IntelliSense for CSS class names in HTML が提供するのはあくまでもローカルに存在するCSSファイルに対してなどですから、当然ローカルに存在しないCDNで読み込んだCSSの補完を提供しません。

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
↑こちらの拡張機能だとCDNも読み込んでくれるようです。
日本語の記事: https://webrandum.net/vscode-plugin-html-css-support/

0Like

Comments

@matsushita_knz
Questioner
回答ありがとうございます。記載された拡張機能も入れましたが、そもそも拡張機能が原因ではなく、Vscodeの設定がなにかあると思っている(ないかもしれませんが)ので全然解決には至りませんでした。ここの質問者コメントに画像を添付できない感じなので、もう少し詳しい画像を下に投稿させて頂きます。
@take_me
記事を読む限り、settings.jsonに下記のように追記すれば良いと見受けれらますが、そちらは試しましたか？

```settings.json
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css",

],
}
```
@matsushita_knz
Questioner
返信遅くなりました。
Qiitaの機械学習によりスパム判定されており、書き込み制限の状態になっていました。

現状ですが、コード補完自体は問題なく動作しますが、薄い範囲選択状態、ダブルクォーテーションの間だと１枚目の画像のように一覧がでません。
@take_me
それは恐らく現状の拡張機能の実装の限界です。

[ここ](https://github.com/ecmel/vscode-html-css/blob/fb323242d951bf90190327823beaf6968f5a5ac9/src/completion.ts#L267) が補完を提供する際のエントリーポイントです。サッと眺めた感じ、カーソルの位置を基準に判定しているっぽいので、選択していてもカーソルの位置が悪いと補完できないものかと思われます。

@matsushita_knz posted at 2022-11-16