如何为 React Native 更改更漂亮的格式

Question

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

Answer 1

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

Answer 2

well i found the answer right away lol

1. press f1 choose Format Document With

2. and select prettier for default