Language-tools: O atributo de tag de estilo `lang` dispara aviso do Svelte Beta

Isso também acontece comigo, assim que desabilito algum idioma ou detalhe apontando o idioma do estilo importado via src="./xxx.scss" o sistema deixa de reclamar disso no início da página.

Já que isso acontece com o scss, tenho certeza de que é um problema de node-sass como este .

Você poderia abrir Output-> Svelte no VSCode (veja na parte inferior, também onde está o seu terminal), reproduzir o erro e colar aqui qual é a saída?

Possivelmente relacionado: # 32

nada feito com o Node-sass local e globalmente mudou o resultado, mesmo depois de várias recargas.

Esta é a saída do Svelte (observe que tenho 3.20.1 porque um bug na versão atualizada não me permite atualizar o projeto, relatado também)

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

O SCSS linting pode estar relacionado e eu também tinha isso quando tinha SCSS embutido, mas só como uma observação lateral, isso não é um erro, é um aviso, na parte superior do arquivo. Nenhum SCSS precisa ser analisado.

Acredito que seja algo relacionado a este htmlxparser.ts

@dummdidumm Na verdade, verifiquei essa saída antes de postar esse bug e não vi erros sendo relatados pelo Svelte Beta. Vou tentar novamente hoje quando puder e postar os logs.

Já que isso acontece com o scss, tenho certeza de que é um problema de node-sass como este.

Não acredito que seja esse o caso, mas vou investigar e ver o que encontro.

A partir da saída de @Egnus , posso inferir que svelte.config.js foi encontrado. Se a configuração não for encontrada, mas necessária (devido a lang / type sendo definida em script / style ), uma mensagem No svelte.config.js found but one is needed apareceria no log.
Também não tem nada a ver com o htmlxparser de svelte2tsx , porque não há pré-processamento feito nele. Ele falha aqui ao tentar obter diagnósticos do compilador svelte.

Aqui está o log que obtive quando verifiquei a saída do Svelte (caminhos anônimos; barras como eram quando exibidas no código do VS):

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

Quase idêntico à saída do código VS de @Egnus , exceto para a versão Svelte e adição de Initializing new ts service at . Não tenho certeza se isso é importante, mas a alternância de barras entre as mensagens se destaca para mim.

Também verifiquei novamente se o node-sass era compatível com minha versão do Windows e Node.js. node-sass v4.14.1 (versão mais recente a partir de agora) é compatível com minha versão do node, v13.7.

Você poderia verificar mais uma vez? Empurrei uma atualização com mais registros nessa área e também atualizei um pouco a mensagem de erro voltada para o usuário.

Você está se referindo ao commit acima? Em caso afirmativo, verifiquei depois que o commit foi mesclado e instalei a nova atualização antes de verificar.

A extensão é publicada todas as noites, a última vez há cerca de 8 horas, então seu log 14 horas atrás provavelmente está com a versão "antiga".

Ah, entendo. Receberei o novo log na próxima vez em que puder.

Também irei verificar em algumas horas ou antes

Mmmm interessante, você estava certo:

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)

Vou verificar porque svelte.config.js não o está usando e volto

Ok, então parece que svelte-preprocess não encontra node-sass nem global nem local por VSCode. Enquanto o mesmo Rollup Config importa o seguinte 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'),
//       };
//     },
//   },
// };

Pode ser um problema do Svelte Beta? Não tenho ideia de como dizer o caminho do node-sass para o VSCode neste ponto, além de escrever o pré-processo sozinho.

Estou recebendo isso no master e acho que nem mesmo tenho o node-sass instalado no meu computador. O texto datilografado está funcionando (!!!) há apenas um aviso de lint um tanto irritante.

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

Fico feliz em testar mais alguma coisa para ajudar a restringir isso.

Eu também ❤️ removeria svelte.config.js e apenas incorporaria algumas configurações comuns. Prazer em abrir um PR para fazer isso acontecer. Edite , eu _think_ https://github.com/sveltejs/language-tools/pull/87 fiz isso acontecer 👏

mm Estou curioso @matthewmueller , atualize o Svelte Beta em suas extensões e copie aqui o Output-> Svelte em VSCode (veja abaixo, também onde está o seu terminal).

Aha! Obrigado pelo ponteiro!

Ok, então isso mostra que eu estava apenas brincando e ainda não testei em um aplicativo real 😆

Existem duas dependências implícitas que são óbvias em retrospectiva, mas o aviso leva você ao erro:

1. Erro: Não é possível encontrar o módulo 'svelte / package.json'
2. Erro: [svelte-pré-processo] Erro ao transformar 'texto digitado'. Não é possível encontrar o módulo 'typescript'

Acho que seria legal oferecer um Typescript e Svelte substituto para as pessoas brincarem rapidamente, semelhante a como o VSCode funciona com o Typescript.

Sobre assar isso: Eu também pensei sobre isso, mas acho que a comunidade esbelta já pode estar muito acostumada com pré-processadores customizados. Se tivéssemos tudo isso dentro do plugin, isso significaria adicionar e instalar dependências como node-sass, less, babel, .. isso incha o plugin.

Voltando ao problema específico, existem dois problemas:

1. A resolução do módulo às vezes falha. Por que é algo que precisa ser investigado. Também é importante notar que configurações como o pnp do yarn não estão funcionando.
2. node-sass é muito sensível à versão do nó que é usada. Para mim, é sempre suficiente definir o ambiente de execução nas configurações beta svelte para o executável do meu nó que também é usado pelo resto do aplicativo. Se você não fizer isso, a versão do nó do VSCode é usada e pode não corresponder.

@dummdidumm Eu sinto pelo seu sentimento, mas pessoalmente acho que o Typescript atingiu um certo nível de popularidade onde merece um suporte de primeira classe. A maioria das novas bases de código está começando com Typescript e as antigas estão sendo atualizadas. Isso está impedindo que muitas pessoas experimentem o Svelte: https://news.ycombinator.com/item?id=21376557

Eu pessoalmente pularia o suporte a babel de primeira classe e veria quantas pessoas reclamam - há muita variabilidade na configuração e pode abrir uma lata de worms em termos de suporte.

Eu também não acho que haja nenhuma solução CSS que tenha alcançado um suporte tão unânime. Além disso, como o Svelte já oferece uma ótima solução CSS com escopo, não acho que seja tão necessário quanto o javascript digitado.

Aha! Obrigado pelo ponteiro!

Ok, então isso mostra que eu estava apenas brincando e ainda não testei em um aplicativo real 😆

Existem duas dependências implícitas que são óbvias em retrospectiva, mas o aviso leva você ao erro:

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

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

Acho que seria legal oferecer um Typescript e Svelte substituto para as pessoas brincarem rapidamente, semelhante a como o VSCode funciona com o Typescript.

A coisa do package.json é interessante, preciso verificar isso. Ele deve voltar para a versão esbelta embutida do plugin. Além disso, isso já funciona hoje apenas para texto datilografado. Você precisa excluir o svelte.config.js completamente. Um fallback é usado então, o qual deve ser capaz de lidar com o texto digitado, mas não mais. Isso não está documentado porque agora há muita flutuação nessa área.

Sim, isso é incrível! Eu removi svelte.config.js e adicionei svelte e typescript dependências. Ele funciona como um encanto!

Obrigado também a @egnus por ensinar um homem a pescar.

sim, remover svelte.config.js resolveu o problema para mim também

@dummdidumm verificado e obteve o mesmo relatório de erro que Egnus fez:

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)

Também experimentei remover o arquivo svelte.config.js , mas não funcionou no meu caso. Pelo que entendi da discussão, porém, parece que o objetivo era corrigir apenas as situações em que apenas o pré-processador datilografado estava sendo usado.

A questão que isso levanta é se Svelte está procurando node-sass ou sass no caminho do sistema em vez de node_modules ? Embora eu tenha node-sass instalado localmente para o projeto, não o tenho instalado globalmente.

O erro "Não foi possível encontrar nenhum dos módulos: ..." pode aparecer quando o pacote não foi encontrado, porque a resolução do módulo não o encontrou ou porque o encontrou, mas as versões do nó não correspondiam e o node-sass então lança um erro. svelte-preprocess engole esses dois erros e apenas emite "Não é possível encontrar nenhum dos módulos: ..."

Tentei fazer isso e o problema que encontrei pode ser corrigido definindo svelte.language-server.runtime como @dummdidumm sugerido.
@JoeBobMiles você pode tentar exigir node-sass em um arquivo js e executar o arquivo com o nó para ver se há algum erro.

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles durante esse monte de testes, eu não apenas svelte.config.js mas também instalei sass como um DevDependency (eu só tinha node-sass) e instalei node-sass globalmente.

Com isso já feito antes, sem sucesso, quando removi o arquivo JS, Svelte Beta funcionou, mas eu realmente não sei qual desses outros detalhes eu afetou e não posso testá-lo no momento.
Informe se alguma dessas alterações extras pode resolver o problema. Além disso, reinicie as ferramentas de idioma e a janela vscode a cada tentativa.

@ jasonlyu123 Obrigado pelo conselho. Usando seu snippet de código, não recebi nenhum erro, então presumo que node-sass está realmente funcionando. (Embora eu tenha acabado de perceber que, como o Webpack estava compilando sem problemas, essa verificação pode ter sido redundante.)

No entanto, parece que node-sass era o problema. Depois de instalar sass (e apenas instalar sass ), o Svelte Beta parou de relatar avisos. Removi node-sass do meu projeto e os avisos não reapareceram. Parece que o Svelte Beta estava procurando apenas sass vez de sass ou node-sass .

Além disso, brinquei alterando o lang de scss para sass e notei alguns comportamentos engraçados com fiapos. Embora Svelte Beta não reclame mais, o linter CSS do VS Code parece não gostar de ver a sintaxe Sass baseada em indentação dentro de uma tag de estilo:

Embora eu ache que é mais um problema do VS Code do que do Svelte Beta.

Infelizmente, o SASS não é compatível no momento. Usamos https://github.com/microsoft/vscode-css-languageservice/tree/master/src para o linting etc. e essa biblioteca não oferece suporte a SASS.

Embora seus erros pareçam corrigidos por meio de soluções alternativas, ainda quero deixar isso em aberto, caso outra pessoa encontre esse problema, e também para descobrir o que está acontecendo.

Um pequeno feedback sobre o assunto. Eu encontrei o mesmo problema e resolvi definindo "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" .

Acho que isso se deve ao fato de que o tempo de execução do nó padrão na extensão vscode Code Helper (Renderer) é um elétron customizado, que tem problemas para resolver lib nativa como o node-sass.

Saída de 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

Precisa documentar isso em algum lugar. Ou melhor, por padrão, tente localizar um binário de nó normal para o usuário dentro da extensão, como exec('/usr/bin/env which node') (mas não tenho certeza de como fazer o mesmo no Windows).

Está documentado e o aviso no IDE também sugere isso.

Os avisos serão melhores no próximo lançamento do produto, já podem ser testados todas as noites. Espero que isso reduza o problema no futuro. Como esse problema já tem muitas coisas acontecendo em paralelo, das quais a maioria, senão todas, está resolvida, vou encerrar isso. Se ocorrer um problema relacionado ao SCSS, abra um novo problema.