Как сконфигурировать автоформатирование для переносов вложенных элементов внутри тегов в файлах HTML или файлах Vue в VS Code?

Ссылка скопирована
Visual Studio Code
1 ответ

По вводным: итак, вот как это выглядит сейчас и как хочется:
699439efcaa06621005299.png

Нужно понять: каждый атрибут, вложенный элемент, тег и закрывающая скобка должны переноситься на новую строку. Понять бы, возможно ли такое впринципе и какие форматировщики это позволяют?
Сейчас настроено: 

"[vue]": { "editor.defaultFormatter": "Vue.volar", }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", },
Мой settings.json

{ "security.workspace.trust.untrustedFiles": "open", "files.autoSave": "afterDelay", "files.insertFinalNewline": true, "files.trimTrailingWhitespace": true, "files.associations": { "*.css": "tailwindcss", "*.vue": "vue", }, "code-runner.clearPreviousOutput": true, "code-runner.showExecutionMessage": false, "launch": { "configurations": [], }, "editor.renderWhitespace": "none", "editor.renderLineHighlight": "none", "editor.minimap.maxColumn": 100, "editor.minimap.renderCharacters": false, "editor.guides.indentation": false, "editor.cursorBlinking": "solid", "editor.cursorSmoothCaretAnimation": "on", "editor.tabSize": 4, "editor.detectIndentation": false, "editor.insertSpaces": false, "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace", "editor.fontSize": 18, "editor.formatOnSave": true, "editor.tabCompletion": "on", "[vue]": { // "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "Vue.volar", }, "prettier.tabWidth": 4, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features", }, "prettier.useTabs": true, "languageStylus.useSeparator": false, "html.format.wrapAttributes": "force-expand-multiline", "editor.lineHeight": 2, "js/ts.implicitProjectConfig.checkJs": true, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", }, "editor.stickyScroll.enabled": false, "prettier.semi": false, "window.menuBarVisibility": "compact", "breadcrumbs.enabled": false, "editor.minimap.showSlider": "always", "vue.autoInsert.dotValue": true, "chat.commandCenter.enabled": false, "workbench.layoutControl.enabled": false, "workbench.editor.enablePreview": false, "editor.defaultFormatter": "esbenp.prettier-vscode", "remote.extensionKind": { "pub.name": ["ui"], }, "amazonQ.telemetry": false, "workbench.startupEditor": "none", "amazonQ.suppressPrompts": { "amazonQChatDisclaimer": true, }, "workbench.iconTheme": "material-icon-theme", "explorer.compactFolders": false, "prettier.printWidth": 100, "prettier.htmlWhitespaceSensitivity": "ignore", "editor.codeActionsOnSave": { "source.fixAll": "explicit", }, "editor.quickSuggestions": { "strings": true, }, "emmet.triggerExpansionOnTab": true, "tailwindCSS.classAttributes": ["class", "ui"], "tailwindCSS.experimental.classRegex": [ ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"], ], "editor.snippetSuggestions": "top", "vue.inlayHints.missingProps": true, "vue.inlayHints.destructuredProps": true, "workbench.secondarySideBar.defaultVisibility": "hidden", "amazonQ.workspaceIndex": true, "amazonQ.workspaceIndexUseGPU": true, "workbench.colorCustomizations": { "editor.background": "#1f1f1f", }, }

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

Для HTML/Vue такое форматирование возможно, но не в том виде, что “каждый вложенный элемент всегда на новой строке” универсально для всех случаев. Prettier специально не даёт тонко управлять переносами каждого атрибута и дочернего тега: он форматирует по своим правилам, исходя из printWidth. Поэтому если нужен строгий стиль, придётся настроить Prettier насколько возможно или использовать eslint/vue правила.

Для атрибутов Vue можно включить правило ESLint:

{
  "vue/max-attributes-per-line": ["error", {
    "singleline": { "max": 1 },
    "multiline": { "max": 1 }
  }],
  "vue/html-closing-bracket-newline": ["error", {
    "singleline": "never",
    "multiline": "always"
  }]
}

{ "vue/max-attributes-per-line": ["error", { "singleline": { "max": 1 }, "multiline": { "max": 1 } }], "vue/html-closing-bracket-newline": ["error", { "singleline": "never", "multiline": "always" }] }

Для VS Code лучше сделать Volar/ESLint основным контролем Vue, а Prettier оставить как базовый форматтер. Настройки могут быть такими:

{
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "prettier.printWidth": 80,
  "prettier.singleAttributePerLine": true
}

{ "[vue]": { "editor.defaultFormatter": "Vue.volar" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "prettier.printWidth": 80, "prettier.singleAttributePerLine": true }

singleAttributePerLine поможет с атрибутами, но не гарантирует перенос каждого вложенного элемента так, как вы нарисовали. Для HTML Prettier будет сам решать, когда строка помещается.

Если нужен полный контроль, можно использовать eslint-plugin-vue для Vue-шаблонов и не требовать от Prettier того, для чего он не предназначен. Prettier хорош для единообразия, но плох для “ручной типографики” кода.

Итог: да, перенос атрибутов в Vue настраивается через vue/max-attributes-per-line и prettier.singleAttributePerLine. А вот перенос каждого вложенного тега в HTML/Vue лучше контролировать ESLint-правилами и разумным printWidth, потому что Prettier не даёт абсолютной схемы на все случаи.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ