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'

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

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

Answer 6

Plugins like Prettier and Beautify doesn't provide you with very much control over the styling. They are good to make code consistent in an easy way :)

I prefer eslint plugin instead.
Then you can define your own eslint.json rules.

(or do as everybody else and use airbnb's linting rules).

Then you can use settings like "eslint.autoFixOnSave": true. Then your code will format accordingly to your rules on save :)