Language-tools: 스타일 태그 'lang'속성이 Svelte 베타에서 경고를 트리거 함

이것은 또한 나에게도 발생합니다. src="./xxx.scss" 를 통해 가져온 스타일의 언어를 가리키는 언어 나 세부 정보를 비활성화하자마자 시스템이 페이지 시작 부분에서 불평을 중지합니다.

이 SCS들에 대한 발생하기 때문에, 나는 그것이 같은 노드 말대꾸 문제가 있다고 아주 확신 이 하나 .

출력-> Svelte in VSCode (하단의보기, 터미널 위치)를 열고 오류를 재현하고 여기에 출력 내용을 붙여 넣을 수 있습니까?

관련 가능성 있음 : # 32

Node-sass로 로컬 및 전역 적으로 수행 한 작업은 여러 번 다시로드 한 후에도 결과를 변경하지 않았습니다.

이것은 Svelte의 출력입니다.

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

Linting SCSS는 관련이있을 수 있으며 인라인 SCSS가있을 때도 사용했지만 부수적으로 이것은 오류가 아니라 파일 상단에 경고입니다. 구문 분석에 SCSS가 필요하지 않습니다.

나는이 htmlxparser.ts 와 관련된 것이라고 생각합니다.

@dummdidumm 이 버그를 게시하기 전에 실제로 출력을 확인

그것은 scss에서 발생하기 때문에 이와 같은 node-sass 문제라고 확신합니다.

나는 그것이 사실 일 것이라고 회의적이지만 내가 찾은 것을 조사하고 볼 것입니다.

@Egnus 출력에서 svelte.config.js 가 발견되었음을 추론 할 수 있습니다. 구성을 찾을 수 없지만 필요한 경우 ( lang / type 이 (가) script / style ), No svelte.config.js found but one is needed 메시지 로그에 표시됩니다.
또한 svelte2tsx 의 htmlxparser와는 아무런 관련이 없습니다. 왜냐하면 거기에서 수행되는 전처리가 없기 때문입니다. svelte 컴파일러에서 진단을 가져 오는 동안 여기에서 실패합니다.

다음은 Svelte 출력을 확인할 때 얻은 로그입니다 (익명화 된 경로, 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

@Egnus 의 VS Code 출력과 거의 동일하며 Initializing new ts service at 합니다. 그것이 중요한 것인지는 모르겠지만 메시지 사이에 슬래시가 번갈아 가며 눈에 띈다.

또한 node-sass가 내 Windows 및 Node.js 버전과 호환되는지 다시 확인했습니다. node-sass v4.14.1 (현재 최신 릴리스)은 내 버전의 노드 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 는 VSCode에 의해 전역 또는 로컬 모두 node-sass 를 찾지 못하는 것 같습니다. 동일한 롤업 구성이 다음 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의 문제일까요? 전처리를 직접 작성하는 것 외에는이 시점에서 VSCode에 대한 node-sass의 경로를 알려주는 방법을 모릅니다.

나는 이것을 master에서 얻고 있고 내 컴퓨터에 node-sass가 설치되어 있지 않다고 생각합니다. Typescript가 작동 중입니다 (!!!) 다소 성가신 린트 경고가 있습니다.

.
├── 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 이 일을 만들었습니다 👏

mm Im 호기심이 @matthewmueller , 확장 기능에서

아하! 포인터 주셔서 감사합니다!

좋아, 그래서 이것은 내가 놀았고 실제 앱에서 아직 테스트하지 않았다는 것을 드러낸다 😆

돌이켜 보면 명백한 두 가지 암시 적 종속성이 있지만 경고는 당신을 타락하게 만듭니다.

1. 오류 : 'svelte / package.json'모듈을 찾을 수 없습니다.
2. 오류 : [svelte-preprocess] 'typescript'변환 중 오류가 발생했습니다. 'typescript'모듈을 찾을 수 없습니다.

VSCode가 Typescript에서 작동하는 방식과 유사하게 사람들이 빠르게 놀 수 있도록 대체 Typescript 및 Svelte를 제공하는 것이 멋질 것이라고 생각합니다.

이것을 굽는 것과 관련하여 : 나도 이것에 대해 생각했지만, 날씬한 커뮤니티가 이미 사용자 지정 전처리기에 너무 익숙 할 수 있다고 생각합니다. 이 모든 것이 플러그인 안에 있다면, 이것은 node-sass, less, babel, ..과 같은 의존성을 추가하고 설치하는 것을 의미합니다. 이것은 플러그인을 부풀게합니다.

특정 문제로 돌아 가면 두 가지 문제가 있습니다.

1. 모듈 해상도는 때때로 망가집니다. 조사가 필요한 이유는 무엇입니까? yarn의 pnp와 같은 설정이 작동하지 않는다는 점도 주목할 가치가 있습니다.
2. node-sass는 사용되는 노드 버전에 매우 민감합니다. 나에게 있어서는 날씬한 베타 설정에서 런타임 환경을 나머지 앱에서도 사용되는 내 노드 실행 파일로 설정하는 것으로 충분합니다. 그렇게하지 않으면 VSCode의 노드 버전이 사용되며 일치하지 않을 수 있습니다.

@dummdidumm 나는 당신의 감정에 대해 느낍니다. 그러나 저는 개인적으로 Typescript가 일류 지원을 보장하는 특정 수준의 인기에 도달했다고 생각합니다. 대부분의 새로운 코드베이스는 Typescript로 시작하고 이전 코드베이스는 업그레이드되고 있습니다. 이것은 많은 사람들이 Svelte를 시도하는 것을 차단하고 있습니다 : https://news.ycombinator.com/item?id=21376557

저는 개인적으로 일류 바벨 지원을 건너 뛰고 사람들이 얼마나 불평하는지보고 싶습니다. 구성에 너무 많은 가변성이 있고 지원 측면에서 웜 캔을 열 수 있습니다.

또한 이러한 만장일치 지원에 도달 한 CSS 솔루션이 없다고 생각합니다. 또한 Svelte는 이미 훌륭한 범위의 CSS 솔루션을 제공하기 때문에 형식화 된 자바 스크립트만큼 필요하다고 생각하지 않습니다.

아하! 포인터 주셔서 감사합니다!

좋아, 그래서 이것은 내가 놀았고 실제 앱에서 아직 테스트하지 않았다는 것을 드러낸다 😆

돌이켜 보면 명백한 두 가지 암시 적 종속성이 있지만 경고는 당신을 타락하게 만듭니다.

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

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

VSCode가 Typescript에서 작동하는 방식과 유사하게 사람들이 빠르게 놀 수 있도록 대체 Typescript 및 Svelte를 제공하는 것이 멋질 것이라고 생각합니다.

package.json은 흥미 롭습니다. 확인해야합니다. 플러그인의 내장 된 svelte 버전으로 돌아 가야합니다. 그 외에도, 이것은 이미 타이프 스크립트에서만 작동합니다. svelte.config.js를 완전히 삭제해야합니다. 그런 다음 typescript를 다룰 수 있지만 그 이상은 처리 할 수없는 폴 백이 사용됩니다. 현재 해당 영역에 너무 많은 변동이 있기 때문에 이것은 문서화되지 않았습니다.

네, 놀랍습니다! svelte.config.js 제거하고 svelte 및 typescript 종속성을 추가했습니다. 매력처럼 작동합니다!

남자에게 물고기를 가르쳐 준 @egnus 에게도 감사드립니다.

예, svelte.config.js 제거하면 문제도 해결되었습니다.

@dummdidumm 확인하고

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 파일을 제거하는 실험을했지만 제 경우에는 작동하지 않았습니다. 그래도 토론에 대해 이해 한 바에 따르면 typescript 전처리기만 사용되는 상황 만 수정하려는 것 같습니다.

이것이 제기하는 질문은 Svelte가 node_modules 대신 시스템 경로에있을 node-sass 또는 sass 를 찾고 있는지 여부입니다. 프로젝트를 위해 로컬로 node-sass 설치했지만 전역 적으로 설치하지는 않았습니다.

"모듈을 찾을 수 없음 : ..."오류는 패키지를 찾을 수없는 경우, 모듈 확인에서 찾지 못했거나 발견했지만 노드 버전이 일치하지 않아 node-sass가 발생하면 나타날 수 있습니다. 오류. svelte-preprocess 는이 두 오류를 모두 삼키고 "모듈을 찾을 수 없습니다 : ..."를 내 보냅니다.

나는 이것을 시도했고 내가 겪은 문제 는 svelte.language-server.runtime 를 설정하여 해결할 수 있습니다.
@JoeBobMiles js 파일에서 node-sass 를 요구하고 노드로 파일을 실행하여 오류가 있는지 확인할 수 있습니다.

const nodeSass = require('node-sass')

console.log(nodeSass)

이 테스트 중 @JoeBobMiles 는 svelte.config.js 제거하는 것이 아니라 DevDependency로 sass 도 설치하고 (노드 sass 만 있음) 전역 적으로 node-sass를 설치했습니다.

이미 이전에 성공하지 못한 상태에서 JS 파일을 제거했을 때 Svelte Beta가 작동했지만 다른 세부 사항 중 어떤 것이 영향을 받았는지 실제로 알 수 없으며 지금은 테스트 할 수 없습니다.
이러한 추가 변경으로 문제를 해결할 수 있는지 알려주십시오. 또한 시도 할 때마다 Language-tools 및 vscode 창을 다시 시작하십시오.

@ jasonlyu123 조언 감사합니다. 코드 스 니펫을 사용하여 오류가 발생하지 않았으므로 node-sass 가 실제로 작동한다고 가정합니다. (웹팩이 문제없이 컴파일 되었기 때문에이 검사가 중복되었을 수 있다는 것을 방금 입력 한 것으로 깨달았습니다.)

그러나 node-sass 가 문제인 것 같습니다. sass 설치하고 sass 만 설치 한 후 Svelte Beta는 경고보고를 중지했습니다. 내 프로젝트에서 node-sass 을 제거했는데 경고가 다시 나타나지 않았습니다. Svelte Beta는 sass 또는 node-sass 대신 sass 만 찾고있는 것 같습니다.

또한 lang 값을 scss 에서 sass 로 변경하는 작업을 수행했으며 linting과 관련된 재미있는 동작을 발견했습니다. Svelte Beta는 더 이상 불평하지 않지만 VS Code의 CSS linter는 스타일 태그 내에서 들여 쓰기 기반 Sass 구문을 보는 것을 좋아하지 않는 것 같습니다.

Svelte 베타 문제보다 VS 코드 문제라고 생각합니다.

SASS는 현재로서는 지원되지 않습니다. Linting 등을 위해 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와 같은 네이티브 lib를 해결하는 데 문제가 있다고 생각합니다.

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 관련 문제가 발생하면 새 문제를여십시오.