Language-tools: Das Attribut "lang" des Style-Tags löst eine Warnung von Svelte Beta aus

Dies passiert mir auch, sobald ich eine Sprache oder ein Detail deaktiviere, das auf die Sprache des über src="./xxx.scss" importierten Stils verweist, hört das System am Anfang der Seite auf, sich darüber zu beschweren.

Da es für scss passiert, bin ich mir sehr sicher, dass es sich um ein Node-Sass-Problem wie dieses handelt .

Könnten Sie Output-> Svelte in VSCode öffnen (Ansicht unten, auch wo sich Ihr Terminal befindet), den Fehler reproduzieren und hier die Ausgabe einfügen?

Möglicherweise verwandt: # 32

Nichts, was lokal und global mit Node-sass gemacht wurde, hat das Ergebnis auch nach mehreren Neuladungen verändert.

Dies ist die Ausgabe von Svelte (beachten Sie, dass ich 3.20.1 habe, da ein Fehler in der aktualisierten Version es mir nicht ermöglicht, das ebenfalls gemeldete Projekt zu aktualisieren).

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

Das Flusen-SCSS könnte verwandt sein, und ich hatte es auch, als ich Inline-SCSS hatte, aber nur als Randnotiz, dies ist kein Fehler, es ist eine Warnung oben in der Datei. Es muss kein SCSS analysiert werden.

Ich glaube, das hat etwas mit dieser htmlxparser.ts zu

@dummdidumm Ich habe diese Ausgabe tatsächlich überprüft, bevor ich diesen Fehler

Da es für scss passiert, bin ich mir sehr sicher, dass es sich um ein Node-Sass-Problem wie dieses handelt.

Ich bin skeptisch, dass dies der Fall sein würde, aber ich werde untersuchen und sehen, was ich finde.

Aus der @ Egus- Ausgabe kann ich schließen, dass das svelte.config.js gefunden wurde. Wenn die Konfiguration nicht gefunden, aber benötigt wird (da lang / type auf script / style ), wird eine No svelte.config.js found but one is needed Nachricht angezeigt würde im Protokoll erscheinen.
Es hat auch nichts mit dem htmlxparser von svelte2tsx zu tun, da dort keine Vorverarbeitung durchgeführt wird. Dies schlägt hier fehl

Hier ist das Protokoll, das ich erhalten habe, als ich die Svelte-Ausgabe überprüft habe (Pfade anonymisiert; Schrägstriche wie bei der Anzeige im VS-Code):

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

Fast identisch mit der VS-Code-Ausgabe von @Egnus , außer für die Svelte-Version und das Hinzufügen von Initializing new ts service at . Ich bin mir nicht sicher, ob dies von Bedeutung ist, aber der Wechsel der Schrägstriche zwischen den Nachrichten fällt mir auf.

Außerdem wurde überprüft, ob Node-Sass mit meiner Version von Windows und Node.js kompatibel ist. node-sass v4.14.1 (neueste Version ab sofort) ist mit meiner Version von node v13.7 kompatibel.

Könnten Sie bitte noch einmal nachsehen? Ich habe ein Update mit mehr Protokollierung in diesem Bereich gepusht und auch die benutzerbezogene Fehlermeldung ein wenig aktualisiert.

Beziehen Sie sich auf das Commit oben? In diesem Fall hatte ich nach dem Zusammenführen des Commits überprüft und das neue Update vor dem Überprüfen installiert.

Die Erweiterung wird jeden Abend veröffentlicht, das letzte Mal vor ungefähr 8 Stunden, sodass Ihr Protokoll vor 14 Stunden wahrscheinlich mit der "alten" Version übereinstimmt.

Ah ich sehe. Ich werde das neue Protokoll erhalten, wenn ich das nächste Mal in der Lage bin.

Ich werde es auch in ein paar Stunden oder vorher überprüfen

Mmmm interessant, du hattest recht:

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)

Ich werde überprüfen, warum svelte.config.js es nicht verwendet und zurückkommen

Ok, es scheint also, dass svelte-preprocess node-sass weder global noch lokal von VSCode findet. Während die gleiche Rollup-Konfiguration die folgenden svelte.config.js importiert.

// 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'),
//       };
//     },
//   },
// };

Könnte ein Problem von Svelte Beta sein? Ich habe zu diesem Zeitpunkt keine Ahnung, wie ich den Pfad von Node-Sass zum VSCode bestimmen soll, abgesehen davon, dass ich den Vorprozess selbst geschrieben habe.

Ich bekomme das auf Master und ich glaube nicht, dass ich Node-Sass auf meinem Computer installiert habe. Typoskript funktioniert (!!!) Es gibt nur diese ziemlich nervige Flusenwarnung.

.
├── 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(),
}

Gerne testen wir etwas weiter, um dies einzugrenzen.

Ich würde auch svelte.config.js entfernen und nur einige gängige Konfigurationen einbinden lassen. Ich freue mich, eine PR zu öffnen, um dies zu ermöglichen. Bearbeiten , ich _think_ https://github.com/sveltejs/language-tools/pull/87 hat dies möglich gemacht 👏

mm Ich bin neugierig

Aha! Danke für den Zeiger!

Okay, das zeigt, dass ich nur herumgespielt habe und dies noch nicht mit einer echten App getestet habe 😆

Es gibt zwei implizite Abhängigkeiten, die im Nachhinein offensichtlich sind, aber die Warnung führt Sie in die Irre:

1. Fehler: Modul 'svelte / package.json' kann nicht gefunden werden
2. Fehler: [svelte-preprocess] Fehler beim Transformieren von 'Typoskript'. Modul 'Typoskript' kann nicht gefunden werden

Ich denke, es wäre cool, ein Fallback-Typescript und Svelte anzubieten, damit die Leute schnell herumspielen können, ähnlich wie VSCode mit Typescript funktioniert.

Zum Backen: Ich habe auch darüber nachgedacht, aber ich denke, die schlanke Community ist möglicherweise bereits zu sehr an benutzerdefinierte Präprozessoren gewöhnt. Wenn wir all dies im Plugin haben würden, würde dies bedeuten, Abhängigkeiten wie Node-Sass, Less, Babel, hinzuzufügen und zu installieren. Dies bläht das Plugin auf.

Um auf das spezifische Problem zurückzukommen: Es gibt zwei Probleme:

1. Die Modulauflösung ist manchmal fehlerhaft. Warum ist etwas, das untersucht werden muss. Es ist auch erwähnenswert, dass Setups wie Garns PNP nicht funktionieren.
2. node-sass reagiert sehr empfindlich auf die verwendete Knotenversion. Für mich ist es immer genug, die Laufzeitumgebung in den schlanken Beta-Einstellungen auf die ausführbare Datei meines Knotens festzulegen, die auch vom Rest der App verwendet wird. Wenn Sie dies nicht tun, wird die Knotenversion von VSCode verwendet, die möglicherweise nicht übereinstimmt.

@dummdidumm Ich fühle für Ihr Gefühl, aber ich persönlich denke, dass Typescript einen gewissen Bekanntheitsgrad erreicht hat, wo es erstklassige Unterstützung https://news.ycombinator.com/item?id=21376557

Ich persönlich würde den erstklassigen Babel-Support überspringen und sehen, wie viele Leute sich beschweren - die Konfiguration ist so unterschiedlich und kann eine Dose Würmer unterstützen.

Ich glaube auch nicht, dass es CSS-Lösungen gibt, die so einstimmig unterstützt werden. Da Svelte bereits eine großartige CSS-Lösung mit Gültigkeitsbereich anbietet, halte ich dies nicht für so notwendig wie getipptes Javascript.

Aha! Danke für den Zeiger!

Okay, das zeigt, dass ich nur herumgespielt habe und dies noch nicht mit einer echten App getestet habe 😆

Es gibt zwei implizite Abhängigkeiten, die im Nachhinein offensichtlich sind, aber die Warnung führt Sie in die Irre:

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

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

Ich denke, es wäre cool, ein Fallback-Typescript und Svelte anzubieten, damit die Leute schnell herumspielen können, ähnlich wie VSCode mit Typescript funktioniert.

Die package.json Sache ist interessant, muss das überprüfen. Es sollte auf die integrierte schlanke Version des Plugins zurückgreifen. Abgesehen davon funktioniert dies heute bereits nur für Typoskript. Sie müssen die Datei svelte.config.js vollständig löschen. Es wird dann ein Fallback verwendet, der mit Typoskript umgehen kann, aber nicht mehr. Dies ist nicht dokumentiert, da es in diesem Bereich derzeit einfach zu viele Schwankungen gibt.

Ja, das ist unglaublich! Ich habe svelte.config.js und svelte und typescript Abhängigkeiten hinzugefügt. Es wirkt wie ein Zauber!

Vielen Dank auch an beigebracht hat .

Ja, das Entfernen von svelte.config.js das Problem auch für mich gelöst

@dummdidumm Überprüft und

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)

Ich habe auch mit dem Entfernen der svelte.config.js -Datei experimentiert, aber es hat in meinem Fall nicht funktioniert. Nach meinem Verständnis der Diskussion scheint dies jedoch nur dazu gedacht zu sein, Situationen zu beheben, in denen nur der Typoskript-Präprozessor verwendet wurde.

Die Frage, die sich dabei stellt, ist, ob Svelte nach node-sass oder sass sucht, um auf dem Systempfad zu sein, anstatt in node_modules ? Während ich node-sass lokal für das Projekt installiert habe, habe ich es nicht global installiert.

Der Fehler "Kein Modul kann gefunden werden: ..." kann auftreten, wenn das Paket nicht gefunden wird, weil die Modulauflösung es nicht gefunden hat oder weil es es gefunden hat, aber die Knotenversionen nicht übereinstimmten und Node-Sass dann auslöst ein Fehler. svelte-preprocess verschluckt beide Fehler und gibt nur "Keines der Module kann gefunden werden: ..." aus.

Ich habe es versucht und das Problem, auf das ich stoße , kann behoben werden, indem svelte.language-server.runtime wie von @dummdidumm vorgeschlagen festgelegt wird.
@JoeBobMiles Sie können versuchen, node-sass in einer js-Datei zu benötigen und die Datei mit dem Knoten ausführen, um festzustellen, ob Fehler vorliegen.

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles Während dieser Testreihe habe ich nicht nur svelte.config.js sondern auch sass als DevDependency installiert (ich hatte nur Node-Sass) und Node-Sass global installiert.

Nachdem dies bereits zuvor getan wurde, ohne Erfolg, als ich die JS-Datei entfernte, funktionierte Svelte Beta, aber ich weiß wirklich nicht, welche dieser anderen Details ich davon betroffen hatte, und ich kann es im Moment nicht testen.
Lassen Sie uns wissen, ob eine dieser zusätzlichen Änderungen das Problem lösen könnte. Starten Sie außerdem bei jedem Versuch die Sprachwerkzeuge und das vscode-Fenster neu.

@ jasonlyu123 Danke für den Rat. Bei Verwendung Ihres Code-Snippets habe ich keine Fehler erhalten, daher gehe ich davon aus, dass node-sass tatsächlich funktioniert. (Obwohl ich gerade beim Eingeben festgestellt habe, dass diese Überprüfung redundant war, da Webpack ohne Probleme kompiliert wurde.)

Es scheint jedoch, dass node-sass das Problem war. Nach der Installation von sass (und nur der Installation von sass ) hat Svelte Beta die Meldung von Warnungen eingestellt. Ich habe node-sass aus meinem Projekt entfernt und die Warnungen wurden nicht erneut angezeigt. Anscheinend suchte Svelte Beta nur nach sass anstatt nach sass oder node-sass .

Außerdem habe ich damit herumgespielt, den Wert von lang von scss auf sass zu ändern, und dabei ein komisches Verhalten beim Flusen bemerkt. Während sich Svelte Beta nicht mehr beschwert, scheint es dem CSS-Linter von VS Code nicht zu gefallen, die einrückungsbasierte Sass-Syntax in einem Style-Tag zu sehen:

Obwohl ich denke, dass dies eher ein VS-Code-Problem als ein Svelte-Beta-Problem ist.

SASS wird derzeit leider nicht unterstützt. Wir verwenden https://github.com/microsoft/vscode-css-languageservice/tree/master/src für das Flusen usw. und diese Bibliothek unterstützt SASS nicht.

Obwohl Ihre Fehler durch Problemumgehungen behoben zu sein scheinen, möchte ich dies dennoch offen lassen, falls jemand anderes auf dieses Problem stößt, und auch, um diesem Problem auf den Grund zu gehen.

Ein bisschen Feedback zum Thema. Ich bin auf dasselbe Problem gestoßen und habe es durch Setzen von "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" behoben.

Ich denke, dies liegt daran, dass die Standard-Knotenlaufzeit in der vscode-Erweiterung Code Helper (Renderer) elektronenspezifisch erstellt wurde, was Probleme beim Auflösen der nativen Bibliothek wie Node-Sass hat.

ps aux Ausgabe:

/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

Müssen dies irgendwo dokumentieren. Oder besser, versuchen Sie standardmäßig, eine normale Knoten-Binärdatei für den Benutzer direkt in der Erweiterung zu finden, z. B. exec('/usr/bin/env which node') (Sie sind sich jedoch nicht sicher, wie Sie dies unter Windows tun sollen).

Es ist dokumentiert und die Warnung in der IDE weist ebenfalls darauf hin.

Warnungen werden in der kommenden Produktversion besser sein, können bereits jeden Abend getestet werden. Ich hoffe, dass dies das Problem in Zukunft eingrenzen wird. Da in diesem Problem bereits zu viele Dinge parallel ablaufen, von denen die meisten, wenn nicht alle, gelöst werden, werde ich dies schließen. Wenn ein SCSS-Problem auftritt, öffnen Sie bitte ein neues Problem.