Prettier mandates that single-line if-statements without curly braces must be written on the same line

Having recently delved into the EsLint documentation, I've adopted the curly rule set to warning for instances of multiple or nested rows of statements within conditionals.

"rules": {
  "curly":["warn", "multi-or-nest"],
  "quotes":"warn"
}

While this rule functions as intended, I have encountered an issue with Prettier suggesting that statements following conditionals should be on a single line, a practice I prefer to avoid (and I do not wish to use unnecessary curly braces).

// Desired format
if(condition)
  doSomething();

if(condition) {
  doSomething();
  doSomethingElse();
}

// Prettier format
if(condition) doSomeSome();

if(condition) {
  doSomething();
  doSomethingElse();
}

Despite consulting the Prettier documentation, I have not found a suitable solution such as bracketSpacing, which does not address my specific need for multiline bracketting.

How can I configure Prettier to align with my preferences? (In addition, where can I access additional information about other rules beyond the official documentation?)

It's worth noting that a similar inquiry posted previously received no responses, with suggestions in the comments indicating acceptance of Prettier's formatting standards (including the imposition of unnecessary curly braces). This approach contradicts my desire to tailor the configuration to my liking through an some_rc.json file.

Further, I came across an extensive discussion highlighting the long-standing demand for such an option since 2017, leading me to believe that it has likely been integrated (as it seems improbable that the developers disregarded user preferences). Am I misinformed?

Answer №1

The answer provided is a firm no. As referenced in the linked Issue, it is stated:

We are now past 1.0 and we're not going to change core printing like this one anymore. Sorry!

If you want code to be printed on the next line, you can add {}. Feel free to fork prettier if you really want this behavior.

Within the realm of Prettier, there exists a high level of opinionation. The word itself may pose confusion, particularly for non-native English speakers. The term "opinionated" in this context conveys the idea of strongly believing in one's own perspectives, and within the software domain, it signifies intentional avoidance of extensive configuration.

Summarized in the Prettier Option Philosophy page is their stance:

Prettier has a few options because of history. But we won’t add more of them.... Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is opinionated.

Furthermore, the rationale behind this approach is elucidated:

The primary motivation for embracing Prettier is to quash incessant debates regarding coding styles.

Many teams find this objective commendable. Notably, the Go language features gofmt which lacks any customizable options. This tool is universally utilized, ensuring uniform code formatting across all projects, irrespective of the development team. Disputes related to tabs, spaces, or other formatting nuances become obsolete with the enforcement of gofmt standards. In essence, Go code adheres to the formatting dictated by gofmt, even if at times it may seem unconventional. Time to refocus on the tasks at hand! :D

It's acknowledged that not every team may align with Prettier's preset choices, and that's perfectly acceptable. In fact, a large percentage (if not the majority) of teams opt not to integrate Prettier into their workflow. However, for those who do embrace it, it's more than just a tool; it signifies an acceptance of Prettier's defined style guidelines.

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

Before the service call finishes, Akita queries this.selectAll and returns an empty list

Here is the code snippet from my file named widgetquery.ts: @Injectable({ providedIn: 'root' }) export class WidgetQuery extends QueryEntity<WidgetState, WidgetTO> { public Widget$: Observable<WidgetTO> = this.selectActive().filter( ...

Angular 7 - Implementing periodic JSON data retrieval from server and maintaining local storage within Angular application

Seeking guidance on how to handle updating a static json file stored in the assets directory in an Angular 7 project. The goal is to periodically fetch a json from a server, check for updates, and perform post-processing on the data in the static file (ess ...

Error: XYZ has already been declared in a higher scope in Typescript setInterval

I've come across an interesting issue where I'm creating a handler function and trying to set the current ref to the state's value plus 1: const useTimer = () => { const [seconds, setSeconds] = useState(0); const counterRef = useRef(n ...

TypeScript - patiently anticipating the completion of nested for loops

Currently, I am working on a task that involves implementing two nested for loops in my code. The primary objective of the first loop is to make an API call, which is dependent on the IDs selected by the user. Unfortunately, the limitation of passing only ...

How can I resolve a bug in Nuxt2 when using TypeScript?

I need help with implementing code using Nuxt.js 2 option API with TypeScript. computed: { form: { get: () => this.value, set: (value) => this.$emit('input', value) } } Additionally, I am encountering the fo ...

Sending asynchronous data to a child component in Angular 2

Having trouble with passing asynchronous data to a child component. I am attempting to create a dynamic form generator, but I encounter an issue when trying to fetch JSON data via an Observable and then passing it to the child component. Service: generat ...

typescript - add a global library import statement to every script

Recently, I began working on a TypeScript project in Node.js. I am looking to add import 'source-map-support/register'; to all of my .ts files for better visibility of TS source in stack traces. Is there a method to implement this without manuall ...

Managing file imports in Angular 2+ Unit Testing

Within my project, there are various utility functions that handle data transformations and other tasks. These functions are not contained within a class and are utilized across multiple utility files. Being relatively new to angular testing, I've sp ...

Utilizing Angular's async pipe to dynamically customize and assign values to variables

I have a parent component named A with over 20 child components, all of which extend A and are located within <ng-content></ng-content>. Within component A, I am updating the value of the showContent variable in multiple places. The issue aris ...

Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

When it comes to mapping object values with all primitive types, the process is quite straightforward: type ObjectOf<T> = { [k: string]: T }; type MapObj<Obj extends ObjectOf<any>> = { [K in keyof Obj]: Obj[K] extends string ? Obj[K] : ...

Issues arising with utilizing Github for hosting Angular applications

After developing a site with Angular, everything was running smoothly on my local host. However, when I decided to host the site on GitHub, two errors appeared. You can access my site through this link: Here is a screenshot of the errors encountered [1]: ...

Struggling with verifying the visibility of multiple elements using the toBeVisible() assertion

While running a test in debug mode, I've observed that toBeVisible() fails when it detects multiple elements. Interestingly, toBeVisible without the parenthesis passes the assertion in such cases. I'm facing a specific scenario where I need to p ...

Adding child arrays to a parent array in Angular 8 using push method

Upon filtering the data, the response obtained inside the findChildrens function is as follows: My expectation now is that if the object length of this.newRegion is greater than 1, then merge the children of the second object into the parent object's ...

Nestjs - Error: Unable to locate module distmain

As I work with nestjs, I found it convenient to create a "common" folder that can be shared between the front and back applications: project │ └───common │ │ │ └───dtos │ │ dto-a.ts │ ...

Tips for Sending Specific Row Information to Server in Ionic 3

Successfully pulled contacts from the device into my list page, but struggling to send specific contact details (name and number) to the server. Can anyone provide guidance on accomplishing this in Ionic? ...

What factors should I consider when determining whether to include @types/* in the `dependencies` or `devDependencies` section?

Currently using TypeScript 2 in my project, I am looking to incorporate a JavaScript library along with its typings. While I know I can easily install the types using npm install @types/some-library, I am uncertain whether to use --save or --save-dev. The ...

A different approach to showcasing components in SvelteKit based on the width of the screen

In my SvelteKit app, I'm using this code to retrieve the current window size and switch the displayed component when the width is small: <script> let size; </script> <svelte:window bind:innerwidth{size}/> <div> {#if size &g ...

Breaking down CSV rows and transforming numerical data (Typescript, Javascript)

Looking to convert a row from a csv file into an array and then transform the numeric values from string format. This represents my csv file row: const row = "TEXT,2020-06-04 06:16:34.479 UTC,179,0.629323"; My objective is to create this array (with the ...

Promise disregards the window being open

I'm facing an issue with redirecting users to Twitter using window.open in a specific function. It seems like the instruction is being ignored, even though it works perfectly on other pages. Any ideas on how to fix this? answerQuestion() { if ...

How can I limit the keys in a Typescript object to only certain strings?

Is there a way in Typescript to create an object of type Partial with keys that can only be a combination of 'a', 'b', or 'c'? The object should not have all 3 keys, but it must have at least one. Here's what I've at ...