0
203
Viewshow 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
Answer question0
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
0
well i found the answer right away lol
- press f1 choose Format Document With
- and select prettier for default
