In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

I have done extensive research and tried numerous solutions,

When using Angular and formatting HTML with Prettier, it appears quite messy as it wraps each attribute to a new line, for example:

   <button
      pButton
      class="btn"
      type="button"
      label="Add Item(s)"
      (click)="handleClick()"
    ></button>
  • The Print Width is set to 250 everywhere

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

  • I have added a .prettierrc.json file with the content {"printWidth": 100}
  • The option 'Single Attribute Per Line' is not enabled

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

An important point to note is that Prettier is applying a printWidth of 80 by default, which seems to be built-in because I have not set this in any user settings. There are some attributes that wrap onto two lines even when there is enough space available, like:

 <div class="p-col-2" style="float: left">
     {{ "modules.user.orderdisplay.quantity" | translate }}
 </div>
javascripthtmlangularframeworksprettier

Answer №1

It is important to verify the presence of a .editorconfig file, as prettier will utilize its values if it exists.

Answer №2

Add the following line to your settings.json file:

"prettier.useEditorConfig": false

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

Tips for featuring the latest blog post at the top of a NextJS blog

I have a website built on Next JS with a blog page. The setup is correct, where the /blog page displays content based on slugs. Currently, new blog posts are appearing at the bottom of the page, under older ones. I want to reverse this so that when a new p ...

javascriptreactjsnext.jsblogs

Switch out an item within a list of objects with a different item

I have a variable called this.rows that contains a collection of items. There is a real-time item being received from the server, which matches one of the items in the this.rows object collection. How can I replace an item with new values? Below is an ex ...

javascriptvue.jssocket.iolodash

Can $location be modified without triggering its corresponding $route?

Can you update the location path in Angular.js without activating the connected route? For example, is there a way to achieve this (see pseudo code below): $location.path("/booking/1234/", {silent: true}) ...

javascriptangularjs

Reading properties of undefined in React is not possible. The log method only functions on objects

I'm currently facing an issue while developing a weather website using the weatherapi. When I try to access properties deeper than the initial object of location, like the city name, it throws an error saying "cannot read properties of undefined." Int ...

javascriptreactjs

By default, apply the active class to the initial element in the list and update the active class upon clicking in Next.js

As a newcomer to React, I am struggling with setting the active class in my CSS file. I have two classes, btn and active. My goal is to assign the active class to the first button by default and then switch it to the currently clicked button when interacti ...

javascriptnode.jsreactjsnext.js

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

phpjqueryhtmlajax

Bootstrap table exceeds the boundaries of the smartphone screen

I'm currently working on my first laravel project with bootstrap (https://getbootstrap.com/) and I've encountered an issue related to mobile device responsiveness. The problem arises when using a basic table in bootstrap4 (the absence of the res ...

htmlcsstwitter-bootstrap

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

What is the best way to convert a series of sentences into JSON format?

I'm struggling with breaking down sentences. Here is a sample of the data: Head to the dining room. Open the cabinet and grab the bottle of whisky. Move to the kitchen. Open the fridge to get some lemonade for Jason. I am looking to format the outc ...

javascriptarraysjsonregex

Featherlight is experiencing issues with running Ajax requests

I'm currently working on integrating an ajax photo uploading script into a Featherlight lightbox, but I'm running into issues! If anyone could help me figure out what's going wrong, that would be greatly appreciated. I've already includ ...

javascriptjqueryajaxfeatherlight.js

Sentry platform is failing to record network-related problems

Incorporating Sentry into my Next.JS application has allowed me to easily detect JavaScript errors such as reference or syntax issues on the Sentry platform. Unfortunately, I have encountered some challenges as Sentry is not logging any network-related er ...

javascriptnext.jssentry

What steps do I need to take to build something similar to this using AngularJS?

Struggling with understanding the concepts of AngularJs. How can I create textfields and animations like the ones in this example using AngularJS? I've tried exploring directives, but it's not quite clicking for me. I've attempted to follow ...

javascriptangularjshtmlangularjs-directive

Implementing fetch within a custom hook to display a loader within a return function

customFetch hook: import React, { useState, useEffect } from 'react'; const customFetch = (url, options) => { const [response, setResponse] = useState(null); const [error, setError] = useState(null); useEffect(() => { (async () ...

javascriptreactjs

How can I initiate a TextChange event in ASP.NET C# without losing focus?

I attempted to trigger the TextChange event using Ajax, but it doesn't seem to be working as I expected. I'm hoping someone here can lend a hand. <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ...

javascriptc#jqueryasp.netajax

A step-by-step guide to loading a .php file via Ajax using JQuery when an item is selected from a dropdown

I have successfully populated a dropdown list using PHP from a database on the page named admin.php. Now, I am utilizing JQuery with Ajax functionality to display information when a surname is clicked from the dropdown menu. The goal is to call employerP ...

phpjavascriptjqueryajaxdrop-down-menu

Could anyone explain to me why the "thumbnails" in my code link are not aligning in a row format as intended?

Why are my "thumbnails" not aligning correctly in the row format I want on this code link? <div class="row"> <div class= "col-md-6"> <div class="thumbnail"> <a target="_blank" href="http://codepen.io/ ...

html

Listening for events on an array of elements using jQuery

My task involves populating an array with elements using the .each() method and the $(this) selector. (function($){ var elements = new Array(); var index = 0; $("img").each(function() { if($(this).attr("attribute")){ $(thi ...

javascriptjqueryarrays

Trigger a function following a collection update in Angular Meteor

I am in the process of developing a multiplayer game, and I would like a specific function to be triggered once the first player updates an "isStarted" field in the collection. Within my controller code: angular.module('mcitygame').directive(&a ...

javascriptangularjsmeteorangular-meteor

What is the best way to trigger a controller action when the datepicker's value changes?

Hello, I have a custom datepicker and I am trying to perform a calculation when the year is changed. The code provided below does not seem to work on onchange. I also attempted using the onchange attribute and calling a JavaScript function like this oncha ...

javascriptjqueryajaxgrailsdatepicker

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap