Задать вопрос
@AfterGen

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

Итак, вот как это выглядит сейчас и как хочется:
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",
	},
}


Код для теста

<h3>
	You’ve successfully created a project with
	<a
		href="https://vite.dev/"
		target="_blank"
		rel="noopener"
	>Vite</a> +
	<a
		href="https://vuejs.org/"
		target="_blank"
		rel="noopener"
	>Vue 3</a>. What's next?
</h3>

  • Вопрос задан
  • 125 просмотров
Подписаться 1 Средний 3 комментария
Помогут разобраться в теме Все курсы
  • Нетология
    1C-программист: расширенный курс
    18 месяцев
    Далее
  • Академия Эдюсон
    Python-разработчик
    9 месяцев
    Далее
  • Skillbox
    Профессия Графический дизайнер PRO
    12 месяцев
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы