Language-tools: 支持 PostCSS 验证

您提到的扩展仅提供语法突出显示。 似乎它正在向 css 注入语法规则。 所以只要你安装了扩展，它也会增强你的 svelte 文件上的 css 突出显示。

至于错误，有两个来源。 一种是 svelte 编译器，我们使用它来提供 svelte 特定的诊断，您必须设置必要的预处理器。 你可以按照这里的说明

第二个来源是我们使用的 vscode CSS 语言服务。 您可以通过设置禁用它

svelte.plugin.css.diagnostics: false

我们现在不打算为 postcss 特定语法提供验证。 因此，如果您想验证 postcss，您可以安装其他扩展并将其设置为将 svelte 文件视为 HTML。

关于你提到的扩展的另一件事。 如果你想用它来为你的 svelte 文件提供语法高亮，如果没有必要，不要在 style 上设置 lang=postcss 属性，因为它会将语法注入 css。

您好，感谢您的评论。 我引用了 PostCSS 语言扩展来显示它检查和允许的功能，因为它们可能与您检查错误验证的功能相同。 这个插件的语法高亮效果很好。

当您说我必须设置必要的预处理器时，您链接的说明是否也适用于 PostCSS？ 我假设它是重要的svelete.config.js文件。 我正在使用 sapper，所以我是否必须创建此文件并在此文件中设置我的预处理器并将其导入rollup.config.js以便 Svelte 语言工具理解 PostCSS？

我会试试你建议的。 我知道您不打算支持 PostCSS 验证，但显然我很想支持它，而不必禁用所有 CSS 验证。 感谢您的帮助和聆听！

是的，它也适用于 postcss。
因为语言服务器使用编译器来获取警告和错误，所以它也需要知道如何进行预处理。 svelte.config.js是让语言服务器知道的。

嗨@jasonlyu123我只是想让你知道我创建了一个svelte.config.js文件，但它没有任何效果，也分享给其他人，让他们知道。 了解 svelte 语言服务器寻找什么来确定它需要什么来理解语言会很有用； 仅从提供的示例中我无法判断。

这是我的预处理配置：

const sveltePreprocess = require('svelte-preprocess');
const phtmlUtilityClass = require('phtml-utility-class');

const preprocess = sveltePreprocess({
    postcss: true,
    pug({ content, filename }) {
        const code = pug.render(content)
        return { code, map: null }
    }
});

const myPreprocessor = {
    markup({ content, filename }) {
        content = content.replace(/(\<[^>]*=)(\{[^{}]*\})([^<]*\>)/gmi, (match, p1, p2, p3) => {
            return `${p1}"${p2}"${p3}`
        })
        return phtmlUtilityClass.process(content, { from: filename }).then(result => {
            return { code: result.html, map: null }
        });
    }
}

module.exports = {
    preprocess: [
        preprocess,
        myPreprocessor
    ],
};

尚不支持预处理器数组 #279

感谢那。 我只是检查一下，即使不使用数组，它是否会有所作为，而事实并非如此。 因此，请为您自己和可能发现此问题的其他人提供反馈，这对纠正验证错误没有影响。

const sveltePreprocess = require('svelte-preprocess');
const phtmlUtilityClass = require('phtml-utility-class');

const preprocess = sveltePreprocess({
    postcss: true,
    pug({ content, filename }) {
        const code = pug.render(content)
        return { code, map: null }
    }
});

module.exports = {
    preprocess
};

@limitlessloop你能检查vscode选择svelte的输出窗口，看看有没有错误？
另外，你能提供你的postcss配置吗？ 我以前从未手动设置 postcss。

嗨@jasonlyu123。 感谢您的回复。

下面是输出：

Initialize language server at  /Users/limitlessloop/Sites/stancy/website
Trying to load config for /Users/limitlessloop/Sites/stancy/website/src/components/Button.svelte
Found config at  /Users/limitlessloop/Sites/stancy/website/svelte.config.js
Initialize new ts service at  
SnapshotManager File Statistics:
Project files: 0
Svelte files: 0
From node_modules: 0
Total: 0
Using Svelte v3.23.2 from /Users/limitlessloop/Sites/stancy/website/node_modules/svelte/compiler
Using Svelte v3.23.2 from /Users/limitlessloop/Sites/stancy/website/node_modules/svelte/compiler

下面是我的 PostCSS 配置

module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-logical': {},
        'postcss-preset-env': {
            autoprefixer: {
                flexbox: 'no-2009',
            },
            stage: 3,
            features: {
                'nesting-rules': true,
                'custom-properties': false,
            }
        },
    }
};

这是示例代码：

错误信息是什么？ 我按照你的配置，svelte 错误消失了，只剩下 vscod-css-language-service 的错误。

唔。 🤔

这些是我得到的错误。

} Expected
at-rule or selector expected

是的。 这是vscode-css-language-service的验证错误。 您可以将lang="postcss"属性添加到样式以禁用此文件的 css 验证，或者在工作区中通过 set svelte.plugin.css.diagnostics: false将其关闭。

我明白了，我不清楚你所说的细长错误是什么意思。

我们的电线交叉了吗？ 我知道你可以关闭它，但是添加svelte.config.js文件只是为了关闭它有什么意义？

将lang="postcss"到 style 标签的另一个原因是它会丢失语法突出显示，您之前的建议是不要添加 lang 属性。 此外，PostCSS 与其他预处理器不同，因为它本身不是一种语言，而只是一种可用于支持现代 CSS 的工具，因此，在我看来，它不需要具有 lang 属性。

无论如何，我想了解它是如何工作的（出现错误的根源）然后至少我可以与 PostCSS 社区或 PostCSS 语言支持扩展的制造商讨论有关 Svelte 文件支持的问题。

svelte 编译器编译 css。 所以当它遇到它不理解的语法时，它会抛出一个解析器错误。 这就是我所说的 svelte error 的意思。

svelte.config.js 告诉语言服务器在编译之前使用这个预处理配置进行预处理。
https://github.com/sveltejs/language-tools/blob/17bfd6e27fd8a6cbc6f417eb184bc7d0b1dac727/packages/language-server/src/plugins/svelte/SvelteDocument.ts#L79
所以它添加svelte.config.js并没有抑制错误。

我提到的 vscode-css-language-service 错误在这里
https://github.com/sveltejs/language-tools/blob/17bfd6e27fd8a6cbc6f417eb184bc7d0b1dac727/packages/language-server/src/plugins/css/CSSPlugin.ts#L72
我们只用它来分析 css。 但是此模块不支持您使用的语法，因此它也会引发解析器错误。 正如您在代码中看到的那样。 如果样式的种类是postcss我们将跳过验证。 这就是为什么我说你可以设置属性。 但是你在注入 css 之前提到的语法高亮扩展，而不是 postcss。 所以只要你设置了属性，语法高亮就会关闭。 这就是为什么如果你想使用扩展来提供语法高亮，我建议避免这种情况。 或者你可以找到另一种选择。

但正如你所说。 很多 postcss 功能都是提议语法。 必须添加 lang 属性没有意义。 也许我们可以添加另一种方法来关闭每个文件的 CSS 验证。

谢谢@jasonlyu123。

但是此模块不支持您使用的语法，因此它也会引发解析器错误

通过这个模块，你指的是PostCSS模块吗？ 如果是这样，我是否值得与作者交谈以查看是否可以采取任何措施来支持这一点？ 在我看来，如果 Svelte 语言工具在编译之前使用配置进行预处理以分析 CSS，那么它使用的 PostCSS 模块应该支持它引发错误的语法是有意义的吗？

不，它是 vscode-css-language-service。 他们使用自己的解析器和分析。 而且他们接下来没有计划支持css。

我明白了，感谢您的确认和耐心。

也许你可以使用 stylelint 代替？

好吧，我只是添加了"svelte.plugin.css.diagnostics.enable": false来禁用错误，但是没有用。

我认为我的 svelte.config.js 配置正确

const SveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: SveltePreprocess({
    "defaults": {
      "script": "typescript",
      "style": "postcss" // Tried pcss too
    },
    "postcss": true
  }),
};

我正在使用 PostCSS 语言支持 VSCode 扩展。
当我使用 lang="scss" 或 lang="less" （正如建议的那样）时，错误标记消失了。
但是 lang="pcss" ou lang="postcss" （即使诊断被禁用）也不起作用......
此外，从 Svelte 输出我得到：

• PostCSS configuration was not passed. If you expect to load it from a file, make sure to install "postcss-load-config" and try again ʕ•ᴥ•ʔ （可能重复到svelte-preprocess 问题）
  即安装： "postcss-load-config": "^2.1.0"
  我不知道，我在这里错过了什么？

@jaikme你如何配置 postcss？ 据我所知，postcss 需要设置，而我们的预处理器实例似乎没有选择您的设置。 所以这是一个单独的问题，它与原始帖子无关。

@jasonlyu123好的。
这是我的配置。

它有两个部分 - 让它为构建工作，并让它为 VSCode 扩展工作。 请参阅有关如何设置 PostCSS

我们不太可能添加对高级 css 功能的支持，例如新的 CSS 语法或 TailwindCSS，因为这将成为维护负担。 还有许多其他优秀的 VSCode 扩展在提供高级功能方面做得很好，并且可以与 Svelte 扩展一起使用。