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

Question

我的代碼格式 prettier 不適用於 React Native，我不知道在哪里配置它，但它適用於 flutter

從這個代碼

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

它被格式化為這個

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

import React from 'react'

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

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

Answer 1

每個想法都有一個快捷方式來格式化代碼，例如 Vscode Ctrl + Shift + I

並使用 Prettier 格式化所有文件中的代碼

1- 首先你可以在你的想法中安裝更漂亮的代碼擴展（Webstorm 或 vs code） https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode “for the vscode”

2- 然后將其 package 安裝到您的依賴npm install --save-dev --save-exact prettier prettier https://prettier.io/docs/en/install.html

3- 創建.prettierrc文件並將此代碼粘貼到其中

{
    "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-添加

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

腳本到您的package.json文件

運行npm run prettify每當你認為你的代碼很丑時運行 prettify

Answer 2

好吧，我馬上就找到了答案，哈哈

1. 按 f1 選擇格式化文檔

2. 和 select 默認更漂亮