Stack Overflow
Stack Overflow

Questions tagged [prettier]

Prettier is an opinionated code formatter for JavaScript, CSS, HTML, Markdown, and other languages. If possible, please use Prettier's Playground to illustrate your question (use the "Copy link" and "Copy markdown" buttons at the bottom right corner of the Playground).

Prettier is an opinionated code formatter.

You can use it to format JavaScript (including JSX, Flow, TypeScript, JSON), CSS (including Less, SCSS, CSS-in-JS), HTML (including Angular and Vue), GraphQL, Markdown, and YAML.

Try it out here: Prettier Playground.

1619 questions
16
votes
3 answers

How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?

Background: I'm using Prettier - Code formatter extension for VSCode to auto-format my code on save. Problem: I'm used to writing single-line blocks in my sass files (where there's only a single property) i.e. .some-class { background: #f00; }…
Arslan Akram
  • 1,266
  • 2
  • 10
  • 20
16
votes
3 answers

Tslint: Max-line-length not fixed by prettier

I'm using VSCode with prettier plugin and typescript and also tslint. Leaving aside the convenience to use this configuration, I get a [tslint] Exceeds maximum line length of 120 (max-line-length) For a line like this: import { MyComponent } from…
David
  • 3,364
  • 10
  • 41
  • 84
15
votes
1 answer

Prettier Code Formatter for VS code fails with 'No loader specified for extension ".cjs"'

In VS Code, When I select Format Document With... then choose Prettier - Code Formatter, I get the following error: Command 'Format Document' resulted in an error (No loader specified for extension ".cjs", so searchPlaces item ".prettierrc.cjs" is…
Andrew Lewis
  • 1,251
  • 9
  • 16
15
votes
7 answers

Getting an error 'No files matching the pattern were found' when using prettier

I found this answer how to format code using prettier Here is what I've done npm i prettier -g prettier --write \"./**/*.{js,html}\" Got an error [error] No files matching the pattern were found: ""./**/*.{js,html}"". any ideas how to fix? do you…
Sergino
  • 10,128
  • 30
  • 98
  • 159
15
votes
6 answers

Single quote in tsx file with prettier

For 2-3 weeks, while I didn't change anything in prettier file, VSC started changing single quotes to double quotes, while it was always single quotes. I tried many options but it keeps changing it. Heres my .prettierrc { "trailingComma": "es5", …
heisenberg7584
  • 563
  • 2
  • 10
  • 30
15
votes
2 answers

Airbnb, ESLint, Prettier conflict over Switch and Case indentation

I am setting up my React Redux project to use ESLint with Airbnb configs and Prettier. I've been modifying certain things to how I want them, but now I've run into a problem with indentations on switch & case statements that I can't seem to fix. I…
cdpautsch
  • 1,769
  • 3
  • 13
  • 24
15
votes
2 answers

Prettier putting if statement on one line

Prettier formats if statement without curley braces into one line. This means that this : function getErrorMessage(response) { let errorMessage = null; if (!response.originalError.response) errorMessage = 'network error'; else…
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
15
votes
2 answers

How to configure ESLint / Prettier formatting rules on "codesandbox.io"

On codesandbox.io, how can I configure Prettier so that it doesn't change the line breaks? Also, how can I deactivate specific ESLint rules. For example, I would like to turn off the react-hooks/rules-of-hooks rule. A newly created eslintrc file…
Natasha
  • 516
  • 7
  • 24
15
votes
1 answer

How to get prettier to add braces when missing on if/else

I've googled for a while and not found how to do this. I have eslint and prettier setup in my project. // What I have: if (a == b) doSomething(); // What I want from either eslint or prettier if (a == b) { doSomething(); } Can any one show me…
Arnold Rimmer
  • 2,723
  • 2
  • 16
  • 23
15
votes
5 answers

How to configure eslint with nodejs express application

js application. I need to use eslint for this application. I am using https://www.npmjs.com/package/eslint-config-airbnb and using prettier plugin in VS Code editor. .eslintrc { "extends": "airbnb" } I see that VS Code is giving me lot of errors…
N Sharma
  • 33,489
  • 95
  • 256
  • 444
14
votes
1 answer

How do I enable automatic prettier formatting for .jsx files in VS Code?

I have Prettier set up automatically formatting .js, .vue and other files on save. However, for some reason it is not triggering for .jsx files. Clicking the "Prettier" item in the status bar shows: ["INFO" - 10:48:25 am] Enabling prettier for range…
Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
14
votes
1 answer

Where can I find .eslintrc in CRA?

When using npx create-react-app appname, the react-scripts package which is installed includes an eslint dependency with "a minimal set of rules that find common mistakes." I want to use prettier and eslint but I can't find information on which, if…
dotDone
  • 143
  • 1
  • 8
14
votes
1 answer

Eslint and prettier conflict on operator-linebreak rule

I have some eslint and prettier config. When I hit ctrl + s to save my code my eslint is trying to format the code like this : (errors.password && (errors.password.type === 'minLength' || errors.password.type ===…
Alex Lance
  • 371
  • 1
  • 2
  • 10
14
votes
3 answers

Run prettier from CLI with config in package.json

I'm trying to run Prettier from CLI defining the config in the package.json file as it's explained in Offical Docs Prettier uses cosmiconfig for configuration file support. This means you can configure prettier via (in order of precedence): A…
Rafa Romero
  • 2,667
  • 5
  • 25
  • 51
14
votes
1 answer

What's the purpose of a leading pipe when declaring a type on Typescript

Using Prettier I noticed that this code block is formatted to contain an extra leading pipe, see the following example: // before Prettier let foo: { [k: string]: any } | boolean; // after Prettier const actions: | { [k: string]: any; …
a--m
  • 4,716
  • 1
  • 39
  • 59
1 2 3
…
99 100