[reactjs] Visual Studio Code에서 JSX 또는 HTML 자동 완성

Program / 글쓴이

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파일 전용입니다.

vscode 옵션

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

두

딸깍 하는 소리 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"
],