@gitfuku62 (fuku 62)posted at 2022-07-22

vscodeでreactのjsxのフォーマットを崩さない方法

Q&A

vscodeでreactのjsxのフォーマットを崩さない方法が知りたいです。

vscodeでreactのjsxのフォーマットを崩さない方法が知りたいです。
色々調べて実践しましたが、解決に至りませんでした。

解決方法を教えて下さい。

発生している問題・エラー

                let dom = document.getElementById('#root'); let el =(
                <div>
                    <h2>jsx sample</h2>
                    <p>this is sample messages</p>
                </div>
                )

vscodeで保存時「let le=」　が上のコードの末尾に勝手に整形されてしまいます。

理想のコード

                let dom = document.getElementById('#root'); 
                let el =(
                <div>
                    <h2>jsx sample</h2>
                    <p>this is sample messages</p>
                </div>
                )

保存時に上のような整形にしたいです。

自分で試したこと

command + ,(設定)でeditor.formatOnSaveのチェックを外す.
command + K + Sでフォーマットしないで保存（コマンド叩いてもキーボードショートカットが開くだけでした。。。）
インストール済みのすべての拡張機能を無効にする。

1Answer

@Seiri posted at 2022-07-22

VSCodeの拡張機能のフォーマットツールは一旦アンインストールして、もう一度インストールした後、VS Codeのsettings.jsonを開いて、下記設定を追加し保存する

    "[javascript]": {
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true
    },
    "[typescriptreact]": {
        "editor.formatOnSave": true
    }

0Like

Are you sure you want to delete the question?