SvelteKit项目中Prettier致VS Code卡顿的排查与解决求助

问题描述 #

在我的SvelteKit项目中，只要启用Prettier扩展，VS Code就会逐渐变慢直至无法使用，保存小文件甚至需要30秒；禁用该扩展后问题完全消失。

环境信息 #

• VS Code版本：1.77.3
• 操作系统：Windows_NT x64
• 5月22日更新：使用VS Code Insider版本全新安装最新版扩展，仍复现相同问题

相关配置文件 #

.prettierrc #

{"useTabs": true,"singleQuote": true,"trailingComma": "none","printWidth": 100,"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],"pluginSearchDirs": [".."],"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]}

.eslintrc #

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
    plugins: ['svelte3', '@typescript-eslint'],
    ignorePatterns: ['*.cjs'],
    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
    settings: {
        'svelte3/typescript': () => require('typescript')
    },
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 2020
    },
    env: {
        browser: true,
        es2017: true,
        node: true
    }
};

.postcss.config.cjs #

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

const config = {
  plugins: [
    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
    tailwindcss(),
    //But others, like autoprefixer, need to run after,
    autoprefixer
  ]
};

module.exports = config;

tailwind.config.cjs #

const config = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {}
    },

    plugins: [require('daisyui')]
};

module.exports = config;

当前运行的扩展（未启用Prettier） #

调试卡顿问题的步骤 #

• 打开VS Code性能分析工具：按Ctrl+Shift+P打开命令面板，输入Developer: Toggle Developer Tools，切换到Performance标签页，点击录制按钮后复现卡顿操作，停止录制后查看火焰图，定位Prettier相关的耗时任务
• 查看Prettier扩展日志：打开命令面板，输入Prettier: Show Output，排查是否有报错或异常信息
• 排查扩展冲突：暂时禁用除Prettier、Svelte相关外的所有扩展，逐一重新启用，确认是否存在与Prettier冲突的扩展
• 测试简化配置：临时修改.prettierrc，移除其中一个Prettier插件（如prettier-plugin-tailwindcss），测试卡顿是否缓解，排查插件间的兼容性问题
• 检查项目文件：确认项目中是否存在超大文件（数千行代码），这类文件会导致Prettier格式化耗时剧增
• 更新依赖与扩展：确保prettier、prettier-plugin-svelte、prettier-plugin-tailwindcss为最新版本，同时尝试升级VS Code到最新稳定版

可能的诱因 #

• 插件兼容性问题：prettier-plugin-tailwindcss与prettier-plugin-svelte版本不兼容，或与ESLint的Prettier集成存在冲突
• 配置不合理：pluginSearchDirs: [".."]会让Prettier遍历上级目录的插件，增加不必要的扫描时间，导致资源占用过高
• 项目文件规模：项目中大量文件或超大文件触发Prettier批量格式化操作，消耗过多CPU和内存
• 扩展本身bug：Prettier扩展存在内存泄漏或性能问题，在Windows环境下表现更明显

内容的提问来源于stack exchange，提问作者Rudy