Format zmiany kodu w programie Visual studio (React-JSX)

Zmień ustawienia VSCode preferences > Ustawienia użytkownika poniżej:

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

Możesz zapobiec nieprawidłowemu formatowaniu JSX przez VSC, dodając skojarzenie w Ustawieniach .json

Code > Preferences > Settings

W oknie Ustawienia wyszukaj skojarzenia , Kliknij Edytuj w Ustawieniach.json a następnie dodać:

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

Ewentualnie zapisanie pliku za pomocą .rozszerzenie jsx rozwiązuje to w vscode.

Miałem to samo wyzwanie i mam nadzieję odkryć lepszy sposób radzenia sobie z tym problemem w vscode.

Zauważyłem, że sugerowana przez Ciebie praca musi być wykonywana za każdym razem, gdy otwierasz plik reactowy z rozszerzeniem .js

Upewnij się, że nie masz włączonych wielu formaterów javascript w bieżącej przestrzeni roboczej. (Musisz wyłączyć Pozostałe z nich dla bieżącej przestrzeni roboczej).

React-beautify przeważnie robi magię, ale zawodzi, jeśli masz już zainstalowany inny program do formatowania/upiększania JS.

W moim przypadku miałem zainstalowane react-beautify i rozszerzenie Formatera JS-CSS-HTML. Musiałem wyłączyć formatowanie JS-CSS-HTML dla mojego obecnego obszaru roboczego.

Zainstaluj ładniejszy (jeśli nie jest zainstalowany domyślnie) i spróbuj dodać go do ustawień użytkownika lub miejsca pracy:

"prettier.jsxBracketSameLine": true

Nie umieszczaj linebreak pomiędzy return a zwracanym wyrażeniem JSX.

Uruchom autoformat (Alt+Shift+F) i sprawdź, czy działa.

Zmagałem się z tym, ale w końcu znalazłem rozwiązanie. To moje ustawienia.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
}

Dodałem

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

Możesz zainstalować rozszerzenie takie jak react-beautify, które pomaga sformatować kod jsx.

Znajduje się TUTAJ

To rozszerzenie owija prettydiff / esformatter do formatowania plików javascript, JSX, typescript, TSX.

Miałem podobny problem, potem okazało się, że jest to spowodowane rozszerzeniem "upiększania". Po odinstalowaniu rozszerzenia wszystko działa dobrze.

Musiałem wyłączyć rozszerzenie Formatera JS-CSS-HTML w VSC. jedyne rozwiązanie tego problemu

Właśnie dodałem wszystkie wyżej wymienione kombinacje.

1. dodał to

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

1. dodano również

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

1. usunięto dodatkowe formatowanie js
2. zainstalowany ładniejszy
3. Włącz ładniejsze i formatowanie

Ładniejszy jest formaterem kodu. Wymusza spójny styl przez parsowanie kodu i ponowne wydrukowanie go z własnymi regułami, które uwzględniają maksymalną długość linii, owijając kod w razie potrzeby. include : JavaScript Maszynopis Przepływ JSX JSON CSS SCSS Mniej HTML Vue Kątowe GraphQL Markdown YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Po przeczytaniu wielu wspaniałych sugestii i obejść, odkryłem, że mogę po prostu umieścić strzałkę myszy w dół nad jasnym niebieskim poziomym paskiem na dole okna edytora kodu VSCode-kliknij prawym przyciskiem myszy-co otwiera okno wyskakującej listy - i odznaczyć = "wcięcia edytora".