prettier settings for vscode

Question

I recently switched to a new computer, and am having difficulty with a prettier setting. (I think it's prettier, could be eslint).

This gif illustrates what's happening: http://g.recordit.co/H871hfT9Sv.gif

Anyone know what this setting is called? I would prefer all imports to be on a single line unless the length extends the printWidth setting.

Here are my relevant User Settings from VS Code:

{
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all"
}

Thanks !

Edit: Visual depiction so you don't need to watch the gif.

Expected:

import React from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { isIphoneX } from 'react-native-iphone-x-helper'

Behavior: (unwanted)

import React from 'react'
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {
  isIphoneX
} from 'react-native-iphone-x-helper'

score 93 · Answer 1 · answered Nov 21 '18 at 19:12

93

For those trying to quickly change Prettier settings for VS Code. Here are the steps:

Go to FILE -> PREFERENCES -> SETTINGS. (VS Code Menus)
Settings window should open. Above (Top) there is a search. Type "Prettier"
You should see the available Prettier settings. You can modify them :)

answered Nov 21 '18 at 19:12

Stephane

11,056
9
41
51

9

For me, the Prettier doesn't appear in the list there but my code is still formated by it ... you have any idea why I cannot see it in the list? – P.Lorand Aug 25 '19 at 06:33
3

you didn't answer the question!! @nikhil patel's answer did work for me! – illla Jan 30 '21 at 15:54
`You can use VS Code settings to configure prettier. Settings will be read from (listed by priority) `: from prettier details page. So you just need to edit VScode editor setting, Prettier will auto pick them – Hacke Aug 13 '21 at 08:04
@P.Lorand, you're probably using the "Prettier-Standard" extension; uninstall it and install "Prettier - Code Formatter" – André Alçada Padez Oct 13 '21 at 17:02
1

the problem i am having is that vs code keeps forgetting about `.prettierrc` config file. even though it is still in config path setting. so when i run "yarn prettier" i get one formatting, but when i save in VS code it re-formats it – Sonic Soul May 16 '22 at 15:45
prettier is my default formatter, but it looks like other formatters like typescript are fighting over things like spaces – Sonic Soul May 16 '22 at 15:51

score 47 · Answer 2 · edited Feb 25 '23 at 23:23

47

The new way to configure prettier settings:

at the root of your project folder, create a new config file (I'd suggest calling it either .prettierrc.json or just .prettierrc)
in that new file, add json custom settings: my go-to settings for JS are as follows:

{
    "trailingComma": "none",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

I'd suggest doing this in each of your projects and including in any source control, that way every pull of the repo will automatically set some base settings for that developer's instance of prettier.

edited Feb 25 '23 at 23:23

Paolo

20,112
21
72
113

answered Nov 12 '19 at 15:00

Matt C.

2,330
3
22
26

3

Here is the link https://prettier.io/docs/en/configuration.html – Tomas Vancoillie Nov 13 '19 at 12:33
You'll have to restart VSCode for it to take effect. See this link for the config options: http://json.schemastore.org/prettierrc – Martlark Jul 14 '23 at 02:25

score 10 · Answer 3 · answered Dec 12 '21 at 21:27

10

ctrl + , paste --> Prettier: Require Config uncheck it, then all done.

answered Dec 12 '21 at 21:27

Kiron Paul

187
2
7

score 8 · Answer 4 · edited Feb 25 '23 at 23:24

I had issue with formatting in VS Code. It was taking extension settings from prettier.

I did the following setting ins .vscode/settings.json

created .prettierrc.json file in root of the project
Installed npm install --save-dev prettier

These settings worked for me in VS Code.

.vscode/settings.json

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,  
  "prettier.useEditorConfig": false,
  "prettier.useTabs": false,
  "prettier.configPath": ".prettierrc.json",
}

.prettierrc.json

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

score 3 · Answer 5 · answered Dec 07 '20 at 19:41

I had a similar issue. To fix this, go into your prettier extension settings and look for "Print Width". Mine was set to '80'. I changed it to '100' and it all fit on one line after I saved the file. You can change the width to whatever you would like.

score 2 · Answer 6 · answered Jan 17 '23 at 11:42

2

These two steps helped me to set up the .prettierrc file correctly

1- Go to VsCode settings and check formate on save

2- Go to VsCode settings.json and set the defaultFormatter "editor.defaultFormatter": "esbenp.prettier-vscode"

answered Jan 17 '23 at 11:42

Sabir Hussain

2,802
2
14
19

score 0 · Answer 7 · answered Feb 24 '21 at 01:02

If Prettier isn't showing up in your VS Code Settings, the extension may have silently crashed, which happens often when settings are changed in multiple places (i.e. tab size was changed in workspace as well as in settings).

Restart VS Code, and search for Prettier again, it should show up this time :)

score 0 · Answer 8 · answered Oct 04 '21 at 14:53

0

create .prettierrc file in the project dir, and use following code.

    {
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

answered Oct 04 '21 at 14:53

Dextrus

1
1

prettier settings for vscode

8 Answers8

Linked