CODEWITHSUNDEEP
eslintvisual-studio-codeprettier
0xPingo
0xPingo

Reputation: 2197

prettier settings for vscode

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'

Upvotes: 65

Views: 255822

Answers (10)

Naufal Hady
Naufal Hady

Reputation: 1

Open settings.json Change "prettier.printWidth": 50 to 300 or 400 Save

Before changing:

<div
                class="w-1/2 p-8 flex flex-col justify-center"
            >
                <h5
                    class="text-xl font-semibold text-gray-700"
                >
                    Masuk untuk memulai
                </h5>
                <h1
                    class="text-3xl font-bold text-gray-800 mt-2"
                >
                    Selamat datang!
                </h1>
</div>

After applying "prettier.printWidth": 400:

            <div class="w-1/2 p-8 flex flex-col justify-center">
                <h5 class="text-xl font-semibold text-gray-700">Masuk untuk memulai</h5>
                <h1 class="text-3xl font-bold text-gray-800 mt-2">Selamat datang!</h1>
</div>

Upvotes: 0

Brandon Kauffman
Brandon Kauffman

Reputation: 1865

In the settings.json for vscode

    "prettier.configPath": "frontend/.prettierrc",

Or in the UI

enter image description here

This allows you to work from a root directory and still use prettier from a sub folder

Upvotes: 0

Kunal D.
Kunal D.

Reputation: 267

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

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

  1. created .prettierrc.json file in root of the project
  2. 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
}

Upvotes: 18

Matt C.
Matt C.

Reputation: 3290

The new way to configure prettier settings:

  1. at the root of your project folder, create a new config file (I'd suggest calling it either .prettierrc.json or just .prettierrc)
  2. 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.

Upvotes: 52

Sabir Hussain
Sabir Hussain

Reputation: 2922

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

1- Go to VsCode settings and check formate on save enter image description here

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

Upvotes: 5

Kiron Paul
Kiron Paul

Reputation: 205

enter image description here

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

Upvotes: 10

Dextrus
Dextrus

Reputation: 1

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

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

Upvotes: 0

Andrew Colbeck
Andrew Colbeck

Reputation: 153

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 :)

Upvotes: 0

Nikhil Patel
Nikhil Patel

Reputation: 61

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.

Upvotes: 5

Steph
Steph

Reputation: 12182

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

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

Upvotes: 99

Related Questions