search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.76k stars 186 forks source link

VSCode Hangs indefinitely while Formatting on save since version 0.9.8 #755

Closed glekner closed 8 months ago

glekner commented 1 year ago

What version of Tailwind CSS IntelliSense are you using?

v0.9.8+

What version of Tailwind CSS are you using?

v3.2.7

What package manager are you using?

yarn

What operating system are you using?

macOS

Tailwind config

/* eslint-disable unicorn/prefer-module */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/**/!(@generated)/*.{ts,tsx}', './index.html'],
  darkMode: ['class', `.bp3-dark`],
  theme: {
    extend: {
      colors: {
        primary: '#0254ec',
        foreground: '#ffffff',
        tint1: '#F9F9FB',
        tint2: '#F5F6F7',

        text: {
          default: '#222',
          muted: '#737376',
          disabled: '#A6B1BB',
        },

        border: {
          default: '#E4E7EB',
          muted: '#F5F6F7',
        },

        // dark theme colors
        dark: {
          foreground: '#0D1116',
          tint1: '#161B22',
          tint2: '#1c232b',

          text: {
            default: '#234361',
            muted: '#8C949E',
            disabled: '#535a63',
          },

          border: {
            default: '#30363D',
            muted: '#E4E7EB',
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')({
      // disable base styles since it conflicts with blueprint css
      strategy: 'class',
    }),
  ],
  corePlugins: {
    // disable preflight since we use blueprint css normalization
    preflight: false,
  },
};

VS Code settings

{
  "editor.fontFamily": "Jetbrains Mono, Copyright Klim Type Foundry, SF Mono,IBM Plex Mono, Consolas",
  "editor.inlineSuggest.enabled": true,
  "terminal.integrated.defaultProfile.osx": "fish",
  "terminal.integrated.defaultProfile.linux": "zsh",
  "terminal.integrated.fontSize": 12,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "git.confirmSync": false,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "redhat.telemetry.enabled": false,
  "editor.fontSize": 13,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": true,
    "markdown": false,
    "json": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "editor.formatOnSave": true,
  "workbench.colorCustomizations": {
    "[Horizon Extended]": {
      "editor.background": "#1e252d",
      "tab.border": "#474a62a1",
      "panel.border": "#474a62a1",
      "sideBar.border": "#474a62a1",
      "titleBar.border": "#474a62a1",
      "panel.dropBorder": "#474a62a1",
      "activityBar.border": "#474a62a1",
      "menu.border": "#474a62a1",
      "terminal.border": "#474a62a1",
      "tab.activeBorder": "#98a4fc",
      "editorGroup.border": "#474a62a1",
      "activityBar.inactiveForeground": "#9f9cb2",
      "activityBar.foreground": "#d19fff",
      "scrollbarSlider.background": "#d6dbff3e"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Night Wolf (dark blue)]": {}
  },
  "editor.minimap.enabled": false,
  "explorer.sortOrder": "type",
  "editor.guides.bracketPairs": "active",
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "terminal.integrated.enablePersistentSessions": false,
  "editor.cursorSmoothCaretAnimation": "on",
  "workbench.list.smoothScrolling": true,
  "git.mergeEditor": true,
  "editor.codeLensFontFamily": "Copyright Klim Type Foundry",
  "editor.inlayHints.fontFamily": "Copyright Klim Type Foundry",
  "helium-icon-theme.folders.color": "#90a4ae",
  "helium-icon-theme.folders.theme": "specific",
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "editor.accessibilitySupport": "off",
  "debug.console.fontFamily": "Copyright Klim Type Foundry",
  "telemetry.telemetryLevel": "off",
  "oneDarkPro.italic": false,
  "breadcrumbs.symbolPath": "off",
  "window.commandCenter": true,
  "workbench.editor.autoLockGroups": {
    "jsProfileVisualizer.cpuprofile.table": true
  },
  "editor.fontLigatures": false,
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "editor.foldingMaximumRegions": 10000,
  "turboConsoleLog.wrapLogMessage": false,
  "turboConsoleLog.logMessagePrefix": "",
  "turboConsoleLog.includeFileNameAndLineNum": false,
  "editor.stickyScroll.enabled": true,
  "mergeEditor.diffAlgorithm": "experimental",
  "yaml.customTags": [
    "!And",
    "!And sequence",
    "!If",
    "!If sequence",
    "!Not",
    "!Not sequence",
    "!Equals",
    "!Equals sequence",
    "!Or",
    "!Or sequence",
    "!FindInMap",
    "!FindInMap sequence",
    "!Base64",
    "!Join",
    "!Join sequence",
    "!Cidr",
    "!Ref",
    "!Sub",
    "!Sub sequence",
    "!GetAtt",
    "!GetAZs",
    "!ImportValue",
    "!ImportValue sequence",
    "!Select",
    "!Select sequence",
    "!Split",
    "!Split sequence"
  ],
  "extensions.experimental.useUtilityProcess": true,
  "editor.smoothScrolling": true,
  "githubPullRequests.notifications": "pullRequests",
  "remote.SSH.remotePlatform": {
    "sandbox.1vs96w.csb": "linux",
    "wiz-sec.wiz.develop.csb": "linux"
  },
  "eslint.alwaysShowStatus": true,
  "debug.javascript.autoAttachFilter": "disabled",
  "svelte.enable-ts-plugin": true,
  "svelte.plugin.svelte.note-new-transformation": false,
  "totalTypeScript.hideAllTips": false,
  "totalTypeScript.hideBasicTips": true,
  "totalTypeScript.hiddenTips": [
    "passing-generics-to-types",
    "non-null-expression",
    "keyof",
    "typeof",
    "record-utility-type",
    "partial-utility-type",
    "nonnullable-utility-type",
    "omit-utility-type",
    "returntype-utility-type",
    "generic-slots-in-functions"
  ],
  "githubPullRequests.pullBranch": "never",
  "settingsSync.ignoredSettings": ["terminal.integrated.fontFamily"],
  "terminal.integrated.fontFamily": "Jetbrains Mono,SF Mono, Consolas, Copyright Klim Type Foundry",
  "terminal.integrated.persistentSessionReviveProcess": "never",
  "workbench.iconTheme": "bearded-icons",
  "workbench.colorTheme": "GitHub Dark",
  "git.openRepositoryInParentFolders": "never",
  "workbench.productIconTheme": "fluent-icons",
  "editor.letterSpacing": -0.2,
  "terminal.integrated.smoothScrolling": true
}

Reproduction URL

no need

Describe your issue

image

VSCode Hangs indefinitely while Formatting on save since version 0.9.8 and above. This can start happening between 10-30 min after starting a coding session. Disabling this extension solves the Issue, can you please take a look?

bengry commented 1 year ago

I've had this issue as well, and after disabling tailwindCSS.validate, I think it's pretty much gone. So that's probably the root cause, not anything else in the extension.

binaryartifex commented 1 year ago

also have this issue on windows OS in my nrwl/nx monorepo. recent occurrence. about 10-30 min in my project becomes unusable and im forced to constantly enable/disable this extension or shut down/start up vscode entirely

ptrxyz commented 1 year ago

yep, also observing this. can i simply downgrade until this is fixed?

thecrypticace commented 1 year ago

Do you all have the prettier extension installed? If so, if you downgrade to v0.2.5 do you still see this issue?

ptrxyz commented 1 year ago

@thecrypticace Do you mean this one? https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode I am using it, version 9.10.4. However the last release is months ago and I am pretty sure the issue is not that old.

thecrypticace commented 1 year ago

That is the one I'm talking about yes. There've been reports of slowness regarding the tailwindcss prettier plugin inside VSCode which I'm investigating. I'm not certain yet if they're related. Just gathering data currently.

bengry commented 1 year ago

That is the one I'm talking about yes. There've been reports of slowness regarding the tailwindcss prettier plugin inside VSCode which I'm investigating. I'm not certain yet if they're related. Just gathering data currently.

I use that extension as well, but not the tailwind plugin for prettier. So I'm not sure that's related.

thecrypticace commented 1 year ago

Ah that's good to know! Thanks!

bradennapier commented 1 year ago

Also running into this. At first i thought it was the custom regex rules but happens with vanilla settings too. It is def always Tailwind + Prettier when it hangs but removing tailwind extension fixes it up

valgeirb commented 1 year ago

Can we do something to help? This is driving me nuts.

joneath commented 1 year ago

For those that are experiencing this, is your codebase a Vue app? Do you have the Volar extension installed? I first blamed the Tailwind plugin but removing it did not fix this issue. When viewing the locked up VS Code Extension Host process it has a call chain starting with volar -> prettier -> tailwind. In the Volar issues they have been reporting this bug as well and supposedly it's fixed in the most recent pre-release. 🤞

bradlc commented 1 year ago

Hey all. I'm more than happy to take a look into this issue but it's going to be incredibly difficult without some more information. If somebody could share the following that would be a great help:

It would also be interesting to know what everyone is actually seeing when this is happening. Is everyone seeing the code actions message? And does it ever only have Tailwind CSS IntelliSense listed? Or are there always other extensions mentioned?

@glekner, does the issue go away for you if you downgrade to v0.9.7?

glekner commented 1 year ago

@bradlc I managed to reproduce the issue with v0.9.7 now. Not sure how to proceed here, could this be a combination with the prettier extension? Anyway we can rule out the issue being coupled with 0.9.8.

fturmel commented 1 year ago

@bradlc I am experiencing this issue as well in a NextJS 13 and TypeScript codebase. I did see the code actions message too, both Tailwind CSS IntelliSense and ESLint were listed but will take screenshots next time.

VS Code extensions - alefragnani.Bookmarks@13.3.1 - amiralizadeh9480.laravel-extra-intellisense@0.6.3 - Angular.ng-template@15.2.1 - astro-build.astro-vscode@0.28.2 - bierner.markdown-mermaid@1.18.1 - bmewburn.vscode-intelephense-client@1.9.5 - bowlerhatllc.vscode-as3mxml@1.16.0 - bowlerhatllc.vscode-nextgenas@2.0.0 - bowlerhatllc.vscode-swf-debug@1.6.1 - bpruitt-goddard.mermaid-markdown-syntax-highlighting@1.5.1 - bradlc.vscode-tailwindcss@0.9.11 - bungcip.better-toml@0.3.2 - clinyong.vscode-css-modules@0.4.2 - codingyu.laravel-goto-view@1.3.8 - csstools.postcss@1.0.9 - dbaeumer.vscode-eslint@2.4.0 - denoland.vscode-deno@3.17.0 - eamodio.gitlens@13.5.0 - ecmel.vscode-html-css@1.13.1 - EditorConfig.EditorConfig@0.16.4 - Equinusocio.vsc-community-material-theme@1.4.6 - Equinusocio.vsc-material-theme@33.8.0 - equinusocio.vsc-material-theme-icons@2.7.5 - esbenp.prettier-vscode@9.10.4 - formulahendry.auto-rename-tag@0.1.10 - GitHub.vscode-pull-request-github@0.62.0 - glitchbl.laravel-create-view@0.0.6 - golang.go@0.38.0 - GrapeCity.gc-excelviewer@4.2.57 - Gruntfuggly.todo-tree@0.0.226 - hangxingliu.vscode-systemd-support@1.0.1 - HTMLHint.vscode-htmlhint@1.0.4 - IHunte.laravel-blade-wrapper@1.0.1 - jock.svg@1.5.2 - mhutchie.git-graph@1.30.0 - mikestead.dotenv@1.0.1 - mquandalle.graphql@0.1.2 - ms-azuretools.vscode-docker@1.25.0 - ms-python.isort@2022.8.0 - ms-python.python@2023.6.1 - ms-python.vscode-pylance@2023.4.20 - ms-toolsai.jupyter@2023.3.1201040234 - ms-toolsai.jupyter-keymap@1.1.0 - ms-toolsai.jupyter-renderers@1.0.15 - ms-toolsai.vscode-jupyter-cell-tags@0.1.8 - ms-toolsai.vscode-jupyter-slideshow@0.1.5 - ms-vscode-remote.remote-containers@0.288.1 - ms-vscode-remote.remote-ssh@0.100.0 - ms-vscode-remote.remote-ssh-edit@0.84.0 - ms-vscode.cmake-tools@1.13.45 - ms-vscode.cpptools@1.14.5 - ms-vscode.cpptools-extension-pack@1.3.0 - ms-vscode.cpptools-themes@2.0.0 - ms-vscode.js-debug-nightly@2023.4.1317 - ms-vscode.live-server@0.4.7 - ms-vscode.remote-explorer@0.4.0 - mtxr.sqltools@0.27.1 - naoray.laravel-goto-components@1.2.0 - onecentlin.laravel-blade@1.34.0 - onecentlin.laravel-extension-pack@1.1.0 - onecentlin.laravel5-snippets@1.17.0 - pflannery.vscode-versionlens@1.5.0 - PKief.material-icon-theme@4.26.0 - pranaygp.vscode-css-peek@4.2.0 - Prisma.prisma@4.13.0 - quicktype.quicktype@12.0.46 - redhat.java@1.17.0 - REditorSupport.r@2.7.2 - rust-lang.rust-analyzer@0.3.1481 - ryannaddy.laravel-artisan@0.0.28 - samuelcolvin.jinjahtml@0.20.0 - shufo.vscode-blade-formatter@0.20.14 - stef-k.laravel-goto-controller@0.0.15 - svelte.svelte-vscode@107.3.0 - twxs.cmake@0.0.17 - Tyriar.sort-lines@1.9.1 - usernamehw.errorlens@3.10.0 - VisualStudioExptTeam.intellicode-api-usage-examples@0.2.7 - VisualStudioExptTeam.vscodeintellicode@1.2.30 - vscjava.vscode-java-debug@0.49.1 - vscjava.vscode-java-dependency@0.21.2 - vscjava.vscode-java-pack@0.25.10 - vscjava.vscode-java-test@0.38.2 - vscjava.vscode-maven@0.41.0 - WallabyJs.console-ninja@0.0.108 - webhint.vscode-webhint@2.1.9 - wholroyd.jinja@0.0.8 - xdebug.php-debug@1.32.1 - xdebug.php-pack@1.0.3 - yoavbls.pretty-ts-errors@0.2.8 - zamerick.vscode-caddyfile-syntax@1.0.4 - Zignd.html-css-class-completion@1.20.0 - zobo.php-intellisense@1.1.2
VS Code user settings

```json { "explorer.confirmDelete": false, "files.autoSave": "onFocusChange", "editor.renderWhitespace": "none", "editor.autoClosingBrackets": "always", "editor.autoClosingQuotes": "always", "window.restoreWindows": "all", "eslint.packageManager": "yarn", "npm.packageManager": "yarn", "javascript.updateImportsOnFileMove.enabled": "always", "explorer.confirmDragAndDrop": false, "editor.codeActionsOnSave": { "source.organizeImports": true, "source.fixAll.eslint": false }, "workbench.colorTheme": "Material Theme Palenight High Contrast", "workbench.iconTheme": "material-icon-theme", "workbench.colorCustomizations": {}, "editor.fontSize": 13, "git.autofetch": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "typescript.updateImportsOnFileMove.enabled": "always", "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[python]": { "editor.defaultFormatter": "ms-python.python", "editor.formatOnType": true }, "versionlens.npm.caching.duration": 1, "versionlens.suggestions.showOnStartup": true, "[svelte]": {}, "go.autocompleteUnimportedPackages": true, "go.useLanguageServer": true, "[go]": { "editor.defaultFormatter": "golang.go" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "workbench.tree.indent": 16, "workbench.tree.renderIndentGuides": "always", "files.autoSaveDelay": 5000, "prettier.tabWidth": 4, "prettier.singleQuote": true, "prettier.printWidth": 120, "prettier.jsxSingleQuote": true, "prettier.arrowParens": "avoid", "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "prettier.trailingComma": "all", "files.associations": { "*.rmd": "markdown" }, "workbench.editorAssociations": { "*.ipynb": "default" }, "workbench.startupEditor": "newUntitledFile", "[c]": { "editor.wordBasedSuggestions": false, "editor.suggest.insertMode": "replace", "editor.semanticHighlighting.enabled": true }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "XXX", "[ ]", "[x]"], "todo-tree.regex.regex": "(//|#|