web-dev-qa-db-fra.com

Le format de code Visual Studio change (React-JSX)

J'ai l'extrait 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 sauvegarde (ctrl + s), visualise le format de studio visuel comme suit:

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

}

Comment puis-je résoudre ça? Merci

reactjsvisual-studio-codejsx
41
omer727

En fin de compte, l’astuce consistait à modifier le format de fichier de JavaScript à JavaScript React dans la barre d’outils inférieure. Je le publie ici pour référence future car je n’ai trouvé aucune documentation à ce sujet. sujet.

enter image description here

En plus de ce qui précède. Si vous cliquez sur "Configurer l'association de fichiers pour .js", vous pouvez définir tous les fichiers .js sur Javascript.

147
omer727

changer les paramètres de préférences vscode> paramètres utilisateur ci-dessous:

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

Sinon, enregistrer le fichier avec une extension . Jsx résout le problème en vscode.

J'ai eu le même défi et j'espère découvrir une meilleure façon de gérer ce problème dans vscode.

J'ai remarqué que votre solution de contournement suggérée doit être effectuée chaque fois que vous ouvrez le fichier de réaction avec une extension de . Js

10
twumm

Assurez-vous de ne pas activer plusieurs formateurs JavaScript dans votre espace de travail actuel. (Vous devez désactiver le reste d'entre eux pour votre espace de travail actuel).

react-beautify fait surtout la magie mais échoue si un autre formateur/embellisseur JS est déjà installé.

Dans mon cas, j’avais réagi-sublimé et l’extension JS-CSS-HTML Formatter installée. Je devais désactiver le formateur JS-CSS-HTML pour mon espace de travail actuel.

3
Ozesh

Installez Prettier (s'il n'est pas installé par défaut) et essayez d'ajouter ceci à vos paramètres d'utilisateur ou de lieu de travail:

"prettier.jsxBracketSameLine": true

Ne mettez pas de saut de ligne entre return et l'expression JSX renvoyée.

Trigger autoformat (Alt+Shift+F) et vérifiez si cela fonctionne.

3
Janos

J'ai eu du mal avec cela, mais j'ai finalement trouvé une solution. C'est mon 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
}

J'ai ajouté

"beautify.ignore": ["**/*.js","**/*.jsx"]
2
Loc Mai

Vous pouvez installer une extension telle que react-beautify qui vous aide à formater votre code jsx.

Il est trouvé ici

Cette extension encapsule prettydiff/esformatter pour formater votre fichier javascript, JSX, TypeScript, TSX.

1
Tal Avissar

Vous pouvez empêcher VSC de mal formater votre JSX en ajoutant une association dans votre settings.json

Code> Preferences> Settings

Dans la fenêtre des paramètres, recherchez associations, cliquez éditez dans settings.json puis ajoutez:

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

J'ai eu un problème similaire, puis j'ai découvert que c'était causé par l'extension 'embellir'. Après avoir désinstallé l'extension, tout fonctionne correctement.

1
I aint need subscribers