Language-tools: L'attribut de balise de style `lang` déclenche un avertissement de Svelte Beta

Cela m'arrive aussi, dès que je désactive une langue ou un détail pointant sur la langue du style importé via src="./xxx.scss" le système cesse de s'en plaindre au début de la page.

Comme cela se produit pour scss, je suis très certain que c'est un problème de nœud comme celui-ci .

Pourriez-vous ouvrir Output-> Svelte dans VSCode (voir en bas, également où se trouve votre terminal), reproduire l'erreur et coller ici ce qu'est la sortie?

Peut-être lié: # 32

rien de fait avec Node-sass localement et globalement n'a changé le résultat même après plusieurs recharges.

Ceci est la sortie de Svelte (notez que j'ai 3.20.1 car un bogue dans la version mise à jour ne me permet pas de mettre à jour le projet, signalé également)

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

Le SCSS pelucheux pourrait être lié et j'avais aussi l'habitude de l'avoir lorsque j'avais un SCSS en ligne, mais juste en remarque, ce n'est pas une erreur, c'est un avertissement, en haut du fichier. Aucun SCSS ne doit être analysé.

Je crois que quelque chose est lié à ce htmlxparser.ts

@dummdidumm J'ai vérifié cette sortie avant de publier ce bogue et je n'ai vu aucune erreur rapportée par Svelte Beta. J'essaierai à nouveau aujourd'hui quand je serai en mesure de publier les journaux.

Comme cela se produit pour scss, je suis très certain que c'est un problème de nœud comme celui-ci.

Je suis sceptique que ce soit le cas, mais je vais enquêter et voir ce que je trouve.

À partir de la sortie svelte.config.js été trouvé. Si la configuration n'est pas trouvée mais nécessaire (en raison du fait que lang / type est défini sur script / style ), un message No svelte.config.js found but one is needed apparaîtrait dans le journal.
Cela n'a rien à voir avec le htmlxparser de svelte2tsx , car il n'y a pas de prétraitement effectué là-dedans. Il échoue ici en essayant d'obtenir des diagnostics du compilateur svelte.

Voici le journal que j'ai obtenu lorsque j'ai vérifié la sortie Svelte (chemins anonymisés; barres obliques telles qu'elles étaient lorsqu'elles étaient affichées dans 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

Presque identique à la sortie VS Code de Initializing new ts service at . Je ne suis pas sûr que ce soit une conséquence, mais l'alternance de barres obliques entre les messages me ressort.

J'ai également vérifié que node-sass était compatible avec ma version de Windows et Node.js. node-sass v4.14.1 (dernière version à partir de maintenant) est compatible avec ma version de node, v13.7.

Pourriez-vous s'il vous plaît vérifier une fois de plus? J'ai poussé une mise à jour avec plus de journalisation dans ce domaine et j'ai également mis à jour un peu le message d'erreur destiné à l'utilisateur.

Faites-vous référence au commit ci-dessus? Si tel est le cas, j'avais vérifié après la fusion du commit et installé la nouvelle mise à jour avant de vérifier.

L'extension est publiée tous les soirs, la dernière fois il y a environ 8 heures, donc votre journal d'il y a 14 heures est probablement avec "l'ancienne" version.

Ah, je vois. J'obtiendrai le nouveau journal la prochaine fois que je pourrai.

Je vais également le vérifier dans quelques heures ou avant

Mmmm intéressant, vous aviez raison:

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)

Je vais vérifier pourquoi svelte.config.js ne l'utilise pas et revenir

Ok, donc il semble que svelte-preprocess ne trouve pas node-sass ni global ni local par VSCode. Alors que le même Rollup Config importe le 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'),
//       };
//     },
//   },
// };

Peut-être un problème de Svelte Beta? Je ne sais pas comment indiquer le chemin de node-sass vers le VSCode à ce stade, à part l'écriture du prétraitement moi-même.

J'obtiens cela sur master et je ne pense même pas avoir installé node-sass sur mon ordinateur. Typescript fonctionne (!!!) il y a juste cet avertissement de peluche plutôt ennuyeux.

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

Heureux de tester quoi que ce soit pour aider à affiner cela.

Je voudrais aussi ❤️ supprimer svelte.config.js et avoir juste quelques configurations communes cuites. Heureux d'ouvrir un PR pour que cela se produise. Edit , je pense que https://github.com/sveltejs/language-tools/pull/87 a rendu cela possible 👏

mm Je suis curieux de @matthewmueller , mettez à jour Svelte Beta dans vos extensions et copiez ici le Output-> Svelte dans VSCode (voir en bas, également où se trouve votre terminal).

Ah! Merci pour le pointeur!

D'accord, cela montre que je ne faisais que jouer et que je n'ai pas encore testé cela sur une vraie application 😆

Il y a deux dépendances implicites qui sont évidentes avec le recul, mais l'avertissement vous induit en erreur:

1. Erreur: impossible de trouver le module 'svelte / package.json'
2. Erreur: [svelte-preprocess] Erreur lors de la transformation de 'typescript'. Impossible de trouver le module 'typescript'

Je pense que ce serait cool d'offrir un Typescript et Svelte de secours pour que les gens puissent jouer rapidement, de la même manière que VSCode fonctionne avec Typescript.

En ce qui concerne la cuisson dans: j'y ai pensé aussi, mais je pense que la communauté svelte est peut-être déjà trop habituée aux préprocesseurs personnalisés. Si nous devions avoir tout cela à l'intérieur du plugin, cela signifierait ajouter et installer des dépendances comme node-sass, less, babel, .. cela gonfle le plugin.

Pour en revenir au problème spécifique, il y a deux problèmes:

1. La résolution du module se fausse parfois. Pourquoi est-ce quelque chose qui doit être étudié. Il convient également de noter que les configurations telles que le pnp de yarn ne fonctionnent pas.
2. node-sass est très sensible à la version de nœud utilisée. Pour moi, il suffit toujours de définir l'environnement d'exécution dans les paramètres bêta de svelte sur mon exécutable de nœud qui est également utilisé par le reste de l'application. Si vous ne le faites pas, la version du nœud de VSCode est utilisée et peut ne pas correspondre.

@dummdidumm Je ressens votre sentiment, mais je pense personnellement que Typescript a atteint un certain niveau de popularité là où il mérite un soutien de première classe. La plupart des nouvelles bases de code commencent par Typescript et les anciennes sont mises à jour. Cela empêche beaucoup de gens d'essayer Svelte: https://news.ycombinator.com/item?id=21376557

Personnellement, je sauterais le support babel de première classe et verrais à quel point les gens se plaignent - il y a tellement de variabilité dans la configuration et cela peut ouvrir une boîte de vers en termes de support.

Je ne pense pas non plus qu'il existe des solutions CSS qui ont atteint un tel soutien unanime. De plus, étant donné que Svelte propose déjà une excellente solution CSS, je ne pense pas que ce soit aussi nécessaire que le javascript tapé.

Ah! Merci pour le pointeur!

D'accord, cela montre que je ne faisais que jouer et que je n'ai pas encore testé cela sur une vraie application 😆

Il y a deux dépendances implicites qui sont évidentes avec le recul, mais l'avertissement vous induit en erreur:

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

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

Je pense que ce serait cool d'offrir un Typescript et Svelte de secours pour que les gens puissent jouer rapidement, de la même manière que VSCode fonctionne avec Typescript.

Le truc package.json est intéressant, il faut vérifier cela. Il devrait revenir à la version svelte intégrée du plugin. En dehors de cela, cela ne fonctionne déjà aujourd'hui que pour la dactylographie. Vous devez supprimer complètement le fichier svelte.config.js. Une solution de secours est alors utilisée, qui devrait pouvoir traiter du dactylographie mais pas plus. Cela n'est pas documenté, car à l'heure actuelle, il y a tout simplement trop de fluctuations dans ce domaine.

Oui, c'est incroyable! J'ai supprimé svelte.config.js et ajouté les dépendances svelte et typescript . Il fonctionne comme un charme!

Merci également à @egnus pour avoir

oui, la suppression de svelte.config.js résolu le problème pour moi

@dummdidumm Vérifié et a obtenu le même rapport d'erreur qu'Egnus:

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)

J'ai également essayé de supprimer le fichier svelte.config.js , mais cela n'a pas fonctionné pour mon cas. D'après ce que j'ai compris de la discussion, il semble que cela ne visait qu'à résoudre les situations où seul le préprocesseur dactylographié était utilisé.

La question que cela soulève est de savoir si Svelte recherche node-sass ou sass sur le chemin du système au lieu de dans node_modules ? Bien que node-sass installé localement pour le projet, je ne l'ai pas installé globalement.

L'erreur "Impossible de trouver l'un des modules: ..." peut apparaître lorsque le package n'est pas trouvé, parce que la résolution du module ne l'a pas trouvé, ou parce qu'il l'a trouvé mais que les versions de nœud ne correspondent pas et node-sass lance alors une erreur. svelte-preprocess avale ces deux erreurs et émet simplement "Impossible de trouver l'un des modules: ..."

J'ai essayé cela et le problème que je rencontre peut être résolu en définissant svelte.language-server.runtime comme @dummdidumm suggéré.
@JoeBobMiles vous pouvez essayer d'exiger node-sass dans un fichier js et exécuter le fichier avec node pour voir s'il y a des erreurs.

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles pendant ce tas de tests, je n'ai pas seulement supprimé svelte.config.js mais aussi installé sass tant que DevDependency (je n'avais que node-sass), et installé node-sass globalement.

Avec cela déjà fait auparavant, sans réussir, lorsque j'ai supprimé le fichier JS, Svelte Beta a fonctionné, mais je ne sais vraiment pas lequel de ces autres détails j'ai affecté et je ne peux pas le tester pour le moment.
Faites-nous savoir si l'une de ces modifications supplémentaires pourrait résoudre le problème. Redémarrez également les outils de langage et la fenêtre vscode à chaque fois.

@ jasonlyu123 Merci pour les conseils. En utilisant votre extrait de code, je n'ai reçu aucune erreur, donc je suppose que node-sass fonctionne effectivement. (Bien que je viens de réaliser en tapant ceci que, puisque Webpack compilait sans problème, cette vérification peut avoir été redondante.)

Cependant, il semble que node-sass soit le problème. Après avoir installé sass (et installé uniquement sass ), Svelte Beta a cessé de signaler les avertissements. J'ai supprimé node-sass de mon projet et les avertissements ne réapparaissent pas. Il semble que Svelte Beta ne recherchait que sass au lieu de sass ou node-sass .

De plus, j'ai joué avec le changement de la lang de scss à sass et j'ai remarqué un comportement amusant avec le peluchage. Alors que Svelte Beta ne se plaint plus, le linter CSS de VS Code ne semble pas aimer voir la syntaxe Sass basée sur l'indentation à l'intérieur d'une balise de style:

Bien que je pense que c'est plus un problème de VS Code qu'un problème de Svelte Beta.

SASS n'est malheureusement pas pris en charge pour le moment. Nous utilisons https://github.com/microsoft/vscode-css-languageservice/tree/master/src pour le linting, etc. et cette bibliothèque ne prend pas en charge SASS.

Bien que vos erreurs semblent résolues grâce à des solutions de contournement, je veux toujours laisser cela ouvert au cas où quelqu'un d'autre rencontrerait ce problème, et aussi pour aller au fond de ce problème.

Un petit retour sur le problème. J'ai rencontré le même problème et résolu en définissant "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" .

Je pense que c'est à cause de cela que le runtime par défaut du nœud dans l'extension vscode Code Helper (Renderer) est un électron personnalisé, ce qui a du mal à résoudre la lib native comme node-sass.

ps aux sortie:

/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

Besoin de documenter cela quelque part. Ou mieux, par défaut, essayez de localiser un binaire de nœud normal pour l'utilisateur juste à l'intérieur de l'extension comme exec('/usr/bin/env which node') (vous ne savez pas comment faire la même chose sur Windows).

Il est documenté et l'avertissement dans l'EDI fait également allusion à cela.

Les avertissements seront meilleurs dans la prochaine version de la production, peuvent déjà être testés tous les soirs. J'espère que cela réduira le problème à l'avenir. Étant donné que ce problème comporte déjà trop de choses en parallèle dont la plupart, sinon la totalité, sont résolues, je vais clore cela. Si un problème lié à SCSS se produit, veuillez ouvrir un nouveau problème.