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
30
votes
2 answers

disable printWidth on prettier

Is there a way to disable the printWidth rule warning in prettier? I want to be able to determine my own line length for readability. In certain cases I want a line break, and in other cases I don't. I tried this in my .prettierrc file : { …
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
29
votes
5 answers

Insert `··` prettier/prettier

I have a project that has both prettier and eslint installed. The problem is that when I save a file eslint automatically changes the format of the file and it seems some rules conflict with prettier. What is the solution? This is prettier…
Saber
  • 5,150
  • 4
  • 31
  • 43
25
votes
2 answers

Make prettier less uglier - prevent split tags

Prettier in VS Code is great, except in this case where it seems to make things less readable. Here's an example of prettier's wrapping behavior in a Vue template file: Notice the opening tag's end bracket is placed as start of second line, and…
Noah Stahl
  • 6,905
  • 5
  • 25
  • 36
25
votes
1 answer

Auto Fix is enabled by default. Use the single string form

When I configure my vscode with eslint & prettier, I met a problem in .settings.json file with error message "Auto Fix is enabled by default. Use the single string form.": My eslint configuration is: My prettier configuration is: module.exports…
LegendOfFire
  • 261
  • 1
  • 3
  • 4
24
votes
2 answers

Preventing conflict between Prettier (code formatter) and ESLint/TSLint

I am working on an Angular project in VS Code, using the "Prettier" plugin for code formatting, and the ESLint/TSLint plugins for standards enforcement. I know this isn't an "error" but I strongly prefer clean builds and like to remove warnings…
Todd Davis
  • 5,855
  • 10
  • 53
  • 89
24
votes
2 answers

How to avoid VsCode Prettier to break chain functions in new lines.?

I'm working with VSCode, Prettier and TSLint. When I do have chained functions call with more than 2 calls like let m = moment().startOf("day").subtract(30, "days"); Prettier breaks into let m = moment() .startOf("day") .subtract(30,…
Daniel Santos
  • 14,328
  • 21
  • 91
  • 174
24
votes
5 answers

Prevent Prettier from converting single line object declarations into multi line in Visual Studio Code?

I'd installed prettier extensions and my json object definitions are now breaking lines after formatting. How can I avoid it? I want to keep inline object declarations. for instance, before formatting: "properties": { "d0": …
Daniel Santos
  • 14,328
  • 21
  • 91
  • 174
23
votes
5 answers

How Do I Run Prettier Only on Files That I Want to Commit?

Using Husky, I've set up my package.json with a precommit hook so that my JavaScript code is formatted using Prettier before every commit: { "name": "prettier-demo", "scripts": { "precommit": "prettier --write **/*.js && git add ." }, …
Patrick Hund
  • 19,163
  • 11
  • 66
  • 95
22
votes
11 answers

"Prettier - Code formatter" is not working in Visual Studio code

I have Visual Code Studio(1.41.1) Editor and I need Auto Formatter I have installed this code format: Prettier - Code formatter Successfully installed but not working, I also tried to use the command ext install esbenp.prettier-vscode that too was…
Udhav Sarvaiya
  • 9,380
  • 13
  • 53
  • 64
21
votes
12 answers

Prettier ask me to replace ⏎↹↹ with ·

I have no clue what's going on, I cloned a github repo and literally just tried to change like one line but I got hit by this prettier error which makes no sense to me (I've never used prettier). Replace…
Pepe
  • 355
  • 1
  • 4
  • 11
21
votes
6 answers

Prettier react/jsx-max-props-per-line format with VSCode

I use Prettier in JavaScript project with React. All my component props is formated in 1 line : And i would like this : I've add…
s-leg3ndz
  • 3,260
  • 10
  • 32
  • 60
21
votes
3 answers

Prettier doesn't work for changing double quote to single quote in visual code

I work with EsLint and Prettier in visual code. Everything work well without singlequote and doublequote. This is my .eslintrc file: { "parser": "babel-eslint", "plugins": ["prettier"], "rules": { "prettier/prettier": [ …
20
votes
6 answers

VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'

I'm installing eslint and Prettier in my project and trying to get automatic code formatting to work through VSCode. When I go to a React file, I see that ESLint is in error so I open up the ESLint console where I see: Failed to load plugin…
Brady Dowling
  • 4,920
  • 3
  • 32
  • 62
20
votes
2 answers

ESLint - Override rules from eslint-plugin-prettier

I am using ESLint with the prettier plugin and configuration: // eslintrc.js extends: [ `eslint:recommended`, `plugin:react/recommended`, `plugin:@typescript-eslint/recommended`, `plugin:prettier/recommended`, `prettier/react`, …
r0skar
  • 8,338
  • 14
  • 50
  • 69
20
votes
2 answers

Cannot find module 'eslint-plugin-prettier'

I am trying to make ESLint and Prettier work for days but whatever I do, nothing changes. I don't even know what I installed globally but here is my project's local package.json { "version": "0.0.1", "private": true, "scripts": { "start":…
Kira
  • 1,575
  • 4
  • 26
  • 48