npm startでtsconfig.jsonが書き変わってしまうのを止める方法が知りたいです。

現在、React+typescript+create-react-appでtypescriptを学習し始めました。(エディターはVScodeです。)
デフォルトのApp.tsxを以下のように書き換えたところ以下のようなエラーが出ました。

"message": "'--jsx' フラグが指定されていないと、JSX を使用できません。",

確かにtsconfig.jsonの内容を確認すると以下のようでした。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

この "jsx": "react-jsx"の部分を "jsx": "preserve"に修正したところエラーは消えましたが、
再度npm startをするとtsconfig.jsonは"jsx": "react-jsx"と書き変わってしまいます。
初歩的なな質問で恐縮ですが、原因はなんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

私も同じ問題に直面しておりましたが、調査の結果以下のことが判明しましたので共有致します。

"jsx": "react-jsx"という記述はReactv.17をサポートするために変更された内容であり、最新のcreate react appで採用されている
"message": "'--jsx' フラグが指定されていないと、JSX を使用できません。" こちらのエラーが出力される状態が正常では無いためVSCodeの再起動を行う必要がある
reactではないトランスパイラを利用する場合preserveを記述する必要がある

私の場合はVSCodeの再起動で解決しましたが、何か参考になれば幸いです。

投稿2020/12/08 07:23