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
42
votes
7 answers

Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly. For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it…
Patrick Szalapski
  • 8,738
  • 11
  • 67
  • 129
40
votes
4 answers

ESLint couldn't find the config "prettier/@typescript-eslint" after relocating .eslintrc to parent

I have a folder structure like parentFolder > componentA > componentB > componentC Each component has a package.json which defines a yarn lint command (eslint "myFilter" --no-error-on-unmatched-pattern). And each component…
BoBoDev
  • 847
  • 1
  • 8
  • 17
40
votes
7 answers

vue webpack template missing parser

I was just setting up a vue project using the webpack template like stated here: http://vuejs-templates.github.io/webpack/ However after running npm run dev just to test that the template is working, I get this error: Failed to compile with 2 errors…
tobire
  • 833
  • 9
  • 17
39
votes
1 answer

Difference between codeActionsOnSave and formatOnSave in VS Code

Newer versions of VS code include a new codeActionsOnSave options. It is recommanded to setup Eslint for example. However I don't understand the difference with previously existing formatOnSave option, nor their relationship with the defaultFormater…
Eric Burel
  • 3,790
  • 2
  • 35
  • 56
39
votes
6 answers

How do I run a code formatter over my source without modifying git history?

I am trying to format an entire repo using a code formatter tool. In doing so, I want to keep information about who committed which line, so that commands like git blame still show the correct information. By this, I mean it should show the author…
aherriot
  • 4,495
  • 6
  • 24
  • 36
38
votes
4 answers

Cannot find module 'prettier'

I updated all packages but still getting this error after running npm run serve: Module build failed (from ./node_modules/eslint-loader/index.js): Error: Cannot find module 'prettier' Occurred while linting /home My package.json { "name":…
Tom
  • 5,588
  • 20
  • 77
  • 129
37
votes
10 answers

How to turn off the prettier trailing comma in VS Code?

How to turn off the prettier trailing comma in VS Code? I go to settings. Select none for the prettier trailing comma. Restart VS Code. Select a piece of TypeScript, press Ctrl + Shift + F and the trailing commas still appear. How could I fix it?
manymanymore
  • 2,251
  • 3
  • 26
  • 48
36
votes
2 answers

How to use files with multiple extensions with Prettier?

I have following Prettier commands: prettier --parser typescript --write ./src/**/*.ts prettier --parser typescript --write ./src/**/*.tsx I would like to merge them to single one - use some king of regex to listen (write) on both .ts and also .tsx…
Jurosh
  • 6,984
  • 7
  • 40
  • 51
33
votes
5 answers

How to disable eslint(prettier/prettier) single quotes error

I have react-native code. I install ESLint. I use it but its show error. While I use single quotes it show me error Replace 'react-native' with "react-native" eslint(prettier/prettier) And when I use double qoutes it show me another error String…
alfianrehanusa
  • 1,424
  • 2
  • 15
  • 30
33
votes
3 answers

Prettier.js Method Arguments on newline formatting

I'm running Prettier.js (VSCode plugin)/prettier-eslint-cli. It formats method arguments that go over the 80 character limit as the following (putting each argument on a new line). someMethod( argumentOne, argumentTwo, argumentThree, …
Jordan
  • 469
  • 1
  • 4
  • 5
32
votes
6 answers

How do you get rid of these SASS linting errors when using Tailwind CSS?

I'm using Tailwind in a Gatsby project. My environment is Visual Studio Code, using the Prettier code formatter. How do I get rid of these linting error alerts?
Sandy Wyper
  • 457
  • 1
  • 4
  • 10
32
votes
8 answers

How can I tell prettier to parse files recursively?

I'd like to ask prettier to parse my JavaScript files recursively instead of specifying each folder in which it should check the files. I'd like to do something like: prettier --write "all_js_files_except_node_modules_folder" I don't find much into…
Paul
  • 7,157
  • 6
  • 32
  • 37
31
votes
1 answer

Code style issues found in the above file(s). Forgot to run Prettier?

I have this problem when I try to check style with prettier --check Code style issues found in the above file(s). Forgot to run Prettier?
user17292721
31
votes
5 answers

VSCode Prettier not formatting PHP

So I've set up vscode with Prettier, but it will not format .php files. .html files are working fine with Prettier. So when I have a .php with HTML code then it will be formatted differently, because I am using Beautify as last option. How can I…
dewey
  • 809
  • 2
  • 16
  • 47
30
votes
1 answer

what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code

I'm new to web programming and I learned that we can type npm i -D prettier to install prettier as one of the devDependency and use it to format our code. Then I found that there is a VS Code extension Pretty that does exactly the same thing. I…
Joji
  • 4,703
  • 7
  • 41
  • 86