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
678
votes
40 answers

Why do I keep getting "[eslint] Delete `CR` [prettier/prettier]"?

I am using VS Code with Prettier 1.7.2 and ESLint 1.7.0. After every newline I get: [eslint] Delete `CR` [prettier/prettier] This is the .eslintrc.json: { "extends": ["airbnb", "plugin:prettier/recommended"], "env": { "jest": true, …
bier hier
  • 20,970
  • 42
  • 97
  • 166
559
votes
47 answers

Why does Prettier not format code in VS Code?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted at all. My .prettierrc…
Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
206
votes
1 answer

What's the difference between prettier-eslint, eslint-plugin-prettier and eslint-config-prettier?

I want to use Prettier and ESLint together, but I experienced some conflicts just by using them one after another. I see that there are these three packages that seem to allow them to be used in tandem: prettier-eslint eslint-plugin-prettier…
Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
168
votes
1 answer

ESLint couldn't find the config "prettier" to extend from

I am trying to format my code using eslint but when I run npm run lint -f I get this output: Oops! Something went wrong! :( ESLint: 6.8.0. ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is…
Reynier Rivero
  • 2,042
  • 2
  • 8
  • 12
133
votes
29 answers

lint-staged not running on precommit

prettier is not running on precommit. This worked with the same configuration in other projects, so I'm baffled why it's not working this time. This is the relevant section of my package.json file: "scripts": { "precommit": "lint-staged" …
Andrew Horn
  • 2,291
  • 2
  • 16
  • 26
128
votes
5 answers

VSCode prettier adds `value` to imports in TypeScript React

After configuring prettier with the plugin in VSCode the format on save function adds weird value keywords to every non-default import in my React+TS code. Like this: import { value ApolloProvider } from '@apollo/client'; import { value…
Kibartas
  • 1,442
  • 2
  • 5
  • 14
101
votes
5 answers

EditorConfig vs. ESLint vs. Prettier: Is it worthwhile to use them all?

I am trying to set up some tools to help maintain consistency in a codebase used by multiple developers. Is it necessary to use EditorConfig, ESLint and Prettier all together? As far as I understand, EditorConfig is used to set coding styles/rules,…
PBandJ
  • 2,537
  • 3
  • 21
  • 31
97
votes
15 answers

VS-Code Prettier Format On Save doesn't work

For about a month now, my Prettier extension has stopped working as it normally does. Most notably - format on save does not work. Other notes: Format on typing a ; works I get this error type symbol in the status bar next to the Prettier button -…
Hemal
  • 1,617
  • 2
  • 12
  • 21
88
votes
3 answers

How to remove semicolons in prettier?

I am using the VS Code prettier plugin to format my code, how can I add a setting to not add or remove semicolons when I format my code? I know that this feature was added in January but I found no mention in the PR or issue of how to add it to…
Achyut Rastogi
  • 1,335
  • 2
  • 11
  • 15
84
votes
6 answers

Prettier 3.0.0 TypeError: prettier.resolveConfig.sync is not a function

The error triggered after I run this command: npx eslint "the code directory" This is the first several line of the error TypeError: prettier.resolveConfig.sync is not a function Occurred while linting *the first line of the first code directory* …
Stephen Senjaya
  • 855
  • 1
  • 2
  • 6
84
votes
11 answers

How do you stop Prettier in VS code splitting attributes onto multiple lines?

I am using prettier to format my code in VS Code but I really dislike how it does it. My main beef is it splitting attributes over multiple lines. I'd much…
Tristanisginger
  • 2,181
  • 4
  • 28
  • 41
81
votes
5 answers

How to make "Prettier" the default formatter in VS Code?

I've installed Prettier extension in VS Code, and when I attempt to format a file, VS Code asked me: Do you want to format with the default formatter or with prettier formatter? I accidentally chose the default formatter. How can I change this to…
Márcio Valim
  • 2,459
  • 3
  • 10
  • 21
76
votes
7 answers

Trailing comma after last line in object

I'm using Prettier in VS Code. I noticed that when using format on save, Prettier adds trailing commas on the last line of an object every time. For example, let's say I had a JS object like this: obj = { hello: 'hello', world: 'world' } Prettier…
SiiilverSurfer
  • 999
  • 1
  • 6
  • 12
73
votes
9 answers

vscode prettier doesn't format .tsx file

I've used the Prettier extension in the visual studio code editor for a long time, but recently I have been writing to React with Typescript. So I need to configure for Prettier to format .tsx files.
S. Hesam
  • 5,266
  • 3
  • 37
  • 59
70
votes
7 answers

How to make Prettier to ignore a block of code?

Say we have a line of code: const a = 'a'; const b = 'b'; and we wouldn't want it to be formatter by Prettier. What I've tried so far: 1) // prettier-ignore const a = 'a'; const b = 'b'; // prettier-ignore-start const a = 'a'; const b = 'b'; //…
Onkeltem
  • 1,889
  • 1
  • 18
  • 27
1
2 3
…
99 100