Language-tools: Атрибут тега стиля `lang` вызывает предупреждение от Svelte Beta

Это также происходит со мной, как только я отключу какой-либо язык или деталь, указывающую язык стиля, импортированного через src="./xxx.scss" система перестает жаловаться на это в начале страницы.

Поскольку это происходит с scss, я очень уверен, что это проблема node-sass, подобная этой .

Не могли бы вы открыть Output-> Svelte в VSCode (см. Внизу, там же, где находится ваш терминал), воспроизвести ошибку и вставить сюда результат?

Возможно связанные: # 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 Я действительно проверил этот вывод перед тем, как опубликовать эту ошибку, и не обнаружил, что Svelte Beta сообщает об ошибках. Я попробую еще раз сегодня, когда смогу, и выложу журналы.

Поскольку это происходит с scss, я очень уверен, что это проблема node-sass, подобная этой.

Я скептически отношусь к этому, но я исследую и посмотрю, что найду.

Из вывода @Egnus я могу сделать вывод, что svelte.config.js был найден. Если конфигурация не найдена, но требуется (из-за того, что lang / type установлен на script / style ), появится сообщение No svelte.config.js found but one is needed появится в журнале.
Он также не имеет ничего общего с htmlxparser svelte2tsx , потому что там не выполняется предварительная обработка. Он терпит неудачу здесь , пытаясь получить диагностику от стройного компилятора.

Вот журнал, который я получил, когда проверял вывод Svelte (пути анонимны; косые черты, как они были при отображении в 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

Практически идентичен выводу VS Code Initializing new ts service at . Не уверен, что это имеет значение, но мне бросается в глаза чередование косых черт между сообщениями.

Также дважды проверил совместимость node-sass с моей версией Windows и Node.js. node-sass v4.14.1 (последняя версия на данный момент) совместима с моей версией node 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 не находит node-sass ни глобальным, ни локальным по VSCode. В то время как та же самая конфигурация накопительного пакета, импортирующая следующие 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? Я понятия не имею, как указать путь node-sass к VSCode на данный момент, кроме самого написания препроцесса.

Я получаю это на мастере, и я не думаю, что на моем компьютере даже установлен node-sass. Машинопись работает (!!!) есть только это довольно раздражающее предупреждение о линтах.

.
├── 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 сделал это возможным 👏

мм. Мне любопытно,

Ага! Спасибо за указатель!

Хорошо, это показывает, что я просто играл и еще не тестировал это в реальном приложении 😆

Есть две неявные зависимости, которые очевидны в ретроспективе, но предупреждение сбивает вас с пути:

1. Ошибка: не удается найти модуль svelte / package.json
2. Ошибка: [svelte-preprocess] Ошибка преобразования машинописного текста. Не удается найти модуль "Машинопись"

Я думаю, было бы круто предложить людям запасные части Typescript и Svelte, чтобы они могли быстро поиграть, подобно тому, как VSCode работает с Typescript.

Что касается запекания этого: я тоже думал об этом, но я думаю, что стройное сообщество, возможно, уже слишком привыкло к настраиваемым препроцессорам. Если бы у нас было все это внутри плагина, это означало бы добавление и установку зависимостей, таких как node-sass, less, babel, .. это раздувает плагин.

Возвращаясь к конкретной проблеме, есть две проблемы:

1. Разрешение модуля иногда лажается. Почему то, что нужно исследовать. Также стоит отметить, что такие настройки, как pnp пряжи, не работают.
2. node-sass очень чувствителен к используемой версии узла. Для меня всегда достаточно установить среду выполнения в настройках svelte beta для исполняемого файла моего узла, который также используется остальной частью приложения. Если вы этого не сделаете, используется версия узла VSCode, которая может не совпадать.

@dummdidumm Я https://news.ycombinator.com/item?id=21376557

Я бы лично пропустил первоклассную поддержку babel и посмотрел, как много людей жалуются - в конфигурации так много вариаций, и она может открыть банку червей с точки зрения поддержки.

Я также не думаю, что есть какие-либо решения CSS, которые получили бы такую ​​единодушную поддержку. Кроме того, поскольку Svelte уже предлагает отличное решение CSS с ограниченным объемом, я не думаю, что это так необходимо, как типизированный javascript.

Ага! Спасибо за указатель!

Хорошо, это показывает, что я просто играл и еще не тестировал это в реальном приложении 😆

Есть две неявные зависимости, которые очевидны в ретроспективе, но предупреждение сбивает вас с пути:

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

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

Я думаю, было бы круто предложить людям запасные части Typescript и Svelte, чтобы они могли быстро поиграть, подобно тому, как VSCode работает с Typescript.

Дело в package.json интересно, нужно это проверить. Он должен вернуться к встроенной версии плагина svelte. Кроме того, сегодня это работает уже только для машинописного текста. Вам необходимо полностью удалить svelte.config.js. Затем используется резервный вариант, который должен иметь дело с машинописным текстом, но не более того. Это не задокументировано, потому что сейчас в этой области слишком много колебаний.

Ага, это потрясающе! Я удалил svelte.config.js и добавил зависимости svelte и typescript . Работает как часы!

Также спасибо @egnus за то, что научил человека ловить рыбу.

да, удаление svelte.config.js решило проблему и для меня

@dummdidumm Проверил и получил тот же отчет об ошибке, что и 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)

Я также экспериментировал с удалением файла svelte.config.js , но в моем случае это не сработало. Однако из того, что я понимаю в обсуждении, кажется, что это было предназначено только для исправления ситуаций, когда использовался только препроцессор машинописного текста.

Возникает вопрос, ищет ли Svelte node-sass или sass в системном пути, а не в node_modules ? Хотя у меня для проекта локально установлено node-sass глобально он не установлен.

Ошибка «Не удается найти ни один из модулей: ...» может появиться, когда пакет не найден, потому что разрешение модуля не нашло его, или потому что он нашел его, но версии узла не совпадают, и node-sass затем выдает ошибка. svelte-preprocess проглатывает обе эти ошибки и просто выдает сообщение «Не удается найти ни один из модулей: ...»

Я пробовал это, и проблему, с которой я столкнулся, можно решить, установив svelte.language-server.runtime как предложил @dummdidumm .
@JoeBobMiles, вы можете попробовать потребовать node-sass в файле js и запустить файл с помощью узла, чтобы увидеть, есть ли какие-либо ошибки.

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles во время этой серии тестов я не просто удалил svelte.config.js но также установил sass как DevDependency (у меня был только node-sass) и установил node-sass глобально.

Поскольку это уже было сделано ранее, безуспешно, когда я удалил файл JS, Svelte Beta сработала, но я действительно не знаю, какие из этих других деталей я повлиял на это, и я не могу протестировать его в данный момент.
Сообщите нам, могут ли эти дополнительные изменения решить проблему. Кроме того, перезапускайте языковые инструменты и окно vscode при каждой попытке.

@ jasonlyu123 Спасибо за совет. Используя ваш фрагмент кода, я не получил никаких ошибок, поэтому предполагаю, что node-sass действительно работает. (Хотя я только что понял, когда набирал это, поскольку Webpack компилировался без проблем, эта проверка могла быть избыточной.)

Однако похоже, что проблема заключалась в node-sass . После установки sass (и установки только sass ) Svelte Beta перестала выдавать предупреждения. Я удалил node-sass из своего проекта, и предупреждения больше не появлялись. Похоже, Svelte Beta искала только sass вместо sass или node-sass .

Кроме того, я поигрался с изменением значения lang с scss на sass и заметил забавное поведение с линтингом. Хотя Svelte Beta больше не жалуется, CSS-линтеру VS Code, похоже, не нравится видеть синтаксис Sass, основанный на отступах, внутри тега стиля:

Хотя я думаю, что это скорее проблема VS Code, чем проблема Svelte Beta.

К сожалению, SASS на данный момент не поддерживается. Мы используем https://github.com/microsoft/vscode-css-languageservice/tree/master/src для линтинга и т. Д., И эта библиотека не поддерживает SASS.

Хотя ваши ошибки кажутся исправленными с помощью обходных путей, я все же хочу оставить это открытым на случай, если кто-то еще столкнется с этой проблемой, а также чтобы разобраться в ней.

Немного отзывов по проблеме. Я столкнулся с той же проблемой и решил ее, установив "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" .

Я думаю, это связано с тем, что среда выполнения узла по умолчанию в расширении vscode Code Helper (Renderer) - это электронная сборка, которая имеет проблемы с разрешением собственной библиотеки, такой как 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, откройте новую проблему.