Is there a way to prevent prettier from automatically adding a new line when formatting HTML tags with ">"?

While navigating through the Prettier extension in Vscode, I am struggling to find a way to disable a specific scenario. In particular, I am having trouble with the formatting of an html tag.

Below is a snippet of code that requires some adjustments whenever I use the Prettier tool. The current output looks like this:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr"
>
</tag-html>

What I am aiming for is to have Prettier produce the following output:

<tag-html
 [val1]="valueStr"
 [val2]="valueStr">
</tag-html>
angulartypescriptvisual-studio-codeprettier

Answer №1

When working with JSX and other file types, such as HTML, you can achieve the desired formatting by including the following code in your .prettierrc file:

"bracketSameLine": true

For more information, check out

(Alternatively, use jsxBracketSameLine for versions prior to 4.2.0)

Answer №2

To enable this feature in your VS Code, you can simply add the following line to your workspace settings:

"html.format.wrapAttributes": "force-aligned"

No need for external plugins or extensions.

You also have the option to customize this setting using the GUI settings page.

https://i.stack.imgur.com/qtOb0.png

https://i.stack.imgur.com/RKAWU.png

UPDATE 01

For more information on how to implement this, check out the discussion on the Prettier GitHub repo: https://github.com/prettier/prettier-vscode/issues/646

You can still incorporate the settings mentioned above based on the insights from that GitHub issue.

Answer №4

For me, the most effective solution was placing the more visually appealing configuration file directly in the root directory of the project as it proved to be the only method that worked, using .prettierrc.json (Learn More)

Once the configuration file is created, insert the following settings:

{
  "bracketSameLine": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "ignore"
}

Save these settings and watch them function seamlessly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript

Is there a way to dynamically create HTML elements such as b, a, h4, h3, or any element based on the as={""} prop in my function without using if guards? I have seen a similar question that involves styled components, but I am wondering if it can be done ...

javascriptreactjstypescript

Creating a responsive d3 gauge chart: A step-by-step guide

Need assistance resizing the d3 gauge chart. Check out the Stackblitz code for reference. I've attempted the following: .attr("preserveAspectRatio", "xMinYMin meet") as well as window.addEventListener("resize", this.draw); ...

angulard3.js

Enhancing code completion with IntelliSense for customized styled components' themes

When using a theme in styled components, I am attempting to enable IntelliSense. In my code snippet below (index.tsx), I utilize ThemeProvider: import React from 'react'; import ReactDOM from 'react-dom/client'; import { ThemeProvider } ...

typescriptstyled-componentsreact-typescript

Methods for adjusting data based on the current user's login

I'm currently working on integrating a user login feature using Angular 6 for a stock management system. The user credentials are saved in the database, and I have successfully retrieved them into a component (login) for validation. After a successful ...

angulartypescriptangular6

The Response type does not include a property named 'results'

While working on an application that gathers data from last.fm using angular2, typescript, and firebase, I encountered a coding challenge. To view the source code, visit: https://github.com/vtts/mytunes QUERY: How can I convert the results obtained from ...

jsonfirebaseangularlast.fmtypescript1.8

Avoid changing the button color to a lighter shade when it is clicked

Is there a way to prevent button text from changing to a lighter color after clicking? I am facing an issue where the button I set to red turns slightly whiteish after it is clicked. How can I ensure that the button stays red at all times? Header Toolbar ...

htmlcssangularionic-frameworkionic5

Utilizing external clicks with Lit-Elements in your project

Currently, I am working on developing a custom dropdown web component using LitElements. In the process of implementing a feature that closes the dropdown when clicking outside of it, I have encountered some unexpected behavior that is hindering my progres ...

javascripttypescriptlit-elementlit-html

Angular 11 Import Guide for MAT_DATE_LOCALE

I am struggling with importing 'mat-date-locale' in Angular 11 modules. The link I followed didn't provide a solution, as mentioned here: Cannot find name "MAT_DATE_LOCALE" with Material.angular Datepicker. In my project, I have A ...

angularmaterial-uiangular11

Antlr4ts compatibility issue persists with Angular 13

Currently, I am attempting to utilize antlr4ts in conjunction with Angular version 13. However, I am encountering an error when attempting to parse any string. Below is my service code where the string parsing is being attempted: import { Injectable } from ...

angularantlr

Angular breadcrumb component for creating a sidebar menu navigation

I am looking to enhance my sidebar menu with breadcrumb navigation. The menus currently include Menu1 and Menu2, each containing submenus such as subMenu1 and subMenu2. When a user clicks on Menu2, I want the breadcrumb trail to display as Home > Menu2 ...

angularangular2-routing

Tracking button clicks on Angular Material using Google Analytics through Google Tag Manager

I'm currently utilizing the Universal Analytics tag within Google Tag Manager to monitor user interactions. I'm looking to establish click listeners in GTM that will trigger when specific buttons on the page are clicked. These buttons are Angular ...

angulargoogle-analyticsangular-materialgoogle-tag-manager

Adjust the size of a map on an HTML page after it has

Currently, I am utilizing Angular 2 to create a simple webpage that includes a Google 'my map' displayed within a modal. <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll ...

htmlangularjstypescript

Using Angular and RxJS5 to refresh data from both HTTP requests and sockets

Here's a specific scenario I need to address: Retrieve route parameters Utilize route parameters to make an HTTP service call Upon receiving a response from the HTTP service, use the same route parameters to invoke a socket service Whenever the sock ...

angularrxjs5

Is there a way to determine the height of the ion-footer?

Is there a way to obtain the height of the ion-footer element in Ionic2? I want to calculate the initial window height minus the ion-footer height, but I am currently only able to get the overall window height. I'm not interested in retrieving the ...

angulartypescriptionic2ionic3

An effective way to apply Bootstrap styles to projected content within an Angular 7+ application

Although Angular content projection documentation is lacking, I have successfully implemented content projection. However, I am unsure of how to pass Bootstrap classes down to the projected content <ng-content></ng-content> in the child compone ...

angularbootstrap-4angular7

No interface 'JSX.IntrinsicElements' could be found, causing the JSX element to be implicitly of type 'any'

<Header> <title>Real Estate API Application</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, ...

reactjstypescriptnext.jschakra-ui

Is ngModel the appropriate method for connecting a form to server-side scripts?

Just diving into the world of Angular, I'm embarking on my very first project - a hybrid mobile app using Ionic/Angular. Within my app, each user has their unique notification settings. There are ten different types of notifications that users can to ...

angularionic-frameworkdata-bindinghybrid-mobile-app

Angular: Material Button that Adjusts According to Header Size

How can I adjust the size of a mat-icon to match the header size? Despite my efforts, the arrows remain small. <h1> <button mat-icon-button (click)="testEvent()"> <mat-icon>keyboard_arrow_up</mat-icon> < ...

angulartypescriptsassangular-materialangular10

Issue with Angular2 not able to call POST method in CodeIgniter RESTful API resulting in 404 error

I am encountering an issue with my codeigniter restful API. While the GET method is working fine, I am unable to get the POST method to work from Angular2. this.api.post('quality/addeditquality', this.formdata).subscribe(data => { c ...

phpangularcodeigniterangular2-services

Issue: Transition of FCM to HTTP v1 API from Previous Legacy API

Recently, I have been working on migrating FCM from the legacy API to the HTTP V1 API. Here's a comparison of the "working code before" and after the necessary modifications: Before: const payload = { data: ...

node.jstypescriptfirebase-cloud-messaging