Visual Studio 코드 포맷 변경(React-JSX)

Visual Studio 코드 포맷 변경(React-JSX)

인덱스에는 다음과 같은 스니펫이 있습니다.js

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

코드는 동작하지만 비주얼 스튜디오 포맷을 저장할 때마다(ctrl+s) jsx는 다음과 같습니다.

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

어떻게 하면 해결할 수 있을까요?감사해요.

결국 이 트릭은 아래쪽 툴바의 파일 형식을 JavaScript에서 JavaScript React로 변경하는 것이었습니다.이 주제에 대한 문서를 찾지 못했기 때문에 나중에 참고하기 위해 여기에 게시합니다.

상기 외에'Configure File Association for .js'를 클릭하면 모든 .js 파일을 Javascript React로 설정할 수 있습니다.

아래 vscoode 기본 설정 > 사용자 설정 변경:

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

설정에 연결을 추가하여 VSC가 JSX 형식을 잘못 지정하는 것을 방지할 수 있습니다.json

CodePreferencesSettings

설정창에서 연관성을 검색하여 settings.json의 edit을 클릭한 후 다음을 추가합니다.

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

또는 확장자가 .jsx인 파일을 저장하면 vscode에서 이 문제가 해결됩니다.

저도 같은 과제를 안고 있으며, vscode에서 이 문제를 해결할 수 있는 더 나은 방법을 찾고 싶습니다.

리액트 파일을 .js 확장자로 열 때마다 제안하신 회피책을 실행해야 한다는 것을 알았습니다.

Visual Studio 코드 설정을 엽니다.설정에 네비게이트 하는 방법에 대해서는, 다음의 그림을 참조해 주세요.

설정 탭이 열리면모든 프로젝트의 설정을 변경하려면 사용자 하위 탭을 선택합니다. 현재 프로젝트의 경우 작업영역 하위 탭을 선택합니다.

검색 텍스트 상자에 "파일 연결"을 입력하고 Enter 키를 누릅니다.

항목 추가를 클릭합니다.

• 항목 설정 : *.js
• 값 설정 : javascriptreact

은 모든 합니다.*jsjavascript React 파일로 프로젝트의 파일을 지정합니다.

any (Next open any).js파일에서 마우스 오른쪽 단추를 클릭하고 문서 형식을 선택합니다.포메터가 여러 개 있는 경우 즐겨찾는 포메터를 연결합니다.포맷을 처리하기 위해 Pretty를 사용했습니다.

[예쁘게 설치(기본적으로 설치되지 않은 경우)]를 설치하고 사용자 또는 직장 설정에 추가합니다.

"prettier.jsxBracketSameLine": true

반환된 JSX 식과 반환된 JSX 식 사이에 줄 바꿈을 넣지 마십시오.

자동 포맷 " " " "(Alt+Shift+F)동작하는지 확인합니다.

나는 이것과 씨름했지만 마침내 해결책을 찾았다.이게 제 설정입니다.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"]

현재 작업 공간에서 여러 javascript 포맷을 활성화하지 않도록 하십시오(나머지 javascript 포맷은 현재 작업 공간에서 비활성화해야 합니다).

react-beautify는 대부분 매직 처리를 하지만 다른 JS 포메터/뷰티파이어가 이미 설치되어 있으면 실패합니다.

저 같은 경우에는 리액트 뷰티와 JS-CSS-HTML Formatter 확장을 설치했습니다.현재 작업 공간에서 JS-CSS-HTML 포메터를 비활성화해야 했습니다.

나한테 효과가 있었던 건...

화면 하단의 언어 모드(Javascript Respect)를 클릭했습니다.

그런 다음 Configure React Javascript Language based 설정 옵션을 선택합니다.

그리고 사진과 같이 javascript react default 포맷터를 pretty로 변경하였습니다.

리액트 파일을 저장한 후로는 그걸로 충분해

위에 언급한 모든 조합을 추가했습니다.

1. 이것을 추가했다

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

2. 이것도 추가했다

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

3. 추가 js 포맷 삭제
4. 더 예쁘게 설치됨
5. 더 예쁘게 포맷하여 켜다

react-beautify와 같은 확장 기능을 설치하여 jsx 코드를 포맷할 수 있습니다.

여기서 찾을 수 있습니다.

이 확장자는 javascript, JSX, typescript, TSX 파일을 포맷하기 위해 prettydiff/esformatter를 래핑합니다.

VSC에서 JS-CSS-HTML Formatter 확장을 비활성화해야 했습니다. 이 문제에 대한 유일한 해결책입니다.

'예쁘다'는 독단적인 코드 포맷이다.코드를 구문 분석하여 일관된 스타일을 적용하고 필요에 따라 최대 줄 길이를 고려한 자체 규칙을 사용하여 다시 작성합니다.예를 들어 JavaScript TypeScript Flow JSX JSON CSS SCSS Less HTML Vue Angular GraphQL Markdown YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

저도 비슷한 문제가 있었는데, '미화' 연장이 원인이라는 것을 알게 되었습니다.확장 기능을 제거했더니 모든 것이 정상적으로 작동합니다.

여러 가지 훌륭한 제안과 해결 방법을 읽은 후, VSCode 편집기 창 하단에 있는 밝은 파란색 가로 막대 위에 마우스 화살표를 놓고 마우스 오른쪽 버튼을 클릭하면 팝업 목록 창이 열립니다. = "편집자 구분"을 선택 취소했습니다.

할 수 .JavaScriptVSCode 하단의 상태 표시줄에서 형식을 JavaScript에서 React로 변경합니다(선택).React관련짓는 언어 선택 모드에서'.jsx')

이 코드를 .discode에 추가합니다.

/* prettier-ignore */

언급URL : https://stackoverflow.com/questions/44993808/visual-studio-code-changes-format-react-jsx