Formatting of :class={} definitions Since 2.x

[stefanKuijers]

Thanks to everybody who is contributing to this extension. Great Job!

There seems to be a problem with the indentation after auto format of this plugin when using conditional class attirbutes like: :class="{}". The moment they are multiline the doesnt format well anymore.

As I didn't find any open issue about this yet, I thought I would open one. I hope this is enough info to reproduce.

Before upgrading to 2.x (v1.8.27) the following code was formatted like this:

<div>
    <div>
        <span
            class="usage-bar--threshold-handle"
            :class="{
                'usage-bar--threshold-handle--top': threshold.position == 'top',
                'usage-bar--threshold-handle--bottom': threshold.position == 'bottom',
                'usage-bar--threshold-handle--line': threshold.type == 'line',
            }"></span>
    </div>
</div>

Since upgrading to 2.x, I've tried multiple versions (v2.0.6) it formats like this:

 <div>
    <div>
        <span
            class="usage-bar--threshold-handle"
            :class="{
    'usage-bar--threshold-handle--top': threshold.position == 'top',
    'usage-bar--threshold-handle--bottom': threshold.position == 'bottom',
    'usage-bar--threshold-handle--line': threshold.type == 'line',
}"></span>
    </div>
</div>

It would be great if someone could take a look at this.

Thanks in advance!

[johnsoncodehk]

Thanks for the report, but I can't reproduce the issue. Can you share following informations?

• VSCode settings (with Preferences: Open User Settings (JSON) command and Preferences: Open Workspace Settings (JSON) command)
• System info (with Help: About command)

[tclzcja]

Actually the same issue happens in my projects as well, and here're the information that may help.

User Settings JSON

{ "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[markdown]": { "editor.defaultFormatter": "mervin.markdown-formatter" }, "[postcss]": {}, "[sql]": { "editor.defaultFormatter": "inferrinizzard.prettier-sql-vscode" }, "[svg]": { "editor.defaultFormatter": "jock.svg" }, "[yaml]": { "editor.formatOnSave": false }, "breadcrumbs.enabled": false, "css.format.maxPreserveNewLines": 1, "css.format.spaceAroundSelectorSeparator": true, "css.lint.float": "error", "css.lint.fontFaceProperties": "error", "css.lint.ieHack": "error", "deno.enable": true, "deno.unstable": true, "editor.codeLens": false, "editor.bracketPairColorization.enabled": false, "editor.detectIndentation": false, "editor.fontSize": 18, "editor.formatOnSave": true, "editor.inlayHints.enabled": "off", "editor.minimap.enabled": false, "editor.parameterHints.enabled": false, "editor.suggest.showTypeParameters": false, "editor.suggestSelection": "first", "editor.wordWrap": "off", "eslint.lintTask.enable": true, "eslint.useESLintClass": true, "eslint.validate": [ "javascript" ], "explorer.confirmDelete": false, "extensions.ignoreRecommendations": true, "files.associations": { "*.css": "css", "*.mjs": "javascript", ".prettierrc": "jsonc", "*.sql": "sql" }, "files.autoSave": "off", "files.exclude": { "**/.classpath": true, "**/.factorypath": true, "**/.netlify": true, "**/.project": true, "**/.settings": true }, "git.autofetch": true, "git.confirmSync": false, "git.enableSmartCommit": true, "git.ignoreMissingGitWarning": true, "git.openRepositoryInParentFolders": "always", "html.format.maxPreserveNewLines": 1, "html.format.preserveNewLines": false, "html.format.templating": true, "html.format.wrapAttributes": "aligned-multiple", "html.format.wrapLineLength": 0, "javascript.format.semicolons": "insert", "javascript.preferences.importModuleSpecifier": "relative", "javascript.preferences.importModuleSpecifierEnding": "js", "javascript.preferences.quoteStyle": "double", "javascript.updateImportsOnFileMove.enabled": "always", "javascript.validate.enable": false, "json.maxItemsComputed": 10000, "liveServer.settings.donotShowInfoMsg": true, "security.workspace.trust.untrustedFiles": "open", "tailwindCSS.classAttributes": [ "class", "className", "ngClass", "v-class" ], "todohighlight.toggleURI": true, "typescript.format.indentSwitchCase": false, "typescript.format.semicolons": "insert", "typescript.updateImportsOnFileMove.enabled": "always", "window.commandCenter": false, "window.nativeFullScreen": true, "window.restoreFullscreen": true, "workbench.editor.empty.hint": "hidden", "workbench.iconTheme": "vs-seti", "workbench.layoutControl.enabled": false, "workbench.startupEditor": "none", "zenMode.fullScreen": true, "explorer.confirmDragAndDrop": false, "workbench.activityBar.location": "hidden", "[javascriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "Prettier-SQL.keywordCase": "upper", "Prettier-SQL.indentStyle": "standard", "Prettier-SQL.SQLFlavourOverride": "postgresql", "Prettier-SQL.expressionWidth": 100, "Prettier-SQL.newlineBeforeSemicolon": false, "Prettier-SQL.linesBetweenQueries": 1, "Prettier-SQL.commaPosition": "after", "Prettier-SQL.denseOperators": false, "Prettier-SQL.tabulateAlias": false, "Prettier-SQL.insertSpacesOverride": true, "editor.stickyScroll.enabled": false, "editor.stickyScroll.scrollWithEditor": false, "workbench.tree.enableStickyScroll": false, "[vue]": { "editor.defaultFormatter": "Vue.volar" } }

Workspace Settings JSON

{ "folders": [ { "path": "../Projects/tingting-api" }, { "path": "../Projects/tingting-admin" }, { "path": "../Projects/tingting-web" } ], "settings": { "deno.enable": false, } }

Help: About

Version: 1.87.2 (Universal) Commit: 863d2581ecda6849923a2118d93a088b0745d9d6 Date: 2024-03-08T15:21:31.043Z Electron: 27.3.2 ElectronBuildId: 26836302 Chromium: 118.0.5993.159 Node.js: 18.17.1 V8: 11.8.172.18-electron.0 OS: Darwin arm64 23.2.0

.vscode/settings.json

{ "deno.enable": false }

Thank you for all the work, and hope those info will help!

[tclzcja]

BTW this is what it looks like in VS Code. The button element that has a :class directive results in wrong indents. Changing the directive to v-class, or use other elements (well, \<button> in \<a> element is invalid in HTML5) doesn't help.

[johnsoncodehk]

Close as fixed by #4165

[stefanKuijers]

@johnsoncodehk Thank you for your work! It's working well