Visual Studio Code에서 구성 요소 또는 HTML 완성을 사용하는 방법이 있습니까? Bootstrap 등의 클래스가있을 때 각 문자를 수동으로 입력하는 것은 좋지 않습니다. 예를 들어 Emmet에서와 같이 완성 :ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

Visual Studio 코드는 .jsx 확장자를 감지하고 기본적으로 emmet 지원을 추가합니다 (VS 코드 1.8.1 사용 중).

그러나 모든 반응 파일에 .js 확장자를 사용하는 것을 선호하는 경우 JavaScript React 모드를 VS ​​Code 창의 오른쪽 하단 모서리에있는 .js 파일과 연결할 수 있습니다.

단계별로 수행하는 방법 (gif)

2019 : React에 대한 직접적인 대답

React 프로젝트에서 JSX / HTML 자동 완성을 얻는 가장 간단한 방법은 이것을 사용자 설정 또는 작업 공간 설정 ( <project-path>/.vscode/settings.json)에 추가하는 것입니다.

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

변경 사항을 적용하려면 VS Code를 다시 시작해야 할 수 있습니다.

PS React.js 프로젝트에 대해이 매핑을 수행하지 않는다면 KehkashanFazal의 대답이 아마도 당신을 위해 일할 것입니다.

누군가가 여전히이 문제로 어려움을 겪고있는 경우 :

나는 단순히 설정

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

HTML 완성을 활성화하지 않습니다. 그러나 다음을 사용합니다.

"emmet.includeLanguages": {
    "javascript": "html"
}

그렇습니다.

emmet 문서 에 따르면 :

"emmet.includeLanguages": {}

기본적으로 지원되지 않는 언어로 emmet 약어를 사용합니다. 여기에 언어와 emmet 지원 언어 간의 매핑을 추가합니다.
예 :{"vue-html": "html", "javascript": "javascriptreact"}

화면 오른쪽 하단에서 적절한 언어 모드 를 선택하기 만하면 됩니다. JavaScript React로 설정하십시오 .

2018 년

나는 사용하고있다 VSCode (ver 1.27.2)

을 (를) 사용하고 있지만 경험을 바탕으로 React합니다. 내 검색된 언어 VSCode는 여전히 바닐라 JavaScript입니다. 그리고 emmet은 작동하지 않았습니다.

• 다시 작동하게하는 방법 중 하나는 VSCode감지 된 언어를로 변경하는 것 JavaScript React입니다. 이것은 단일 JS파일 전용입니다.

• 완전히 한 번 변경하려면 연결해야합니다.

딸깍 하는 소리 Configure File Association for .js...

그리고를 선택합니다 JSX. 제 경우에는 이미했습니다.

• 직장 환경을 위해, 그리고 그들 중 누구도 당신을 위해 일하지 않는 경우 마지막. ctrl + , (comma)열려면 환경 설정으로 이동 하십시오.

emmet또는을 입력하고 검색합니다 Emmet. 그런 다음 재정의하려는 설정을 복사합니다. 나의 경우에는:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

참고 : 내가 사용하려고하지 않았습니다 jsx만 javascriptreact.

두 번째와 세 번째 단계를 구현했습니다. 이제 할 수 있습니다 Emmet.

이러한 솔루션 중 어느 것도 작동하지 않았지만 자동 닫기 태그 확장은 작동합니다! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

2019 업데이트

.html, .js 및 .jsx의 자동 닫기 태그

즉시 사용할 수 있습니다. 즉, 여는 태그에 닫는 괄호를 입력하면 닫는 태그가 자동으로 삽입됩니다.

.jsx 파일의 기본 HTML이 포함 된 Emmet

즉시 사용할 수 있습니다.

.js 파일의 기본 HTML이 포함 된 Emmet :

Emmet 약어 제안에 필요하고 탭 확장이 일관되게 작동하는 데 필요한 다음 설정을 추가하십시오.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

.js 및 .jsx 파일 모두에 사용자 정의 태그 (예 : React 구성 요소)가있는 Emmet

다음 설정을 추가하십시오.

  "emmet.triggerExpansionOnTab": true,

이 설정을 사용하면 Emmet이 모든 단어를 사용자 정의 태그로 확장합니다 (React 구성 요소 이름뿐 아니라).

또한 Emmet을 사용하여 React 구성 요소를 사용자 정의 태그로 확장 할 때 제안 목록에서 구성 요소 이름을 실제로 선택하고 먼저 완료해야합니다 (또는 전체 이름을 수동으로 입력하고 Esc 키로 제안 메뉴를 닫아야합니다). 단어가 확장 된 후 Emmet이 사용자 정의 태그를 확장하도록하려면 다시 탭해야합니다.

이 추가 단계를 잠재적으로 제거하기 위한 활성 기능 요청 이 있습니다 (표준 html 태그 확장과 동일한 방식으로 작동하도록 제안을 선택할 때 자동으로 확장 됨).

문제 해결

최신 버전의 VSCode가 있는지 확인하십시오.

다음 기본 설정을 변경하지 않았는지 확인하십시오.

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

2020 년의 간단한 대답

먼저 창의 오른쪽 하단에서 파일 연결 을 선택합니다 .

둘째, 창의 상단 중앙에있는 메뉴에서 .js에 대한 파일 연결 구성을 선택 합니다. JavaScript React로 변경하십시오.

아래 단계에 따라 간단히 문제를 해결했습니다.

1. VSCode의 왼쪽 하단에서 Javascript를 클릭하십시오.
2. 그런 다음 상단에 목록이 표시되고 " 'Javascript'언어 기반 설정 구성"을 클릭합니다.

3. 파일에 다음 행을 추가하십시오.

   "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }
   

더 자세한 정보를 원하시면 이 링크를 확인 하세요 .

Visual Studio Code에서 자동 닫기 확장을 사용할 수 있습니다. 추신. 확장 프로그램을 설치할 때 VS Code를 다시로드하거나 VS Code를 다시 열거 나 태그 확장 자동 닫기로 이동하여 다시로드를 클릭 할 때까지 자동 완성이 작동하지 않습니다.

자동 닫기 태그 확장 의 링크

JSX에서 자동 닫기 태그를 가져 오는 데 두 단계가 걸렸습니다.

1. 설정에 대한 위의 Kehkashan Fazal의 지침을 따르십시오. "emmet.includeLanguages"
2. VSCode ( formulahendry.auto-close-tag) 에서 자동 닫기 태그 확장 다운로드

이제 멋진 자동 닫기 JSX 태그가 있습니다!

다음 두 단계 만 따르십시오.

1. 언어를 감지하는 VSCode 하단에서 클릭하십시오.

1 단계

2. " 'Javascript (Babel)'언어 기반 설정 구성 ..."또는 기타 항목을 클릭하십시오.

2 단계

3. 이 코드를 먼저 쉼표 ''로 구분하여 붙여넣고 저장하십시오.

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true

3 단계

나는 모든 대답을 던졌고이 구성은 나를 위해 일했습니다. 언어를 포함하고 syntaxProfile을 추가해야했습니다. 트리거 확장 없이는 아무것도 작동하지 않았지만 이제 Tab 버튼을 눌러 결과를 얻습니다.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true

다양한 프로젝트를 진행하고 있었고 큰 설정 파일이 있습니다.

설정을 확인한 결과이 설정이 모든 것을 망치고 있다는 것을 알았습니다.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

그래서 댓글을 달았습니다. 그리고 모든 것은 React Apps에서 완벽하게 작동합니다. 감사

JSX 파일에서만 작동합니다. JS와 함께 작동하지 마십시오.

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},

React Babel의 자동 완성은 어제까지 잘 작동했습니다.

이 답변 중 어느 것도 도움이되지 않았으므로 컴퓨터를 다시 시작했습니다. 매력처럼 일했다;)

1. vscode의 설정으로 이동하십시오.
2. emmet 설정 유형에서 검색 창을 볼 수 있습니다.
3. 아래로 스크롤하면 언어 포함 옵션이 있습니다.
4. 포함 언어에서 항목 추가 버튼을 클릭합니다.
5. 항목을 javascript로 추가하고 값을 javascriptreact로 추가하십시오.

혼란 스러울 경우 아래 그림을 참조하십시오.