Le code de Visual studio changements de format (réaction de-JSX)

Question

J'ai le code suivant dans mon index.js

class App extends Component {
render() {
    return ( <div style = { styles.app } >
        Welcome to React!
        </div>
    )
}

}
Le code fonctionne, mais à chaque fois que je enregistrer (ctrl+s) visual studio format le jsx comme ça:

class App extends Component {
render() {
    return ( < div style = { styles.app } >
        Welcome to React!
        <
        /div>
    )
}

}

Comment puis-je résoudre ce problème? merci

Answer 1

En fin de compte ce qui a fait le tour était en train de changer le format de fichier à partir de JavaScript, JavaScript Réagir sur la barre d'outils en bas. Je suis de la publier ici pour référence future, puisque je n'ai pas trouvé de documentation sur ce sujet.

En plus de ci-dessus. Si vous cliquez sur " Configurer l'Association de Fichier pour .js', vous pouvez définir tous .fichiers js, Javascript Réagir

Answer 2

changement vscode préférences paramètres > paramètres de l'utilisateur ci-dessous:

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

Answer 3

Sinon, enregistrez le fichier avec l' .jsx extension résout ce dans vscode.

J'ai eu le même problème et je suis l'espoir de découvrir une meilleure façon de traiter de cette question dans vscode.

J'ai remarqué dans votre travail doit être fait chaque fois que vous ouvrez le réagir fichier avec une extension .js

Answer 4

Installer plus Jolie (si il n'est pas installé par défaut) et essayez de l'ajouter à votre nom d'utilisateur ou des lieux de travail:

"prettier.jsxBracketSameLine": true

Ne mettez pas de saut de ligne entre le retour et le renvoi de la JSX expression.

Déclencheur de mise en forme automatique (Alt+Shift+F) et de vérifier si les œuvres.

Answer 5

Assurez-vous que vous n'avez pas de multiples javascript formateurs activé dans votre espace de travail courant. (Vous devez désactiver le reste d'entre eux pour votre espace de travail actuel).

réagir-embellir surtout la magie, mais échoue si vous avez quelques autres JS formateur/formatage automatique de la requête déjà installé.

Dans mon cas, j'ai dû réagir-embellir et JS-CSS-HTML Formateur extension installée. J'ai dû désactiver le JS-CSS-HTML Formateur pour mon espace de travail courant.