如何为 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

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

按 f1 选择格式化文档

和 select 默认更漂亮

Answer 2

每个想法都有一个快捷方式来格式化您的代码，例如 Vscode Ctrl + Shift + I

并使用 Prettier 格式化所有文件中的代码

1-首先你可以在你的idea中安装prettier code扩展（Webstorm或vs code） https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode“为 vscode”

2- 然后将它的包安装到你的依赖项中 npm install --save-dev --save-exact 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 每当你认为你的代码很丑陋时

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

how to change prettier format for react native

javascript

dart

reactjs

react-native

flutter