Visual Studio Code의 JSX 또는 HTML 자동 완성

Visual Studio Code의 JSX 또는 HTML 자동 완성

---

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를 다시 시작해야 할 수 있습니다.

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

---

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

나는 단순히 설정

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

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

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

그렇습니다.

emmet 문서 에 따르면 :

"emmet.includeLanguages": {}

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

---

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

---

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

---

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.

---

2019 Update

---

Auto closing tags in .html, .js, and .jsx

Works out of the box. That is, after typing in the closing bracket to the opening tag, the closing tag will be inserted automatically.

Emmet with basic HTML in .jsx files

Works out of the box.

Emmet with basic HTML in .js files:

Add the following setting, required for Emmet abbreviation suggestions, and required for tab expansion to work consistently.

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

Emmet with custom tags (e.g. React Components) in both .js and .jsx files

Add the following setting:

  "emmet.triggerExpansionOnTab": true,

Note that with this setting, Emmet will expand all words as custom tags (not just React component names)

Also note that when using Emmet to expand React components as custom tags, you have to actually choose the component name from the suggestion list and complete that first (or type out the whole name manually and close the suggestion menu with the escape key). After the word expands, you then have to tab again to get Emmet to expand the custom tag.

There's an active feature request to potentially remove this extra step (automatically expand when selecting the suggestion so that it works the same way as expanding standard html tags would).

---

Troubleshooting

Ensure you have the latest version of VSCode.

Ensure you did not change the following default settings:

"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"
],

---

I solved the problem simply by following the steps below:

1. On the left bottom of VSCode click to Javascript
2. Then on the top, you will see a list, click on "Configure 'Javascript' language based settings"

3. Add these lines to the file:

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

If you want to more details, you can check this link.

---

you can use The Auto Close Extention In Visual Studio Code . ps. when you install the extension, the autocomplete won't work until you reload VS Code , just Reopen VS Code , or go to auto close tag extension and click Reload.

link of the auto close tag Extension

---

It took me two steps to get auto-closing tags in JSX.

1. Follow Kehkashan Fazal's instructions above about setting "emmet.includeLanguages"
2. Download the Auto Close Tag extension from VSCode (formulahendry.auto-close-tag)

And now you have nice auto-closing JSX tags!

---

Follow these two steps only:

1. On bottom of VSCode where detect language click on that

1st step

2. Click on "Configure 'Javascript(Babel)' language based settings..." or what ever

2st step

3. paste this code on it separate first by comma ',' and save it.

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

3rd step

---

I went throw all answers and this config worked for me. had to include language as well as add syntaxProfile. without the trigger expansion nothing worked but now I only press Tab button to get the result.

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

---

Only work in JSX files. Let it not work with JS.

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

---

Autocomplete for React Babel was working fine until yesterday for me.

None of these answers helped so I just restarted my computer. Worked like a charm ;)

---

I was working on various projects and I have a big settings file.

I checked settings and found out that this settings was ruining that all.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

So I commented it. And everyhting works perfectly in React Apps. Thanks

참조 URL : https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code