VSCode reactの記述が自動整形されない問題

Question

VSCode(visual studio Code)で
htmlファイルにreact jsxを記述しています。
type="text/babel"を付与するとVSCodeの自動整形が昨日しなくなります。

下記だと自動整形を受け付けるのですが、
script

    <script>
        var MyComponent = React.createClass({]
            getInitialState: function () {
                return { count: 0 }
            },
            render: function () {
                return (
                    <div>
                        <input type='text' onChange={this.doChange}></input>
                        <span>{this.state.count}</span>
                    </div >
                );
            },
            doChange: function (e) {
                this.setState({ count: e.target.value.length });
            }
        });
        // コンポーネントの利用
        ReactDOM.render(
            React.createElement(MyComponent),
            document.getElementById('main')
        );
    </script>

type="text/babel"を付けると自動整形しない

    <script type="text/babel">
        var MyComponent = React.createClass({] getInitialState: function () { return { count: 0 } }, render: function () { return
        (
        <div>
            <input type='text' onChange={this.doChange}></input>
            <span>{this.state.count}</span>
        </div>
        ); }, doChange: function (e) { this.setState({ count: e.target.value.length }); } }); // コンポーネントの利用 ReactDOM.render( React.createElement(MyComponent),
        document.getElementById('main') );
    </script>

自動整形が機能するように設定など解決策はあるのでしょうか？

Comments

[yumetodo]

素直にファイルを分けるという選択肢はなしでしょうか・・・？

Answer 1

[html] support script type=module #34488 こちらのコミットを見ていただければわかると思うのですが、だいぶ拡張性が低いようです。

解決方法としては

• ユーザーが選択できるよう拡張する (Pull Request をだす) / これにも対応するように Issue を立てる
• フォーマッターの拡張機能を入れる
• ローカルファイルを編集して対応させる (未サポートになる)
• あきらめて埋め込みをやめる

が考えられます。

PR を出すのは面白そうですが、面倒であれば 2 番目以降の選択肢がいいかもしれません。

Comments

[yoyoyo555]

ありがとうございます。