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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 268

sk-azuki

score 6

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

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

.class15 span {
    color: #F00;
}


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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/06/13 21:50

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

    キャンセル

  • miyabi_takatsuk

    2019/06/14 10:22

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

    キャンセル

回答 1

0

コマンドラインツールを自作するのはどうでしょうか。
以下のコードは 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"
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる