vscodeにて、CSSの影響範囲一覧を確認する方法はありますか？

Question

cssを編集する際に、ワークスペース全体でどこまで影響があるかを簡易的に確認する方法はないでしょうか。

例えば下記cssの記述があったとして
クラス名がclass15であり、子要素にspanの記述がある箇所全てを
1つのhtmlファイル内に限らず、プロジェクト全体から
一覧で確認する方法、拡張機能などがあれば教えて頂ければと思います。

.class15 span {
    color: #F00;
}

ネットで探してみたところ、xpathという言葉に出会いましたが
vscode、HTML・CSSでは使用できなそうな気がしました。

（最悪、vscodeを使わない手段でも構いません。）

以上、宜しくお願い致します。

Comments

[m.ts10806]

「ない」と思うのですが、「ネットで探してみたところ」というのはどのような記事を読まれたのでしょうか。
xpath自体は例えばSeleniumなどで要素を指定するときにプログラム側から利用するような形はよく見ますが

[miyabi_pudding]

HTML、CSS、JavaScriptを包括的に管理するIDEが欲しい・・・。
DWでもあまり、そこまで包括的になってない気がする・・・。
って言えちゃうくらいないと思います。
強いて言えば、プロジェクト管理して、プロジェクト全体で、
"class15"を文字列検索、くらいでしょうか。

Answer 1

検索で対応できないでしょうか？
VSCode初心者のための、絶対覚えておきたい便利機能まとめ

VSCodeはファイル間の文字列検索と置換がすごく簡単にできます。

こちらの記事が分かりやすく、私自身も活用しています。

Answer 2

コマンドラインツールを自作するのはどうでしょうか。
以下のコードは npm i && npm start で実行できます。
find の後のドット(.)は、検索したいディレクトリを指定してください。

簡易的なものなので検索条件が固定で
ファイルパスと検索にかかったコードしか表示していませんが、
工夫次第でもっと使いやすくもできるかと思います。

javascript は、 xpath.js というファイル名で保存
json は、 package.json というファイル名で保存してください。
また、実行には node.js が必要になります。

const program = require('commander');
const fs = require('fs');
const parse5 = require('parse5');
const dom = require('xmldom').DOMParser;
const xpath = require('xpath');

program.parse(process.argv);
let filePaths = program.args;

for (let filePath of filePaths) {
  fs.readFile(filePath, (err, file) => {
    let document = parse5.parse(file.toString());
    let html = parse5.serialize(document);
    let doc = new dom({ errorHandler: false }).parseFromString(html, 'text/html');
    let select = xpath.useNamespaces({ 'x': 'http://www.w3.org/1999/xhtml' });

    let nodes = select('//x:*[contains(@class,"class15")]/descendant-or-self::node()/descendant::*[name()="span"]', doc);
    for (let node of nodes) {
      console.log(filePath + ': ' + node);
    }
  });
}

{
  "name": "xpath",
  "version": "1.0.0",
  "description": "",
  "main": "xpath.js",
  "scripts": {
    "start": "find . -type f -name '*.html' | xargs node xpath.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "commander": "^2.20.0",
    "parse5": "^5.1.0",
    "xmldom": "^0.1.27",
    "xpath": "0.0.27"
  }
}