Visual Studio 코드의 JSX 또는 HTML 자동 완성
Visual Studio Code visual visualHTML?왜냐하면 Bootstrap 등의 수업이 있을 때는 각 문자를 수동으로 입력하는 것은 좋지 않기 때문입니다. Emet에서의는 다음과 .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;
2023: JSX/HTML 자동완성을 추가하는 간단한 방법:.jsReact 프로젝트의 파일...
VSCode를 VSCode의.Ctrl+, (오류)Cmd+,(Mac 서서를를를서서는)★★★★★★★★★★★★。
JSON으로 설정:
- [ Settings ](설정) [Settings.json](설정) [Open JSON](JSON) ](JSON) 。 이것을 글로벌하게 는, 「」, 「」를 작성할 수 .
.vscode/settings.json이치노
settings.json에 다음 JSON 값을 추가합니다.
"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles": { "javascript": "jsx" }
설정 UI로 설정:
:Emmet: Syntax Profiles아직 settings.json(위 참조)을 열어야 합니다만, 이 정보를 찾고 계신 분은 이쪽에서 확인하실 수 있습니다.
[ Settings ](하여 [ ](으)를 찾습니다.Emmet: Include Languages
item ]를 클릭하여 [ item]의 매핑을 추가합니다.javascript로로 합니다.javascriptreact.
Visual Studio 코드가 .jsx 확장자를 검출하여 기본적으로 emet 지원을 추가합니다(VS 코드 1.8.1 사용).
그러나 모든 리액트 파일에 .js 확장자를 사용하는 경우 VS Code 창의 오른쪽 하단에 있는 .js 파일에 JavaScript React 모드를 연결할 수 있습니다.
업데이트 2021
코드 복사 붙여넣기만 원하는 사용자:
"emmet.syntaxProfiles": {
"javascript": "jsx"
}
위의 솔루션이 동작하지 않는 경우는, 다음과 같이 하십시오.
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
VS 코드 v1.56.2로 테스트.
이 문제로 아직 어려움을 겪고 있는 경우:
나는 단순한 설정을 발견했다.
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
는 HTML 완성을 이노블로 하지 않습니다.단, 다음을 사용합니다.
"emmet.includeLanguages": {
"javascript": "html"
}
한다.
emet 문서에 따르면:
"emmet.includeLanguages": {}인터넷 사용 가능지원되는 언어와 Emet 언어 간의 매핑을 여기에 추가합니다.
::{"vue-html": "html", "javascript": "javascriptreact"}
화면 우측 하단에서 적절한 언어 모드를 선택하여 JavaScript React로 설정합니다.
2018
하고 VSCode (ver 1.27.2)
내 경험을 바탕으로, 비록 내가 일을 하고 있지만.React에서 VSCode 바닐라야JavaScript그리고 에밋은 작동하지 않았다.
- 중 는 '바꾸다'를 것입니다.
VSCode에서 ""로JavaScript React거예요.JS★★★★★★★★★★★★★★★★★★.
- 한 번 완전히 바꾸려면 관련지어야 합니다.
[ ] 를 합니다.Configure File Association for .js...
'만나서'를 선택합니다.JSX제 경우엔 이미 해봤어요
- 작업영역 설정의 경우 및 작업영역이 없는 경우 마지막입니다.[ Preferences ]( 설정)
ctrl + , (comma)아아아아아아아아아아아아아아아아아아아아.
「 」를 합니다.emmet ★★★★★★★★★★★★★★★★★」Emmet런음 ★★★★★★★★★★★★★★★★:
{
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
}
주의: 이 명령어를 사용하지 않았습니다.jsx only만.javascriptreact.
나는 두 번째와 세 번째 단계를 실행했다. 해서 제가 할 수 됐습니다.Emmet
2020년 심플한 답변
먼저 창의 오른쪽 아래 중앙에서 File Association을 선택합니다.
다음으로 창의 맨 위 중앙에 있는 메뉴에서 Configure File Association for .js를 선택합니다.JavaScript React로 변경합니다.
그 어떤 해결책도 효과가 없었다...하지만 자동 닫기 태그 확장은 가능합니다!https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
2022-1986년:ReactJs에 대한 JSX의 자동 제안을 활성화하는 쉽고 현대적인 방법은 아래 GIF에 나와 있습니다.
Windows = > [ File ]> [ Preferences ]> [ Settings ]의 경우
MacOs = > 코드 > 기본 설정 > 설정
다음 goto > > 언어를 > emet > emet > 를 추가합니다.javascript과 이 the the the the the the the thejavascriptreact
시각적 참조를 위해 GIF에 표시된 단계를 따르십시오.
2019년 갱신
.html, .js 및 .jsx 태그 자동 닫기
바로 사용할 수 있습니다.즉, 여는 태그에 닫힘 괄호를 입력하면 닫힘 태그가 자동으로 삽입됩니다.
.jsx 파일의 기본 HTML을 사용한 Emet
바로 사용할 수 있습니다.
.js 파일의 기본 HTML을 사용한 Emet:
다음 설정을 추가합니다.Emet 생략형 제안과 탭 확장이 일관되게 작동하기 위해 필요합니다.
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
.js 파일과 .jsx 파일 모두에 커스텀 태그(React Components 등)가 있는 Emet
다음 설정을 추가합니다.
"emmet.triggerExpansionOnTab": true,
이 설정을 사용하면 Emet은 모든 단어를 커스텀태그(React 컴포넌트 이름뿐 아니라)로 전개합니다.
또한 Emet을 사용하여 React 컴포넌트를 커스텀태그로 전개할 때는 실제로 제안목록에서 컴포넌트 이름을 선택하고 먼저 해당 컴포넌트 이름을 완료해야 합니다(또는 전체 이름을 수동으로 입력하고 이스케이프 키를 사용하여 제안 메뉴를 닫아야 합니다).단어가 확장되면 다시 탭을 눌러 Emet이 커스텀태그를 펼치도록 해야 합니다.
이 추가 단계를 제거할 수 있는 활성 기능 요청이 있습니다(표준 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"
],
모든 답을 던져봤더니 이 설정이 통했어.syntax Profile 추가와 언어를 포함해야 합니다.트리거 확장 없이는 아무 것도 작동하지 않았지만 지금은 Tab 버튼만 누르면 결과가 나옵니다.
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true
아래의 순서로 간단하게 문제를 해결했습니다.
- VSCode 왼쪽 하단에서 Javascript를 클릭합니다.
- 그러면 상단에 목록이 표시되고 "'Javascript' 언어 기반 설정 구성"을 클릭합니다.
파일에 다음 행을 추가합니다.
"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" }
상세한 것에 대하여는, 이 링크를 체크해 주세요.
- vscoode의 설정으로 이동하기만 하면 됩니다.
- emet 타입의 설정에서는, 검색 바를 참조할 수 있습니다.
- 아래로 스크롤하면 언어 포함 옵션이 있습니다.
- include language의 add item 버튼을 클릭합니다.
- 아이템을 javascript로, 값을 javascriptreact로 추가합니다.
헷갈리면 아래 그림을 참조해 주세요.
Visual Studio Code에서 자동 닫기 확장을 사용할 수 있습니다. ps. 확장을 설치할 때 VS 코드를 새로고침하거나 VS 코드를 다시 열거나 자동 닫기 태그 확장으로 이동하여 새로고침을 클릭할 때까지 자동 완료가 작동하지 않습니다.
자동 닫기 태그 Extension 링크
확장자를 ".js"에서 ".jsx"로 변경하면 됩니다.다만, 확장자 「.js」를 계속 사용하고 싶은 경우는, 다음의 순서에 따릅니다.
에 가다
[파일] > [설정] > [설정]
설정 탭에 'user'와 'workspace'라는 이름의 두 개의 탭이 표시됩니다(검색 바의 맨 아래 참조).두 탭에 동일한 설정이 표시되지만 사용자 설정은 VS 코드의 모든 프로젝트에 영향을 주고 워크스페이스는 현재 프로젝트에만 영향을 줍니다.워크스페이스 또는 사용자 중 원하는 옵션을 선택합니다.
그리고 왼쪽 메뉴바에 가서
내선번호 > JSON
오른쪽에는 몇 가지 설정이 표시됩니다.조금 아래로 스크롤하면 이런 게 보일 거예요.
: Schemas
JSON을 사용하다
settings.jsonsettings.json으로 합니다.
setigns.json에서 편집을 클릭합니다.JSON 파일이 열립니다.JSON 파일에 다음 코드를 추가합니다.
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
그리고 파일을 저장합니다.이제 js 파일이 jsx 자동 완료를 지원하는지 확인합니다.이 테스트에서는
VS 코드 버전 1.61.2
추신: 다음 부분은 JSON에 대해 모르는 학습자에게만 적용됩니다.
위의 코드를 복사하여 다음 그림과 같이 settings.json 파일 하단에 붙여넣습니다.쉼표(빨간색 화살표로 가리킴)를 추가하는 것을 잊지 마십시오.코드는 마지막 닫힘 괄호(노란색 화살표로 가리킴) 앞에 붙여 넣어야 합니다.
워크스페이스 설정 탭을 선택하면 settings.json 파일에 아무것도 없을 수 있습니다.이 경우 코드를 괄호 안에 붙여 넣기만 하면 됩니다.
설정에서 emet 섹션에 value javascriptreact라는 아이템을 추가한 것이 나에게 효과가 있었습니다.
JSX에서 자동 닫힘 태그를 얻는데 두 단계가 걸렸습니다.
- Kehkashan Fazal의 설정에 관한 지시에 따릅니다.
"emmet.includeLanguages" - VSCode에서 자동 닫기 태그 확장 다운로드(
formulahendry.auto-close-tag)
JSX 태그를 자동으로 닫을 수 있게 되었습니다!
다음 두 단계만 수행하십시오.
- 검색 언어가 있는 VSCode에서 해당 항목을 클릭합니다.
- 'Javascript(Babel)' 언어 기반 설정을 클릭합니다." 또는 그 무엇도
- 이 코드를 먼저 쉼표 '로 구분하여 붙여넣은 후 저장합니다.
"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true
저는 여러 프로젝트를 하고 있었는데 큰 설정 파일이 있어요.
설정을 확인해보니 이 설정이 모든 것을 망치고 있더군요.
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"
그래서 댓글을 달았어요.리액트 앱에서는 모든 조작이 완벽하게 동작합니다.감사해요.
JSX 파일에서만 작동합니다.JS에서는 동작하지 않게 합니다.
"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascriptreact": "javascriptreact"
},
리액트 바벨의 오토컴플릿은 어제까지만 해도 잘 작동했어요.
이 답변들 중 어느 것도 도움이 되지 않아서 컴퓨터를 재부팅했습니다.마법처럼 작용했다;)
작업 중인 파일의 이름을 지정하기만 하면 됩니다..js로..jsx그리고 당신은 괜찮아요.
settings > extensions > emmet > include languages 순으로 이동하여 javascript를 항목으로 추가하고 javascriptreact를 값으로 추가합니다.
[ File ] > [ Preferences ]으로 이동합니다.-- > [ Settings ]에서 "emet"을 검색합니다.
Emet 아래에 설정을 추가합니다.언어 포함
아이템은 javascript로 값은 html로 합니다.
단, 이것은 html 태그에 대해서만 동작합니다.
언급URL : https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code
'programing' 카테고리의 다른 글
| redux-thunk와 redux-promise의 차이점은 무엇입니까? (0) | 2023.02.23 |
|---|---|
| Visual Studio 코드 포맷 변경(React-JSX) (0) | 2023.02.23 |
| 장치 테스트 시 종속 서비스 주입 AngularJS 서비스 (0) | 2023.02.23 |
| Go에서 JSON을 지도에 부분적으로 삽입 해제 (0) | 2023.02.23 |
| json_communications 함수: 특수 문자 (0) | 2023.02.23 |