Language-tools: تطلق سمة علامة النمط `lang` تحذيرًا من Svelte Beta

تم إنشاؤها على ٢٩ مايو ٢٠٢٠  ·  30تعليقات  ·  مصدر: sveltejs/language-tools

صف الخلل
عند تحديد سمة lang في علامة <style> للمكون ، يعطي Svelte Beta لـ VS Code التحذير التالي:

The file cannot be parsed because script or style require a preprocessor that doesn't seem to be setup. Did you setup a `svelte.config.js`? See https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#using-with-preprocessors for more info.

يحدث هذا فقط عند تحديد السمة lang على المكون <style> . عند إزالة السمة lang من علامة <style> ، يختفي التحذير ، بغض النظر عما إذا كانت هناك سمة lang على المكون <script> tag.

لإعادة إنتاج
خطوات إعادة إنتاج السلوك:

  1. أنشئ مشروع Svelte + Webpack جديدًا باستخدام: degit svelte/template-webpack
  2. قم بتثبيت TypeScript و Node Sass و Svelte Preprocess: npm i -D typescript node-sass svelte-preprocess
  3. قم بإنشاء ملف svelte.config.js:
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess()
}
  1. أعد تشغيل Svelte Beta في VS Code
  2. أضف علامة lang="scss" إلى <style> tag في src/App.svelte
  3. احفظ الملف. يجب أن يظهر تحذير Svelte Beta على علامة <script>

سلوك متوقع
من المتوقع ألا يقوم Svelte Beta بإرجاع أي تحذيرات أو أخطاء.

لقطات
SvelteWarning
SvelteWarning001
SvelteWarning002
SvelteWarning003

نظام:

  • نظام التشغيل: Windows 10
  • IDE: VSCode 1.45.0
  • المكون الإضافي / الحزمة: "Svelte Beta"

سياق إضافي
كثيرًا ما يوصى به / إصلاحات واضحة لم تنجح:

  • _تحقق مرتين وثلاثية ورباعية من وجود ملف svelte.config.js في جذر مشروعي ._
  • حاولت ضبط وقت التشغيل على المسار إلى Node.js: C:\Program Files\nodejs\node.exe
  • جربت الأنواع التالية من svelte.config.js:
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: [sveltePreprocess()]
}

شبيبة
const sveltePreprocess = تتطلب ('svelte-preprocess')

module.exports = {
preprocess: sveltePreprocess ({
ساس: صحيح
})
}

```js
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess({
    sass: true,
    typescript: true
  })
}
  • يستخدم تكوين Webpack خيارات المعالجة المسبقة التي تم تصديرها بواسطة svelte.config.js ويقوم بتجميع كود Svelte بدون أخطاء أو تحذيرات.
bug

التعليق الأكثر فائدة

لقد جربت هذا ويمكن إصلاح المشكلة التي واجهت من خلال تعيين svelte.language-server.runtime مثل dummdidumm اقترح.
JoeBobMiles ، يمكنك محاولة طلب node-sass في ملف js وتشغيل الملف مع العقدة لمعرفة ما إذا كانت هناك أية أخطاء.

const nodeSass = require('node-sass')

console.log(nodeSass)

ال 30 كومينتر

يحدث هذا أيضًا لي ، بمجرد أن أقوم بتعطيل أي لغة أو تفصيل يشير إلى لغة النمط الذي تم استيراده عبر src="./xxx.scss" يتوقف النظام عن الشكوى منه في بداية الصفحة.

نظرًا لأنه يحدث لـ scss ، فأنا متأكد جدًا من أنها مشكلة عقدة مثل هذه المشكلة.

هل يمكنك فتح 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 ، فأنا متأكد جدًا من أنها مشكلة عقدة مثل هذه المشكلة.

أنا متشكك في أن يكون الأمر كذلك ، لكنني سأحقق وأرى ما أجده.

من إخراج Egnus يمكنني أن أستنتج أنه تم العثور على svelte.config.js . إذا لم يتم العثور على التكوين ولكنه مطلوب (بسبب تعيين lang / type على script / style ) ، رسالة No svelte.config.js found but one is needed ستظهر في السجل.
كما أنه لا علاقة له بـ htmlxparser svelte2tsx ، لأنه لا توجد معالجة مسبقة هناك. فشل هنا أثناء محاولة الحصول على تشخيصات من مترجم svelte.

هذا هو السجل الذي حصلت عليه عندما راجعت إخراج 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 Egnus ، حفظ لإصدار Svelte وإضافة 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 في هذه المرحلة ، بصرف النظر عن كتابة العملية التمهيدية بنفسي.

أحصل على هذا على المستوى الرئيسي ولا أعتقد أنني قد قمت بتثبيت عقدة 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

الصفحة الرئيسية

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

CleanShot 2020-06-02 at 21 37 06@2x

يسعدني اختبار أي شيء آخر للمساعدة في تضييق هذا الأمر.


أود أيضًا ❤️ إزالة svelte.config.js ولديك فقط بعض التكوينات الشائعة المخبوزة. يسعدني فتح العلاقات العامة لتحقيق ذلك. تحرير ، أعتقد أن https://github.com/sveltejs/language-tools/pull/87 جعلت هذا يحدث 👏

mm فضولي matthewmueller ، قم بتحديث Svelte Beta في الامتدادات الخاصة بك وانسخ هنا Output-> Svelte in VSCode (انظر في الأسفل ، حيث يوجد جهازك أيضًا).

آها! شكرا للمؤشر!

حسنًا ، هذا يكشف أنني كنت ألعب للتو ولم أختبر هذا على تطبيق حقيقي بعد 😆

هناك نوعان من التبعيات الضمنية الواضحة في الإدراك المتأخر ، لكن التحذير يقودك إلى الضلال:

  1. خطأ: لا يمكن العثور على الوحدة النمطية 'svelte / package.json'
  2. خطأ: [svelte-preprocess] خطأ في تحويل "الكتابة المطبوعة". لا يمكن العثور على الوحدة النمطية "نص مكتوب"

أعتقد أنه سيكون من الرائع تقديم نسخة احتياطية و Svelte للأشخاص للتشغيل بسرعة ، على غرار طريقة عمل VSCode مع Typescript.

فيما يتعلق بخبز هذا في: لقد فكرت في هذا أيضًا ، لكنني أعتقد أن المجتمع svelte قد يكون بالفعل مستخدمًا جدًا للمعالجات الأولية المخصصة. إذا كان لدينا كل هذا داخل البرنامج المساعد ، فإن هذا يعني إضافة وتثبيت التبعيات مثل node-sass ، و less ، و babel ، .. هذا يؤدي إلى تضخيم المكون الإضافي.

بالعودة إلى المشكلة المحددة ، هناك مشكلتان:

  1. قرار الوحدة المسامير في بعض الأحيان. لماذا هو شيء يحتاج إلى التحقيق. من الجدير بالذكر أيضًا أن الإعدادات مثل pnp للغزل لا تعمل.
  2. node-sass حساس جدًا لإصدار العقدة المستخدم. بالنسبة لي ، يكفي دائمًا ضبط بيئة وقت التشغيل في إعدادات بيتا الرشيقة على العقدة القابلة للتنفيذ التي تستخدمها أيضًا بقية التطبيق. إذا لم تقم بذلك ، فسيتم استخدام إصدار عقدة VSCode وقد لا يتطابق ذلك.

dummdidumm أشعر https://news.ycombinator.com/item؟

لقد تخطيت شخصيًا دعم babel من الدرجة الأولى وأرى كم يشتكي الناس - هناك الكثير من التباين في التكوين ويمكن أن يفتح علبة من الديدان.

لا أعتقد أيضًا أن هناك أي حلول CSS وصلت إلى مثل هذا الدعم بالإجماع. أيضًا نظرًا لأن Svelte يقدم بالفعل حلاً رائعًا لـ CSS ، لا أعتقد أنه ضروري مثل جافا سكريبت المكتوب.

آها! شكرا للمؤشر!

حسنًا ، هذا يكشف أنني كنت ألعب للتو ولم أختبر هذا على تطبيق حقيقي بعد 😆

هناك نوعان من التبعيات الضمنية الواضحة في الإدراك المتأخر ، لكن التحذير يقودك إلى الضلال:

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

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

أعتقد أنه سيكون من الرائع تقديم نسخة احتياطية و Svelte للأشخاص للتشغيل بسرعة ، على غرار طريقة عمل VSCode مع Typescript.

الشيء package.json مثير للاهتمام ، تحتاج إلى التحقق من ذلك. يجب أن يعود إلى الإصدار المدمج المدمج في المكون الإضافي. بصرف النظر عن ذلك ، هذا يعمل اليوم بالفعل للطباعة فقط. تحتاج إلى حذف 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 linter الخاص بـ VS Code لا يحب رؤية بناء جملة Sass القائم على المسافة البادئة داخل علامة النمط:

SvelteWarning004

على الرغم من أنني أعتقد أن هذه مشكلة 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 extenstion Code Helper (Renderer) مصمم خصيصًا للإلكترون ، والذي يواجه مشكلة في حل lib الأصلي مثل 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') (لكن لست متأكدًا من كيفية القيام بالشيء نفسه على النوافذ).

تم توثيقه والتحذير في IDE يشير إلى ذلك أيضًا.

ستكون التحذيرات أفضل في إصدار المنتج القادم ، ويمكن بالفعل اختبارها ليلاً. آمل أن يؤدي هذا إلى تضييق نطاق المشكلة في المستقبل. نظرًا لأن هذه المشكلة بها بالفعل الكثير من الأشياء التي تحدث بالتوازي والتي يتم حل معظمها ، إن لم يكن كل واحد منها ، سأغلق هذا. في حالة حدوث مشكلة متعلقة بـ SCSS ، يرجى فتح مشكلة جديدة.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات