Language-tools: スタイルタグの `lang`属性がSvelteベータ版からの警告をトリガーします

これは私にも起こります。 src="./xxx.scss"を介してインポートされたスタイルの言語を指す言語または詳細を無効にすると、システムはページの最初でそれについて文句を言うのをやめます。

これはscssで発生するため、このようなノード-sassの問題であると確信しています。

VSCodeで[出力]-> [Svelte]を開き（下部に表示され、端末もあります）、エラーを再現して、出力をここに貼り付けてください。

おそらく関連：＃32

Node-sassをローカルおよびグローバルで何も行わなかったため、何度かリロードした後でも結果は変わりませんでした。

これはSvelteの出力です（更新されたバージョンのバグではプロジェクトをアップグレードできないため、3.20.1があることに注意してください。これも報告されています）

loading config for /PATH/TO/PROJECT/src/Button.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/node_modules/@smui/common/H6.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler

リンティングSCSSは関連している可能性があり、インラインSCSSを使用していたときにも使用していましたが、補足として、これはエラーではなく、ファイルの先頭にある警告です。 SCSSを解析する必要はありません。

私はこのhtmlxparser.tsに関連するものだと思います

@dummdidummこのバグを投稿する前に実際にその出力を確認しましたが、

これはscssで発生するため、このようなノード-sassの問題であると確信しています。

私はそれが事実であることに懐疑的ですが、私は調査して、私が見つけたものを確認します。

@Egnusの出力から、 svelte.config.jsが見つかったと推測できます。 構成が見つからないが必要な場合（ lang / typeがscript / style ）、 No svelte.config.js found but one is neededメッセージログに表示されます。
また、前処理が行われていないため、 svelte2tsxのhtmlxparserとは何の関係もありません。 svelteコンパイラから診断を取得しようとしているときにます。

Svelteの出力を確認したときに取得したログは次のとおりです（パスは匿名化されています。VSCodeで表示されたときのスラッシュ）。

Initialize language server at c:/PATH/TO/PROJECT/
Initialize new ts service at  
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler

@EgnusのVSCode出力とほぼ同じですが、 Initializing new ts service at追加を除いて。 それが結果であるかどうかはわかりませんが、メッセージ間のスラッシュの交代は私には際立っています。

また、node-sassが私のバージョンのWindowsおよびNode.jsと互換性があることを再確認しました。 node-sass v4.14.1（現時点での最新リリース）は、私のバージョンのノードv13.7と互換性があります。

もう一度確認していただけますか？ その領域でより多くのログを記録する更新をプッシュし、ユーザー向けのエラーメッセージも少し更新しました。

上記のコミットを参照していますか？ もしそうなら、私はコミットがマージされた後にチェックし、チェックする前に新しいアップデートをインストールしました。

拡張機能は毎晩、前回は約8時間前に公開されるため、14時間前のログは「古い」バージョンである可能性があります。

ああ、なるほど。 次にできるときに新しいログを取得します。

数時間前にもチェックします

うーん面白い、あなたは正しかった：

Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (/PATH/TO/PROJECT/node_modules/svelte-preprocess/dist/utils.js:1:2844)

svelte.config.jsが使用されていない理由を確認して戻ってきます

さて、 svelte-preprocessはVSCodeによってグローバルでもローカルでもnode-sass見つけられないようです。 同じRollupConfigが次のsvelte.config.jsインポートしますが。

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['x', 'y', 'z'],
    },
    typescript: {
      extensions: ['x', 'y', 'z'],
      includePaths: ['x', 'y', 'z'],
    },
  }),
  // ...other svelte options
};

// The following alternative should make SCSS to work but nothing else will. Why the auto preprocess does not work here?

// import sass from 'node-sass';
// module.exports = {
//   preprocess: {
//     style: async ({ content, attributes }) => {
//       if (attributes.type !== 'text/scss') {
//         return;
//       }

//       const result = await sass.renderSync({
//         data: content,
//         sourceMap: 'style.css.map',
//         omitSourceMapUrl: true,
//       });

//       return {
//         code: result.css.toString('utf8'),
//         map: result.map.toString('utf8'),
//       };
//     },
//   },
// };

Svelte Betaの問題である可能性がありますか？ 前処理を自分で作成する以外に、この時点でノード-sassのパスをVSCodeに伝える方法がわかりません。

私はこれをマスターで取得していますが、コンピューターにnode-sassがインストールされていないと思います。 Typescriptは機能しています（!!!）これはかなり厄介なリント警告です。

.
├── home.svelte
├── node_modules
│   ├── <strong i="6">@types</strong>
│   ├── detect-indent
│   ├── min-indent
│   ├── strip-indent
│   └── svelte-preprocess
├── package-lock.json
├── package.json
└── svelte.config.js

home.svelte

<script lang="typescript">
  export let title: string = "10";
</script>

<style>
  h2 {
    background: blue;
  }
</style>

<html lang="en">
  <h2>{parseInt(title, 10)}</h2>
</html>

svelte.config.js

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess(),
}

これを絞り込むために、さらに何かをテストしてください。

また、❤️ svelte.config.jsを削除して、いくつかの一般的な構成を焼き付けます。これを実現するためにPRを開いてください。 編集、私は_think_https ：//github.com/sveltejs/language-tools/pull/87これを実現させました👏

mm不思議な@matthewmueller 、拡張機能の

あはは！ ポインタをありがとう！

さて、これは私がただ遊んでいて、実際のアプリでこれをまだテストしていなかったことを明らかにします😆

後から明らかな2つの暗黙の依存関係がありますが、警告はあなたを迷わせます：

1. エラー：モジュール 'svelte /package.json'が見つかりません
2. エラー：[svelte-preprocess]「typescript」の変換中にエラーが発生しました。 モジュール 'typescript'が見つかりません

VSCodeがTypescriptで機能するのと同じように、フォールバックTypescriptとSvelteを提供して、人々がすばやく遊んでくれるようにするといいと思います。

これを焼き付けることについて：私もこれについて考えましたが、svelteコミュニティはすでにカスタムプリプロセッサに慣れすぎているのではないかと思います。 これらすべてをプラグイン内に持つとしたら、これはnode-sass、less、babelなどの依存関係を追加してインストールすることを意味します。これはプラグインを膨らませます。

特定の問題に戻ると、2つの問題があります。

1. モジュールの解像度が台無しになることがあります。 なぜ調査が必要なのですか。 また、yarnのpnpなどのセットアップが機能していないことにも注意してください。
2. node-sassは、使用されるノードのバージョンに非常に敏感です。 私にとっては、svelteベータ設定のランタイム環境を、アプリの他の部分でも使用されるノード実行可能ファイルに設定するだけで常に十分です。 そうしないと、VSCodeのノードバージョンが使用され、一致しない可能性があります。

@dummdidumm私はあなたの感情を感じますが、個人的にはhttps ：//news.ycombinator.com/item

私は個人的に一流のbabelサポートをスキップして、どれだけの人が不満を言っているかを確認します。構成には非常に多様性があり、サポート的にワームの缶を開く可能性があります。

また、このような全会一致のサポートに到達したCSSソリューションはないと思います。 また、Svelteはすでに優れたスコープのCSSソリューションを提供しているので、型付きのjavascriptほど必要ではないと思います。

あはは！ ポインタをありがとう！

さて、これは私がただ遊んでいて、実際のアプリでこれをまだテストしていなかったことを明らかにします😆

後から明らかな2つの暗黙の依存関係がありますが、警告はあなたを迷わせます：

1. Error: Cannot find module 'svelte/package.json'

2. Error: [svelte-preprocess] Error transforming 'typescript'. Cannot find module 'typescript'

VSCodeがTypescriptで機能するのと同じように、フォールバックTypescriptとSvelteを提供して、人々がすばやく遊んでくれるようにするといいと思います。

package.jsonのことは興味深いので、それを確認する必要があります。 プラグインの組み込みのsvelteバージョンにフォールバックする必要があります。 それとは別に、これは今日すでにタイプスクリプトに対してのみ機能します。 svelte.config.jsを完全に削除する必要があります。 フォールバックが使用され、タイプスクリプトを処理できるはずですが、それ以上は処理できません。 現在、その領域の変動が大きすぎるため、これは文書化されていません。

うん、これはすごい！ svelte.config.jsを削除し、 svelteとtypescript依存関係を追加しました。 それは魅力のように機能します！

また、男性に魚を教えることを教えてくれた@egnusにも感謝します。

はい、 svelte.config.js削除すると、私にとっても問題が解決しました

@dummdidummチェックして、

Initialize language server at  c:/PATH/TO/PROJECT/
Initialize new ts service at  
Trying to load config for c:/PATH/TO/PROJECT/src/App.svelte
Found config at  c:\PATH\TO\PROJECT\svelte.config.js
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (c:\PATH\TO\PROJECT\node_modules\svelte-preprocess\dist\utils.js:1:2844)

svelte.config.jsファイルを削除することも試みましたが、私の場合はうまくいきませんでした。 しかし、私が議論について理解していることから、typescriptプリプロセッサのみが使用されていた状況のみを修正することを意図していたようです。

これが提起する問題は、Svelteがnode_modulesではなくシステムパス上にあるnode-sassまたはsassを探しているかどうかです。 プロジェクト用にnode-sassローカルにインストールしていますが、グローバルにインストールしていません。

「モジュールが見つかりません：...」エラーは、パッケージが見つからない場合、モジュール解決で見つからなかった場合、または見つかったがノードバージョンが一致せず、node-sassがスローした場合に表示されることがあります。エラー。 svelte-preprocessはこれらのエラーの両方を飲み込み、「モジュールが見つかりません：...」と出力します。

私はこれを試しましたが、 @ dummdidummが提案したように、 svelte.language-server.runtime設定することで、発生した問題を修正できます。
@JoeBobMilesは、jsファイルでnode-sassを要求し、ノードを使用してファイルを実行して、エラーがあるかどうかを確認することができます。

const nodeSass = require('node-sass')

console.log(nodeSass)

この一連のテスト中にsvelte.config.js削除するだけでなく、DevDependencyとしてsassをインストールし（node-sassしかありませんでした）、node-sassをグローバルにインストールしました。

これは以前にすでに行われており、成功せずにJSファイルを削除すると、Svelte Betaは機能しましたが、これらの他の詳細のどれがそれに影響を与えたかは本当にわかりません。現時点ではテストできません。
これらの追加の変更のいずれかで問題が解決する可能性があるかどうかをお知らせください。 また、試行するたびに、Language-toolsとvscodeウィンドウを再起動します。

@ jasonlyu123アドバイスありがとうございます。 コードスニペットを使用してもエラーは発生しなかったので、 node-sassは実際に機能していると思います。 （これを入力すると、Webpackが問題なくコンパイルされていたため、そのチェックが冗長である可能性があることに気づきました。）

ただし、 node-sassが問題だったようです。 sassインストールした後（そしてsassのみをインストールした後）、SvelteBetaは警告の報告を停止しました。 プロジェクトからnode-sassを削除しましたが、警告が再表示されませんでした。 Svelte Betaは、 sassまたはnode-sassではなく、 sassのみを探していたようです。

さらに、 lang値をscssからsassしてみたところ、リンティングの動作がおかしいことに気づきました。 Svelte Betaはもはや文句を言いませんが、VS CodeのCSSリンターは、スタイルタグ内にインデントベースのSass構文を表示することを好まないようです。

それはSvelteBetaの問題というよりはVSCodeの問題だと思いますが。

残念ながら、SASSは現在サポートされていません。 リンティングなどにはhttps://github.com/microsoft/vscode-css-languageservice/tree/master/srcを使用しており、そのライブラリはSASSをサポートしていません。

エラーは回避策によって修正されたように見えますが、他の誰かがこの問題に遭遇した場合に備えて、またこの問題の根底に到達するために、これを開いたままにしておきたいと思います。

この問題に関する少しのフィードバック。 同じ問題が発生し、 "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node"設定することで解決しました。

これは、vscode拡張Code Helper (Renderer)のデフォルトのノードランタイムがelectronカスタムビルドであり、node-sassのようなネイティブライブラリの解決に問題があるためだと思います。

ps aux出力：

/Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Renderer).app/Contents/MacOS/Code Helper (Renderer) --inspect=6009 /Users/username/.vscode/extensions/svelte.svelte-vscode-99.0.39/node_modules/svelte-language-server/bin/server.js --node-ipc --clientProcessId=72991

これをどこかに文書化する必要があります。 または、デフォルトで、 exec('/usr/bin/env which node')ような拡張機能内でユーザーの通常のノードバイナリを見つけようとします（ただし、Windowsで同じことを行う方法はわかりません）。

それは文書化されており、IDEの警告もこれを示唆しています。

警告は次の製品リリースでより良くなり、すでに毎晩テストすることができます。 これにより、将来的に問題が絞り込まれることを願っています。 この問題はすでに並行して進行していることが多すぎるため、すべてではないにしてもほとんどの問題が解決されているので、これを閉じます。 SCSS関連の問題が発生した場合は、新しい問題を開いてください。