Language-tools: 未使用のCSSハイライトは常に台無しになっています

作成日 2020年09月14日  ·  14コメント  ·  ソース: sveltejs/language-tools

バグを説明する
SCSSスタイルのブロックを使用すると、未使用のCSSの波状の黄色い線が適切な場所に表示されません。

image

.introductionクラスを強調表示する必要がありますが、代わりにheightプロパティ(または最初に定義されたスタイルの最後のプロパティ)を強調表示します。

lang属性のない通常のCSSブロックに戻すと、正常に機能します。

再現するには

  1. いくつかの要素を使用して単純なコンポーネントを作成します
  2. SCSS関数またはシンタックスシュガーなしでいくつかの使用済みおよび未使用のバニラCSSを追加します
  3. <style><style lang="scss">

予想される行動
通常の<style>ブロックの場合と同じように機能します

スクリーンショット
上記を参照

システム(以下の情報を入力してください):

  • OS:Windows
  • IDE:VScode
  • プラグイン/パッケージ:「SvelteforVSCode」

追加のコンテキスト
スクリーンショットの作成時に、追加のプラグインや拡張機能は有効になりませんでした。 念のため、vscodeを再起動しました。

bug

最も参考になるコメント

これは、 svelte-preprocessバージョン4.6.1で修正する必要があります。

全てのコメント14件

この行に波線を与えたコードスニペットを投稿していただけますか?

この行に波線を与えたコードスニペットを投稿していただけますか?

使用するコードは関係ありません。 それはすぐに私の側で壊れ始めます。 コードが多いほど、悪化します。

これが簡単なREPLです:
https://svelte.dev/repl/97a01882d3444d77ad2a62480e310921?version=3.25.0

私のIDEでは、SCSS属性を使用します
image

属性なし:
image

ありがとう。 線が少しずれているかどうかを確認する必要がありますが、一般的にはソースマップに依存しているため、多くのことができないのではないかと心配しています。

SCSSからCSSへの変換中に生成されるソースマップ。 コードをSvelteコンパイラに渡す前にこれを行う必要があります(未使用の警告が表示されます)。これは、CSSしか処理できないためです。

ソースマップは自分で修正できるものですか? それとも、それは洗練された前処理の問題ですか? 巻き上げる?
私にとって幸運なことに、私は自分が書いているcssと削除しているhtmlを知っているので、今のところこれに対処することができます。 私がしなければならない場合に備えて、これらをオフにするための簡単な方法はありますか?

https://github.com/sveltejs/svelte/pull/5015プリプロセッサのソースマップをサポートするには、マージする必要があります

ソースマップは自分で修正できるものですか? それとも、それは洗練された前処理の問題ですか? 巻き上げる?

scssコンパイラ( node-sass / sass 、使用しているものによって異なります)はソースマップを生成します。

私にとって幸運なことに、私は自分が書いているcssと削除しているhtmlを知っているので、今のところこれに対処することができます。 私がしなければならない場合に備えて、これらをオフにするための簡単な方法はありますか?

一部の警告をグローバルにオフにする場合は、このオプションを使用してオフにでき

プリプロセッサソースマップをサポートするには、 sveltejs / svelte#5015をマージする必要があります

言語ツール用ではありません。現時点では、自分でマッピングを行っています(ただし、これが実現すると、大量のコードを破棄できることを願っています)。

プリプロセッサソースマップをサポートするには、 sveltejs / svelte#5015をマージする必要があります

比較的人気のあるプルリクエストのようです。 まだマージされていない理由として知られているものはありますか?

それは私たちのレーダーで高いです。 しかし、まだマージ可能な状態ではありません。 コメントを残しました。

確認しましたが、SCSSのみを使用した場合に発生するラインオフセットを再現できませんでした。 PostCSSも使用していますか? PostCSSも使用している場合にのみ複製できます。 もしそうなら、その理由はPostCSSからのソースマップが欠落していることです。 私はこの問題svelte-preprocessで開きました。

返事が遅くなってごめん。 https://www.npmjs.com/package/postcss-load-configがインストールされてい

つまり、これはpostcssを使用していることを意味するので、 postcss: trueはプリプロセッサ構成の一部ですか? その場合、これはsvelte-preprocess内の問題が修正された後に修正されます。

つまり、これはpostcssを使用していることを意味するので、 postcss: trueはプリプロセッサ構成の一部ですか?

postcssがデフォルトでtrueに設定されている場合、はい。

もしそうなら、これはsvelte-preprocess内の問題が修正された後に修正されます。

👀

これは、 svelte-preprocessバージョン4.6.1で修正する必要があります。

このページは役に立ちましたか?
0 / 5 - 0 評価