Btukfyl

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'

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

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