Index.jsに次のスニペットがあります
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
コードは機能しますが、Visual Studio形式(ctrl + s)を保存するたびに、jsxは次のようにフォーマットされます。
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
どうすれば解決できますか?ありがとう
vscodeの設定を変更>以下のユーザー設定:
"files.associations": {
"*.js":"javascriptreact"
}
または、。jsx拡張子でファイルを保存すると、vscodeでこれが解決されます。
私も同じ課題を抱えていましたが、vscodeでこの問題を処理するより良い方法を見つけたいと思っています。
。jsの拡張子を持つ反応ファイルを開くたびに、推奨される回避策を実行する必要があることに気付きました
現在のワークスペースで複数のJavaScriptフォーマッタを有効にしないでください。 (現在のワークスペースでそれらの残りを無効にする必要があります)。
react-beautifyはほとんど魔法を行いますが、すでに他のJSフォーマッタ/美化機能がインストールされている場合は失敗します。
私の場合、react-beautifyとJS-CSS-HTML Formatter拡張機能がインストールされていました。現在のワークスペースでJS-CSS-HTML Formatterを無効にする必要がありました。
Prettierをインストールし(既定でインストールされていない場合)、これをユーザーまたは職場の設定に追加してみます。
"prettier.jsxBracketSameLine": true
Returnと返されたJSX式の間に改行を入れないでください。
自動フォーマット(Alt+Shift+F)
をトリガーし、動作するかどうかを確認します。
私はこれに苦労しましたが、最終的に解決策を見つけました。これは私のsettings.jsonです
{
"terminal.integrated.Shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
追加した
"beautify.ignore": ["**/*.js","**/*.jsx"]
React-beautifyのような拡張機能をインストールすると、jsxコードをフォーマットできます。
見つかった ここ
この拡張機能は、javascript、JSX、TypeScript、TSXファイルをフォーマットするためにprettydiff/esformatterをラップします。
settings.jsonに関連付けを追加することにより、VSCがJSXを誤ってフォーマットするのを防ぐことができます。
Code
> Preferences
> Settings
設定ウィンドウでassociationsを検索し、settings.jsonで編集をクリックしてから追加します:
"files.associations": {
"*.js": "javascriptreact"
}
私は同様の問題を抱えていましたが、それは「美化」拡張が原因であることがわかりました。拡張機能をアンインストールした後、すべてが正常に機能しています。