how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

2 answers

  • answered 2022-05-07 06:24 CCP

    well i found the answer right away lol

    1. press f1 choose Format Document With

    enter image description here

    1. and select prettier for default

    enter image description here

  • answered 2022-05-07 07:16 Morti Al

    There is a shortcut for every idea to format your code, for instance for Vscode Ctrl + Shift + I

    AND use Prettier to format your code in all files

    1- First you can install the prettier code extension in your idea(Webstorm or vs code) https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode "for the vscode"

    2- Then install its package to your dependencies npm install --save-dev --save-exact prettier https://prettier.io/docs/en/install.html

    3- create .prettierrc file and paste this code into it

    {
        "arrowParens": "always",
        "bracketSameLine": false,
        "bracketSpacing": true,
        "embeddedLanguageFormatting": "auto",
        "htmlWhitespaceSensitivity": "css",
        "insertPragma": false,
        "jsxSingleQuote": false,
        "printWidth": 80,
        "proseWrap": "preserve",
        "quoteProps": "as-needed",
        "requirePragma": false,
        "semi": true,
        "singleQuote": false,
        "tabWidth": 2,
        "trailingComma": "es5",
        "useTabs": false,
        "vueIndentScriptAndStyle": false
    }
    

    4-Add

    "scripts": {
        ...
        "prettify": "prettier --write"
    }
    

    script to your package.json file

    Run npm run prettify whenever you think your code is ugly

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum