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
19
votes
3 answers

vsCode issue with husky

I have configured husky in my project. It is running the pre-commit hook with "lint-staged" to use "prettier" to format the code before each commit. The configuration works fine when I use the terminal to invoke the git commit. However, if I commit…
dnaveen
  • 221
  • 3
  • 8
19
votes
8 answers

Cannot find module '@typescript-eslint/parser' when using Prettier Eslint

I'm getting the following error from Prettier Eslint Output on VSCode when saving the file. Error: Cannot find module '@typescript-eslint/parser' Require stack: -…
Vítor Norton
  • 408
  • 1
  • 6
  • 12
19
votes
1 answer

Prettier forces curlyless, single-line if-statement to be on the same line instead for below

After reading the docs for EsLint, I'm using the rule curly set to warning for multiple or nested rows of statements at conditionals. "rules": { "curly":["warn", "multi-or-nest"], "quotes":"warn" } It works as expected but when the code is to…
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
19
votes
3 answers

Parsing error: Unexpected token prettier/prettier caused by ""

I have this vue app which I create using vue cli and the version I use is vue2 (with eslint and prettier). I could run npm run serve and load my page. But in Visual Studio Code, I notice this error: { "resource":…
Steve
  • 2,963
  • 15
  • 61
  • 133
19
votes
1 answer

Prettier integration by ESLint rules in WebStorm

I created the rules in ESLint, how can I make Prettier format the code according to the rules specified in ESLint. .eslintrc.js module.exports = { rules: { quotes: ["error", "single"] } }; Before saving: After saving, Prettier…
Дмитрий Шарапов
  • 191
  • 1
  • 4
19
votes
1 answer

how to support inline comments when using eslint-prettier/prettier?

i want to turn off the rule in prettier where it newlines an inline comment. my ESLint rule no-inline-comments is set to off or warn, so that is taken care of and works. turns out Prettier still wants to newline and inline comment: i have a setup…
kinghat
  • 529
  • 4
  • 11
18
votes
2 answers

Prettier : prevent Prettier of removing parentheses

I'm using prettier in VSCode on a react native project and it removes parentheses in mixed operators or when declaring a var with a parenthesis. How to prevent prettier from doing that example1: const foo = (a && b) || c; After: const foo = a &&…
cold programmmer
  • 191
  • 1
  • 9
18
votes
5 answers

How can I base a .prettierignore file on .gitignore?

Looking at the Prettier docs, there is a tip to base your .prettierignore file on your .gitignore file. From the docs: Tip! Base your .prettierignore on .gitignore and .eslintignore (if you have one). Can someone explain what this means and how to…
alanrzhang
  • 199
  • 1
  • 1
  • 7
18
votes
1 answer

Prettier single quote for JavaScript and JSON, double quote for HTML, Sass and CSS

In VSCode, whenever I save a file, Prettier changes all single quotes to double quotes. I want to keep this behaviour for SCSS and CSS files, but want to change it for JavaScript and JSON files. I am aware of the setting "prettier.singleQuote":…
user1941537
  • 6,097
  • 14
  • 52
  • 99
18
votes
6 answers

Visual Studio Code and TSLint: Code wrap to more than 80 characters

I'm using TypeScript with TSLint and Prettier in Visual Studio Code to write a React Native App. I tried to configure my editor to wrap the code in per line automatically to 100 characters. But after saving it's always 80 characters, not 100. Here…
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
18
votes
3 answers

Jest snapshots not matching - Windows vs Unix/Linux Line Endings

We have a project developed by multiple developers on multiple operating systems. We have a character limit in our prettier config set to 120 characters. Our windows machines are producing snapshots different than our linux/unix machines. windows: …
Peter Levine
  • 281
  • 2
  • 9
17
votes
2 answers

Is it possible to remove unused imports with Prettier?

I have an Expo React Native app that has a ton of unused imports in components. I have Prettier setup for code formatting, is it possible to configure Prettier to also remove any unused imports across the project? I can't see anything in the docs…
Jamesking56
  • 3,683
  • 5
  • 30
  • 61
17
votes
1 answer

How to configure Prettier to format Styled Components conditional rendering

I'm using Prettier, Eslint and Styled components - backtick style declaration. It works so far but Prettier formats the conditional rendering of the Styled components in the way that Eslint doesn't allow and after the formatting Eslint starts to…
Velidan
  • 5,526
  • 10
  • 48
  • 86
16
votes
9 answers

Prettier vscode extension ignoring config files

I can't get the prettier extension to use my config files. It keeps using the global settings (as defined in the config path setting in vscode). I made an example project: https://github.com/Supperhero1/prettierTest I set tabWidth to 1 in the…
Supperhero
  • 911
  • 1
  • 7
  • 24
16
votes
2 answers

Svelte with prettier/eslint

I am trying to make an app using svelte to try it out. I would like to setup prettier and eslint, I installed those dependencies and the extension for Svelte for VS Code. "dependencies": { "eslint": "^7.7.0", "eslint-plugin-svelte3":…
Bobby
  • 4,372
  • 8
  • 47
  • 103
1 2 3
…
99 100