Language-tools: Atribut `lang` tag gaya memicu peringatan dari Svelte Beta

Ini juga terjadi pada saya, segera setelah saya menonaktifkan bahasa atau detail apa pun yang menunjuk bahasa gaya yang diimpor melalui src="./xxx.scss" sistem berhenti mengeluhkannya di awal halaman.

Karena ini terjadi untuk scss, saya sangat yakin bahwa ini adalah masalah node-sass seperti ini .

Bisakah Anda membuka Output-> Svelte di VSCode (lihat di bagian bawah, juga di mana terminal Anda), mereproduksi kesalahan dan menempel di sini apa outputnya?

Mungkin terkait: # 32

tidak ada yang dilakukan dengan Node-sass secara lokal dan global telah mengubah hasilnya bahkan setelah beberapa kali memuat ulang.

Ini adalah output dari Svelte (perhatikan saya memiliki 3.20.1 karena bug dalam versi yang diperbarui tidak memungkinkan saya untuk meningkatkan proyek, dilaporkan juga)

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 linting dapat dikaitkan dan saya juga biasa memilikinya ketika saya memiliki SCSS inline, tetapi hanya sebagai catatan tambahan, ini bukan kesalahan, ini adalah peringatan, di bagian atas file. Tidak ada SCSS yang diperlukan untuk diurai.

Saya yakin ada sesuatu yang berhubungan dengan htmlxparser.ts ini

@dummdidumm Saya benar-benar memeriksa keluaran itu sebelum memposting bug ini dan tidak melihat kesalahan yang dilaporkan oleh Svelte Beta. Saya akan mencoba lagi hari ini ketika saya bisa dan memposting log.

Karena ini terjadi untuk scss, saya sangat yakin bahwa ini adalah masalah node-sass seperti ini.

Saya skeptis bahwa itu masalahnya, tetapi saya akan menyelidiki dan melihat apa yang saya temukan.

Dari keluaran @Egnus saya dapat menyimpulkan bahwa svelte.config.js telah ditemukan. Jika konfigurasi tidak ditemukan tetapi diperlukan (karena lang / type disetel pada script / style ), pesan No svelte.config.js found but one is needed akan muncul di log.
Ini juga tidak ada hubungannya dengan htmlxparser svelte2tsx , karena tidak ada preprocessing yang dilakukan di sana. Gagal di sini saat mencoba mendapatkan diagnostik dari kompiler langsing.

Inilah log yang saya dapatkan ketika saya memeriksa output Svelte (jalur dianonimkan; garis miring seperti saat ditampilkan dalam 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

Hampir identik dengan keluaran VS Code Initializing new ts service at . Tidak yakin itu konsekuensinya, tetapi pergantian garis miring di antara pesan menonjol bagi saya.

Juga periksa ulang bahwa node-sass kompatibel dengan versi Windows dan Node.js. node-sass v4.14.1 (rilis terbaru saat ini) kompatibel dengan versi node saya, v13.7.

Bisakah Anda memeriksanya sekali lagi? Saya mendorong pembaruan dengan lebih banyak masuk di area itu dan juga sedikit memperbarui pesan kesalahan yang dihadapi pengguna.

Apakah Anda mengacu pada komit di atas? Jika demikian, saya telah memeriksa setelah komit digabungkan, dan telah menginstal pembaruan baru sebelum memeriksa.

Ekstensi dipublikasikan setiap malam, terakhir kali sekitar 8 jam yang lalu, jadi log Anda 14 jam yang lalu kemungkinan besar menggunakan versi "lama".

Ah, begitu. Saya akan mendapatkan log baru saat saya mampu berikutnya.

Saya juga akan memeriksanya dalam beberapa jam atau sebelumnya

Mmmm menarik, kamu benar:

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)

Saya akan memeriksa mengapa svelte.config.js tidak menggunakannya dan kembali

Oke, jadi tampaknya svelte-preprocess tidak menemukan node-sass baik global maupun lokal oleh VSCode. Sementara Rollup Config yang sama mengimpor svelte.config.js ini.

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

Mungkinkah masalah Svelte Beta? Saya tidak tahu bagaimana cara mengetahui jalur node-sass ke VSCode pada saat ini, selain menulis preprocess sendiri.

Saya mendapatkan ini di master dan saya rasa saya bahkan tidak menginstal node-sass di komputer saya. Ketik berfungsi (!!!) hanya ada peringatan lint yang agak mengganggu ini.

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

Senang menguji lebih lanjut untuk membantu mempersempit ini.

Saya juga ❤️ untuk menghapus svelte.config.js dan hanya memiliki beberapa konfigurasi umum. Senang membuka PR untuk mewujudkannya. Sunting , saya _think_ https://github.com/sveltejs/language-tools/pull/87 membuat ini terjadi 👏

mm Saya penasaran @matthewmueller , perbarui Svelte Beta di ekstensi Anda dan salin di sini Output-> Svelte di VSCode (lihat di bagian bawah, juga di mana terminal Anda berada).

Aha! Terima kasih atas penunjuknya!

Oke, jadi ini menunjukkan bahwa saya hanya bermain-main dan belum mengujinya di aplikasi nyata 😆

Ada dua dependensi implisit yang terlihat jelas di belakang, tetapi peringatan itu menyesatkan Anda:

1. Kesalahan: Tidak dapat menemukan modul 'svelte / package.json'
2. Kesalahan: [svelte-preprocess] Kesalahan saat mengubah 'skrip ketikan'. Tidak dapat menemukan 'skrip ketikan' modul

Saya pikir akan keren untuk menawarkan Typecript dan Svelte fallback bagi orang-orang untuk bermain-main dengan cepat, mirip dengan cara VSCode bekerja dengan Typecript.

Mengenai memanggang ini di: Saya juga memikirkan ini, tapi saya pikir komunitas langsing mungkin sudah terlalu terbiasa dengan preprocessor kustom. Jika kita memiliki semua ini di dalam plugin, ini berarti menambahkan dan menginstal dependensi seperti node-sass, less, babel, .. ini akan membuat plugin bertambah besar.

Kembali ke masalah khusus, ada dua masalah:

1. Resolusi modul terkadang kacau. Mengapa ada sesuatu yang perlu diselidiki. Perlu juga dicatat bahwa pengaturan seperti benang pnp tidak berfungsi.
2. node-sass sangat sensitif terhadap versi node yang digunakan. Bagi saya itu selalu cukup untuk mengatur lingkungan runtime dalam pengaturan beta langsing ke node saya yang dapat dieksekusi yang juga digunakan oleh aplikasi lainnya. Jika Anda tidak melakukannya, versi node VSCode akan digunakan dan mungkin tidak cocok.

@dummdidumm Saya merasakan sentimen Anda, tetapi menurut saya pribadi Typecript telah mencapai tingkat popularitas tertentu yang memerlukan dukungan kelas satu. Sebagian besar basis kode baru dimulai dengan Skrip Ketik dan yang lama ditingkatkan versinya. Ini memblokir banyak orang untuk mencoba Svelte: https://news.ycombinator.com/item?id=21376557

Secara pribadi saya akan melewatkan dukungan babel kelas satu dan melihat seberapa banyak orang mengeluh - ada begitu banyak variabilitas dalam konfigurasi dan dapat membuka kaleng dukungan worm.

Saya juga tidak berpikir ada solusi CSS yang telah mencapai dukungan bulat seperti itu. Juga karena Svelte sudah menawarkan solusi CSS cakupan yang hebat, saya rasa itu tidak sepenting javascript yang diketik.

Aha! Terima kasih atas penunjuknya!

Oke, jadi ini menunjukkan bahwa saya hanya bermain-main dan belum mengujinya di aplikasi nyata 😆

Ada dua dependensi implisit yang terlihat jelas di belakang, tetapi peringatan itu menyesatkan Anda:

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

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

Saya pikir akan keren untuk menawarkan Typecript dan Svelte fallback bagi orang-orang untuk bermain-main dengan cepat, mirip dengan cara VSCode bekerja dengan Typecript.

Hal package.json menarik, perlu memeriksanya. Ini harus kembali ke versi bawaan plugin yang ramping. Selain itu, ini berfungsi hari ini hanya untuk skrip ketikan. Anda perlu menghapus svelte.config.js sepenuhnya. Kemudian fallback digunakan yang seharusnya dapat menangani skrip ketikan tetapi tidak lebih. Ini tidak didokumentasikan karena saat ini terdapat terlalu banyak fluktuasi di daerah itu.

Ya, ini luar biasa! Saya telah menghapus svelte.config.js dan menambahkan svelte dan typescript ketergantungan. Ini bekerja seperti pesona!

Juga terima kasih kepada @egnus karena telah mengajari seorang pria memancing.

ya, menghapus svelte.config.js memecahkan masalah untuk saya juga

@dummdidumm Memeriksa dan mendapatkan laporan kesalahan yang sama seperti yang dilakukan 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)

Saya juga bereksperimen dengan menghapus file svelte.config.js , tetapi tidak berhasil untuk kasus saya. Dari apa yang saya pahami tentang diskusi, tampaknya itu dimaksudkan hanya untuk memperbaiki situasi di mana hanya preprocessor skrip yang digunakan.

Pertanyaan yang muncul adalah jika Svelte mencari node-sass atau sass untuk berada di jalur sistem, bukan di node_modules ? Meskipun saya memiliki node-sass diinstal secara lokal untuk proyek tersebut, saya belum menginstalnya secara global.

Kesalahan "Tidak dapat menemukan modul apa pun: ..." dapat muncul ketika paket tidak ditemukan, karena resolusi modul tidak menemukannya, atau karena memang menemukannya tetapi versi node tidak cocok dan node-sass kemudian melempar sebuah kesalahan. svelte-preprocess menelan kedua kesalahan ini dan hanya menampilkan "Tidak dapat menemukan modul apa pun: ..."

Saya mencoba ini dan masalah yang saya hadapi dapat diperbaiki dengan menyetel svelte.language-server.runtime seperti yang disarankan @dummdidumm .
@JoeBobMiles Anda dapat mencoba meminta node-sass dalam file js dan menjalankan file dengan node untuk melihat apakah ada kesalahan.

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles selama svelte.config.js tetapi juga menginstal sass sebagai DevDependency (saya hanya memiliki node-sass), dan menginstal node-sass secara global.

Dengan ini sudah dilakukan sebelumnya, tanpa berhasil, ketika saya menghapus file JS, Svelte Beta berfungsi, tetapi saya benar-benar tidak tahu detail mana yang saya pengaruhi dan saya tidak dapat mengujinya saat ini.
Beri tahu kami jika salah satu perubahan tambahan ini dapat menyelesaikan masalah. Juga, restart alat Bahasa dan jendela vscode dengan setiap percobaan.

@ jasonlyu123 Terima kasih atas sarannya. Dengan menggunakan potongan kode Anda, saya tidak menerima kesalahan apa pun, jadi saya berasumsi bahwa node-sass benar-benar berfungsi. (Meskipun saya baru menyadari saat mengetik ini bahwa karena Webpack sedang dikompilasi tanpa masalah, pemeriksaan itu mungkin berlebihan.)

Namun, tampaknya node-sass adalah masalahnya. Setelah menginstal sass (dan hanya menginstal sass ), Svelte Beta berhenti melaporkan peringatan. Saya menghapus node-sass dari proyek saya dan peringatan tidak muncul kembali. Sepertinya Svelte Beta hanya mencari sass bukan sass atau node-sass .

Selain itu, saya bermain-main dengan mengubah nilai lang dari scss menjadi sass dan melihat beberapa perilaku lucu dengan linting. Sementara Svelte Beta tidak lagi mengeluh, linter CSS VS Code tampaknya tidak suka melihat sintaks Sass berbasis indentasi di dalam tag gaya:

Meskipun saya pikir itu lebih merupakan masalah VS Code daripada masalah Svelte Beta.

Sayangnya SASS tidak didukung untuk saat ini. Kami menggunakan https://github.com/microsoft/vscode-css-languageservice/tree/master/src untuk linting dll dan pustaka tersebut tidak mendukung SASS.

Meskipun kesalahan Anda tampaknya diperbaiki melalui beberapa solusi, saya tetap ingin membiarkan ini terbuka jika ada orang lain yang menemukan masalah ini, dan juga untuk menyelesaikan masalah ini.

Sedikit umpan balik tentang masalah ini. Saya mengalami masalah yang sama, dan diselesaikan dengan menyetel "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" .

Saya pikir ini karena runtime node default di vscode extenstion Code Helper (Renderer) adalah elektron yang dibuat khusus, yang memiliki masalah dalam menyelesaikan lib asli seperti node-sass.

ps aux keluaran:

/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

Perlu mendokumentasikannya di suatu tempat. Atau lebih baik, secara default coba cari biner node normal untuk pengguna tepat di dalam ekstensi seperti exec('/usr/bin/env which node') (Namun, tidak yakin bagaimana melakukan hal yang sama pada windows).

Ini didokumentasikan dan peringatan di IDE juga mengisyaratkan hal ini.

Peringatan akan lebih baik di rilis prod yang akan datang, sudah bisa diuji pada malam hari. Saya harap ini akan mempersempit masalah di masa depan. Karena masalah ini sudah memiliki terlalu banyak hal yang terjadi secara paralel yang sebagian besar jika tidak semuanya terpecahkan, saya akan menutup ini. Jika terjadi masalah terkait SCSS, buka masalah baru.