前提・実現したいこと
vscodeでreact nativeを書きているのですが括弧の後に改行や空白が入りうまくかけません。
pretterと eslint を入れました.コードを整形して書きやすくしたかったのです。
ですが、、
//.eslintrc.js module.exports = { root: true, plugins: ['react'], extends: ["airbnb", '@react-native-community', ' plugin:prettier/recommended', ], parser: 'babel-eslint', // JSXとかでエラー出るのを回避。env の es6:true もこれにより不要になる parserOptions: { sourceType: 'module', // import などを使うときに必要 ecmaFeatures: { experimentalObjectRestSpread: true, // 非推奨項目も注意してくれる?(あんまよくわかってない) jsx: true, //JSX を使うときに必要( reactプラグインいれてるからいらないかも...? ) }, }, };
//.prettierrc.js module.exports = { "trailingComma": "es5", "singleQuote": true };
vscodeのsetting.jsonは下記の様です
{ "files.insertFinalNewline": true, "files.trimFinalNewlines": true, "breadcrumbs.enabled": true, "javascript.format.enable": false, // "editor.wordWrap": "on", "files.autoSave": "onFocusChange", "prettier.eslintIntegration": true }
発生している問題・エラーメッセージ
//app.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; const App: () => React$Node = () => { return ( < > < StatusBar barStyle = "dark-content" / > < SafeAreaView > < ScrollView contentInsetAdjustmentBehavior = "automatic" style = { styles.scrollView } > < Header / > { global.HermesInternal == null ? null : ( < View style = { styles.engine } > < Text style = { styles.footer } > Engine: Hermes < /Text> < /View> ) } < View style = { styles.body } > < View style = { styles.sectionContainer } > < Text style = { styles.sectionTitle } > Step One < /Text> < Text style = { styles.sectionDescription } > Edit < Text style = { styles.highlight } > App.js < /Text> to change this screen and then come back to see your edits. < /Text> < /View> < View style = { styles.sectionContainer } > < Text style = { styles.sectionTitle } > See Your Changes < /Text> < Text style = { styles.sectionDescription } > < ReloadInstructions / > < /Text> < /View> < View style = { styles.sectionContainer } > < Text style = { styles.sectionTitle } > Debug < /Text> < Text style = { styles.sectionDescription } > < DebugInstructions / > < /Text> < /View> < View style = { styles.sectionContainer } > < Text style = { styles.sectionTitle } > Learn More < /Text> < Text style = { styles.sectionDescription } > Read the docs to discover what to do next: < /Text> < /View> < LearnMoreLinks / > < /View> < /ScrollView> < /SafeAreaView> < /> ); }; const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black, }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark, }, highlight: { fontWeight: '700', }, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right', }, }); export default App;
該当のソースコード
下記のようにしたいのですが、保存時に上記の様になっています。
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; const App: () => React$Node = () => { return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> {global.HermesInternal == null ? null : ( <View style={styles.engine}> <Text style={styles.footer}>Engine: Hermes</Text> </View> )} <View style={styles.body}> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Step One</Text> <Text style={styles.sectionDescription}> Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits. </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>See Your Changes</Text> <Text style={styles.sectionDescription}> <ReloadInstructions /> </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Debug</Text> <Text style={styles.sectionDescription}> <DebugInstructions /> </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Learn More</Text> <Text style={styles.sectionDescription}> Read the docs to discover what to do next: </Text> </View> <LearnMoreLinks /> </View> </ScrollView> </SafeAreaView> </> ); }; const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black, }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark, }, highlight: { fontWeight: '700', }, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right', }, }); export default App;
試したこと
eslintとpretterのインストールしてあります
あなたの回答
tips
プレビュー