I have VS Code installed since long time ago, many extensions, some deprecated, etc. In my Vue project since a while ago sometimes I get the HTML template attributes with extra white space around them.
Here is how it should be:
<wiskModal v-model="onlineCatalogVisible" size="lg" hideFooter :title="onlineItemSearchTitle" extraLarge>
<onlineItemSearch v-model="onlineItem" v-if="purchaseOrder && onlineCatalogVisible" :startQuery="searchOnlineQuery"
:distributor="purchaseOrder.to.distributor" :partnerVenue="purchaseOrder.to.partner_venue" />
</wiskModal>
Here is how it is after I save the file:
<wiskModal v-model=" onlineCatalogVisible " size="lg" hideFooter :title=" onlineItemSearchTitle " extraLarge>
<onlineItemSearch v-model=" onlineItem " v-if=" purchaseOrder && onlineCatalogVisible " :startQuery=" searchOnlineQuery "
:distributor=" purchaseOrder.to.distributor " :partnerVenue=" purchaseOrder.to.partner_venue " />
</wiskModal>
I have Prettier, Volar, Eslint.
In this question I need help fixing the format, or at least I need to know what is causing it. Is it a conflict, is it a bug in an extension?
Most probably I have some conflicting or outdated configs.
VS Code settings relevant to formatting:
{
"editor.formatOnType": true,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.includeLanguages": {
"vue-html": "html"
},
"html.format.enable": true,
"html.suggest.ionic": false,
"html.suggest.angular1": false,
"files.trimTrailingWhitespace": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"prettier.semi": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"html.format.wrapAttributes": "preserve",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.renderWhitespace": "none",
"editor.linkedEditing": true,
"prettier.arrowParens": "avoid",
"prettier.configPath": ".prettierrc.json",
"eslint.format.enable": true,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.embeddedLanguageFormatting": "off",
"prettier.enableDebugLogs": true,
"editor.formatOnSave": true,
"html.format.wrapLineLength": 0,
"html.format.contentUnformatted": "",
"editor.guides.indentation": true,
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"volar.format.initialIndent": {
"html": true
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"volar.inlayHints.eventArgumentInInlineHandlers": false,
}
.prettierrc.json
{
"trailingComma": "none",
"singleQuote": true,
"bracketSameLine": true,
"jsxBracketSameLine": true,
"printWidth": 220,
"tabWidth": 2,
"semi": false,
"useTabs": false,
"bracketSpacing": true,
"eslintIntegration": true,
"htmlWhitespaceSensitivity": "ignore",
"arrowParens": "avoid"
}
.eslintrc.js
module.exports = {
root: true,
globals: {
COMMITHASH: true,
BUILD_TIMESTAMP: true
},
env: {
node: true
},
extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/airbnb', 'plugin:prettier/recommended'],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'import/no-absolute-path': 0,
'import/no-extraneous-dependencies': 0,
// don't require .vue extension when importing
'import/extensions': [
'error',
'always',
{
js: 'never',
vue: 'never'
}
],
'no-empty': [1, { allowEmptyCatch: true }],
'no-param-reassign': 0,
'space-before-function-paren': [
1,
{
anonymous: 'always',
named: 'never',
asyncArrow: 'always'
}
],
// allow debugger during development
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'comma-dangle': 0,
semi: 0,
'no-debugger': 1,
'prefer-regex-literals': 0,
'prettier/prettier': 0, // TODO: check if we will ever need this prettier thing!!!
'vue/max-attributes-per-line': 0,
'vue/valid-attribute-name': 0,
'vue/no-use-computed-property-like-method': 0,
'vue/first-attribute-linebreak': 0,
'vuejs-accessibility/alt-text': 0,
'vuejs-accessibility/iframe-has-title': 0,
'vuejs-accessibility/click-events-have-key-events': 0,
'vuejs-accessibility/mouse-events-have-key-events': 0,
'vuejs-accessibility/anchor-has-content': 0,
'vuejs-accessibility/form-control-has-label': 0,
'vuejs-accessibility/label-has-for': 0,
'vuejs-accessibility/no-autofocus': 0,
'vue/no-unused-vars': 1,
'vue/script-setup-uses-vars': 0,
'vue/multi-word-component-names': 0,
'no-unused-vars': 1,
'one-var': 0,
'no-bitwise': 0,
'prefer-const': 0,
'no-mixed-operators': 0,
'no-plusplus': 0,
'no-alert': 0,
'no-var': 1,
'import/order': 1,
'max-len': 0,
'import/prefer-default-export': 0,
'prefer-object-spread': 0,
'no-underscore-dangle': 0,
'no-console': 0,
'no-unused-expressions': [1, { allowShortCircuit: true, allowTernary: true }],
'one-var-declaration-per-line': 0,
'arrow-parens': 0,
'spaced-comment': 0,
'no-nested-ternary': 0,
'object-shorthand': 1,
'object-curly-newline': 0,
'arrow-body-style': 1,
'dot-notation': 1,
'space-infix-ops': 1,
'arrow-spacing': 1,
indent: 0,
'key-spacing': 1,
'no-multi-spaces': 1,
'space-before-blocks': 1,
'object-curly-spacing': 1,
'no-trailing-spaces': 1,
'no-multi-assign': 0,
'prefer-destructuring': 0,
camelcase: 1,
'newline-per-chained-call': 0,
'no-multiple-empty-lines': 1,
'import/first': 1,
'prefer-template': 0,
'prefer-arrow-callback': 1,
'vue/html-indent': 0,
'vue/v-on-event-hyphenation': 0,
'vue/attribute-hyphenation': 0,
'vue/attributes-order': 0,
'vue/html-self-closing': 0,
'vue/no-multi-spaces': 1,
'vue/html-quotes': 1,
'vue/v-on-style': 1,
'vue/mustache-interpolation-spacing': 1,
'vue/require-prop-types': 1,
'vue/html-button-has-type': 0,
'vue/no-unused-components': 1,
'vue/custom-event-name-casing': 0,
'vue/no-template-target-blank': 0,
'vue/v-slot-style': 0,
'vue/component-definition-name-casing': 0,
'vue/v-bind-style': 1,
'vue/require-default-prop': 0,
'vue/multiline-html-element-content-newline': 0,
'vue/html-closing-bracket-newline': 0,
'vue/singleline-html-element-content-newline': 0,
'vue/order-in-components': [
1,
{
order: [
'el',
'name',
'parent',
'functional',
['delimiters', 'comments'],
['components', 'directives', 'filters'],
'extends',
'mixins',
'inheritAttrs',
'model',
['props', 'propsData'],
'data',
'computed',
'methods',
'LIFECYCLE_HOOKS',
'watch',
['template', 'render'],
'renderError'
]
}
]
},
overrides: [
{
files: ['**/src/**/*test.{j,t}s?(x)'],
env: {
jest: true
}
}
]
}
.editorconfig
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
Extensions list:
friendlyName : Auto Close Tag
publisherAndName : formulahendry.auto-close-tag
description : Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
homepage : https://github.com/formulahendry/vscode-auto-close-tag/blob/master/README.md
repository.url : https://github.com/formulahendry/vscode-auto-close-tag.git
version : 0.5.14
friendlyName : Back & Forth
publisherAndName : nick-rudenko.back-n-forth
description : Adds go back/forward buttons for easier navigation
homepage :
repository.url : https://github.com/nikita-rudenko/back-n-forth
version : 3.1.1
friendlyName : C#
publisherAndName : ms-dotnettools.csharp
description : Base language support for C#
homepage :
repository.url : https://github.com/OmniSharp/omnisharp-vscode.git
version : 1.25.9
friendlyName : Dart
publisherAndName : Dart-Code.dart-code
description : Dart language support and debugger for Visual Studio Code.
homepage : https://dartcode.org/
repository.url : https://github.com/Dart-Code/Dart-Code.git
version : 3.66.0
friendlyName : EditorConfig for VS Code
publisherAndName : EditorConfig.EditorConfig
description : EditorConfig Support for Visual Studio Code
homepage : https://github.com/editorconfig/editorconfig-vscode/blob/master/README.md
repository.url : https://github.com/editorconfig/editorconfig-vscode.git
version : 0.16.4
friendlyName : ESLint
publisherAndName : dbaeumer.vscode-eslint
description : Integrates ESLint JavaScript into VS Code.
homepage :
repository.url : https://github.com/Microsoft/vscode-eslint.git
version : 2.4.0
friendlyName : Favorites
publisherAndName : kdcro101.favorites
description : Add files and directories to workspace favorites. Create groups of directories and files. Time saver for complex projects.
homepage : https://github.com/kdcro101/vscode-favorites/blob/master/README.md
repository.url : https://github.com/kdcro101/vscode-favorites.git
version : 2.4.5
friendlyName : Flutter
publisherAndName : Dart-Code.flutter
description : Flutter support and debugger for Visual Studio Code.
homepage : https://dartcode.org/
repository.url : https://github.com/Dart-Code/Flutter.git
version : 3.66.0
friendlyName : Format Files
publisherAndName : jbockle.jbockle-format-files
description :
homepage :
repository.url : https://github.com/jbockle/format-files.git
version : 3.4.0
friendlyName : GitHub Copilot
publisherAndName : GitHub.copilot
description : Your AI pair programmer
homepage : https://github.com/features/copilot
repository.url :
version : 1.89.156
friendlyName : GitLens — Git supercharged
publisherAndName : eamodio.gitlens
description : Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison comma
nds, and so much more
homepage : https://gitlens.amod.io/
repository.url : https://github.com/eamodio/vscode-gitlens.git
version : 11.7.0
friendlyName : Import Cost
publisherAndName : wix.vscode-import-cost
description : Display import/require package size in the editor
homepage : https://github.com/wix/import-cost/blob/master/packages/vscode-import-cost/README.md
repository.url : https://github.com/wix/import-cost.git
version : 3.3.0
friendlyName : JS Eval Replace
publisherAndName : hanneshdc.js-eval-replace
description : Replaces selected text with it's JavaScript evaluation
homepage :
repository.url :
version : 1.0.0
friendlyName : Prettier - Code formatter
publisherAndName : esbenp.prettier-vscode
description : Code formatter using prettier
homepage : https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
repository.url : https://github.com/prettier/prettier-vscode.git
version : 9.13.0
friendlyName : Sort JS object keys
publisherAndName : zengxingxin.sort-js-object-keys
description : An extension to sort the js object keys
homepage :
repository.url : https://github.com/SBeator/sort-js-object-keys
version : 1.0.6
friendlyName : Sort JSON objects
publisherAndName : richie5um2.vscode-sort-json
description : Sorts the keys within JSON objects
homepage : https://github.com/richie5um/vscode-sort-json
repository.url : https://github.com/richie5um/vscode-sort-json
version : 1.20.0
friendlyName : Sort lines
publisherAndName : Tyriar.sort-lines
description : Sorts lines of text
homepage : https://github.com/Tyriar/vscode-sort-lines
repository.url : https://github.com/Tyriar/vscode-sort-lines
version : 1.10.1
friendlyName : Vue Language Features (Volar)
publisherAndName : Vue.volar
description : Language support for Vue 3
homepage :
repository.url : https://github.com/vuejs/language-tools.git
version : 1.6.0
I can't think of other settings that would influence this.
Update: I disabled Prettier, still happens. I disabled Volar, doesn't happen anymore, but I need Volar to have highlight and such. I now need the setting to tell Volar to stop doing this.
Some update to Prettier or Volar fixed the problem. Now it is all good. https://github.com/vuejs/language-tools/issues/3275