Prettier freezing VS Code in SvelteKit project

Question

Unless I disable the Prettier extension for my SvelteKit project, VS Code gradually gets slower and slower until it's unusable and saving a small file can take up to 30 seconds. Disabling the extension resolved the issue.

I'm using VS Code 1.77.3, OS: Windows_NT x64.

How can I debug what is going wrong and why it's running so slow, and what could be the cause of the issue?

.prettierrc:

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

.eslitrc:

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;

Running extensions (without Prettier)

Update 22.05 I tried reproducing the issue by starting with a "clean" slate, so I downloaded Visual Studio Code - Insiders and installed the newest versions of the extensions, and the issue was reproduced when installing the same plugins.

Answer 1

Based on my experience, the decrease in speed is not caused directly by Prettier. Rather, it is caused by other extensions that are installed in Visual Studio Code and affect the formatting. You should investigate whether any of the active extensions are generating errors.

After some test I personally found that disabling "Tailwind CSS IntelliSense" is helping a lot on my vs-code env.