Do you know if there is a setting in prettier that allows line breaks to be preserved?

Encountering an issue with the prettier extension in VS Code, Whenever I enter the following code:

const result = await pool
      .request()
      .query('select NumberPlate, ID, TimeStamp from RESULTS order by ID');

and save the file, it condenses into a single line like so:

const result = await pool.request().query('select NumberPlate, ID, TimeStamp from RESULTS order by ID');

despite having the following configuration set up for prettier:

{
    "git.confirmSync": false,
    "editor.minimap.enabled": false,
    "window.zoomLevel": 0,
    "liveServer.settings.donotShowInfoMsg": true,
    "workbench.startupEditor": "newUntitledFile",
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "editor.formatOnSave": true,
    "prettier.printWidth": 200,
    "prettier.singleQuote": true,
    "prettier.arrowParens": "always",
    "editor.tabSize": 2,
    "editor.tabCompletion": "on"
}

Is there a solution to prevent this behavior?

Appreciate any assistance!

Answer №1

As mentioned in this GitHub thread, it appears that configuring line breaks is not possible based on the documentation.

One potential workaround could be to set a very low printWidth or add a // prettier-ignore comment above your code.

Answer №2

To improve the formatting of your code, consider including a .prettierrc file and specifying the desired print width in the object of the file.

"printWidth": 120

For visual reference, see the image below: https://i.sstatic.net/sSTD6.png

Answer №3

No configuration was located. An alternative solution could involve adding a comment on the initial line to disrupt the code:

return ternaryExpression //
          ? trueResult
          : falseResult;

Answer №4

When navigating to the settings in VSC and selecting Extensions, you can find the "prettier" option. Make sure to uncheck the box next to 'Require Config' under Prettier, as leaving it checked will result in automatic line breaks. https://i.sstatic.net/XohQa.png

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

The inclusion of HttpClient is causing issues with the functionality of my component

Currently, I am facing an issue with my Angular service called ConnexionService. The problem arises when I try to incorporate CSV files into this service using HttpClient. Strangely, the component associated with this service fails to display once HttpClie ...

What is the best way to manage sessions in angularjs using javascript?

Only at two specific instances in the application should the login prompt be displayed: When trying to access a page that requires login while not logged in, such as my profile page. When attempting an action that necessitates ...

Node.js Routing Error: A guide to troubleshooting Express errors

I'm new to NodeJS and Express and I have created a simple CRUD program. However, I am facing an error that is not in my query but in my route. When I try to go to the edit page using <a href='edit/#{data.id}'>Edit Data</a>, the ...

Synchronous JavaScript function with live update

I'm currently working on a function that performs a lengthy task, and I'm looking to implement a feature that notifies the caller of the progress. My end goal is to update the user interface with the current progress status. Here's an examp ...

Avoid page refreshing when modifying app.js in React

Today is only my second day using React and I started by creating a React app with "npx create-react-app." However, when I tried to make changes to the app.js file, they didn't appear on the page even after refreshing the browser multiple times. (My n ...

Is there a way to implement a targeted hover effect in Vue Js?

I'd like to create a hover button that only affects the nested elements inside it. Right now, when I hover over one button, all the nested elements inside its sibling buttons get styled. Any ideas on how to fix this? <div id="app"> <butto ...

Content within innerHTML not appearing on the screen

I'm facing an issue with displaying an error message when the user enters incorrect username or password. The message should pop up below the sign-in box, but it's not showing up for some reason. Can anyone help me figure out why? Here is my cod ...

AngularJS redirection causes the previous template to quickly appear and then disappear

This particular question has been circulating without a satisfactory resolution for some time, so hopefully the information provided here will help clear up any confusion. Essentially, I have an object called resolve attached to my routes, set up like thi ...

Processing two Array Objects can be achieved without resorting to the EVAL function

I have two objects that I need to process. obj1 contains an array of objects with formulas. obj2 holds the values needed for the calculations. I am looking for a way to process and calculate both objects in order to obtain a result where the keys present ...

Tips for managing submitted data to a server in express?

In the process of sending a post request from my index.js to app.js upon a click event, I have the following code snippet: var data = { name: "Sarah", age: "21" }; var xhr = new XMLHttpRequest(); xhr.open("POST", "/", true); xhr.setRequestHe ...

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

I used JQuery to dynamically generate a table, but I'm having trouble applying CSS to the columns. You can see an example at this Codepen link here. Specifically, I need to set the width of the first column to 100px. Could someone please assist me wi ...

React Button Axios: A Primer for Complete Beginners

For the past few weeks, I've been using create-react-app and trying to modify the App.js file to include a button that executes an axios HTTP request when clicked. However, during my attempts, I keep running into errors like "unexpected token" in hand ...

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?

I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide ...

Navigate from Product Listing to Product Details Page by utilizing JSON data with ReactJS

I have successfully retrieved the initial level of JSON Data, which consists of objects/Product List. My objective is to implement a functionality where clicking on the "View Details" button will redirect to the respective product detail page, similar to ...

Issue: Module '../utils/composeObjs' not found after global installation of generator-stencil

Currently, I am in the process of developing a generator for stenciljs which can be found at https://github.com/AkashGutha/generator-stencil Within this project, there is a handy utility function located at the root directory. This function resides in one ...

Stopping a NodeJs file running on an Ubuntu server

After enlisting help to install a Js script on my server, I encountered an issue where changes I made to the scripts/files were not reflected in the browser. After scouring the internet for answers for about 24 hours, I discovered that Js scripts need to b ...

What is the best way to send a properly formatted JSON response using React Router and an Express backend?

How can I render JSON alone (no HTML) in my setup without specifying the port number for the route defined in `index.js`? In my current configuration, I am able to view JSON at , but cannot get a desired JSON response unless I visit , which is being called ...

Send a PUT request using Ajax

I am a beginner when it comes to Ajax requests and I have crafted the code shared in this Pastie. On line 107, my $.PUT function is causing an error in Firebug stating that $.PUT is not a recognized function. I acknowledge that there are issues with my aja ...

A comprehensive guide on how to find keywords within an array and then proceed to make all text within the parent div tag stand

I am currently looking for a webpage that displays a list of products based on keywords from an array. Once it detects any word in the array, it highlights it with a red background - everything is working smoothly so far. However, I now wish for the script ...

The 'length' property is not found within the 'HTMLElement' type

Can someone assist me with looping over the number of nav-items I have? I am encountering an error that says: Property 'length' does not exist on type 'HTMLElement'. I understand that changing document.getElementById('nav-item) to ...