

**解決したいこと**

  1. 拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について

  2. typescriptで書くときに悩まされる下記のerrorについて

**前提**

react native を書いています。コード整形でpretterとeslintを使用しています。

**問題**

ここでうまく行かないことがあります。  
ファイルの拡張子を.js でreact nativeを書くと下記のようになり使いものになりません。  
一方拡張子を.tsxで書くと

**stack2.js**

[code]

    import React from 'react';
    import { View, Text, Button } from 'react-native';
    
    export default class Stack2 extends React.Component {
        render() {
            return ( <
                View style = {
                    { flex: 1, justifyContent: 'center', alignItems: 'center' } } >
                <
                Text > Stack2 < /Text> <
                /View>
            );
        }
    }
    
[/code]

一方拡張子を.tsxで書くと、下記の部分でerrorがでて先に進めません。  
**JSX 要素型 'View' にはコンストラクトも呼び出しシグネチャも含まれていません。**

[code]

    <View></View>
    
[/code]

拡張子.tsxでは下記のようにちゃんと整形できます。

[code]

    import React from 'react';
    import { View, Text, Button } from 'react-native';
    
    export default class Stack2 extends React.Component {
        render() {
            return (
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text>Stack2</Text>
                </View>
            );
        }
    
[/code]

**考察**

このことからtypescriptで書くと整形できて、javascriptでは整形ができていないと考えます。

**嘆き**

私はtypescriptでのerrorが解決できないので、拡張子.jsで書きたいのです。ですがコード整形がうまくいきません。

教えて下さい！(m__m)


CC BY-SA 4.0
2020-02-25T11:44:34.053
63347
2020-02-25T16:42:51.693
2020-02-25T16:42:51.693
3060
37589
question
javascript vscode reactjs typescript react-native
react nativeでpretterとeslintを使用するときのコード整形について