web-dev-qa-db-ja.com

Visual Studioコードの変更形式（React-JSX）

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>
    )
}

}

どうすれば解決できますか？ありがとう

reactjsvisual-studio-codejsx
41
omer727

最終的には、下のツールバーのファイル形式をJavaScriptからJavaScript Reactに変更するというトリックが行われました。このトピックに関するドキュメントが見つからなかったため、今後参照するためにここで公開しています。

enter image description here

上記に加えて。 「.jsのファイルの関連付けを構成」をクリックすると、すべての.jsファイルをJavascript Reactに設定できます

147
omer727

vscodeの設定を変更>以下のユーザー設定：

"files.associations": {
        "*.js":"javascriptreact"
    }
30
dotdot

または、。jsx拡張子でファイルを保存すると、vscodeでこれが解決されます。

私も同じ課題を抱えていましたが、vscodeでこの問題を処理するより良い方法を見つけたいと思っています。

。jsの拡張子を持つ反応ファイルを開くたびに、推奨される回避策を実行する必要があることに気付きました

10
twumm

現在のワークスペースで複数のJavaScriptフォーマッタを有効にしないでください。 （現在のワークスペースでそれらの残りを無効にする必要があります）。

react-beautifyはほとんど魔法を行いますが、すでに他のJSフォーマッタ/美化機能がインストールされている場合は失敗します。

私の場合、react-beautifyとJS-CSS-HTML Formatter拡張機能がインストールされていました。現在のワークスペースでJS-CSS-HTML Formatterを無効にする必要がありました。

3
Ozesh

Prettierをインストールし（既定でインストールされていない場合）、これをユーザーまたは職場の設定に追加してみます。

"prettier.jsxBracketSameLine": true

Returnと返されたJSX式の間に改行を入れないでください。

自動フォーマット(Alt+Shift+F)をトリガーし、動作するかどうかを確認します。

3
Janos

私はこれに苦労しましたが、最終的に解決策を見つけました。これは私の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"]
2
Loc Mai

React-beautifyのような拡張機能をインストールすると、jsxコードをフォーマットできます。

見つかった ここ

この拡張機能は、javascript、JSX、TypeScript、TSXファイルをフォーマットするためにprettydiff/esformatterをラップします。

1
Tal Avissar

settings.jsonに関連付けを追加することにより、VSCがJSXを誤ってフォーマットするのを防ぐことができます。

Code> Preferences> Settings

設定ウィンドウでassociationsを検索し、settings.jsonで編集をクリックしてから追加します：

"files.associations": {
    "*.js": "javascriptreact"
}
1
jadeallencook

私は同様の問題を抱えていましたが、それは「美化」拡張が原因であることがわかりました。拡張機能をアンインストールした後、すべてが正常に機能しています。

1
I aint need subscribers