jsx의 html 태그 자동 완성(하위 텍스트)

jsx의 html 태그 자동 완성(하위 텍스트)

리액트/jsx 코드의 html 태그에 autocomplete를 사용할 수 있도록 하고 싶습니다.html 파일에 대해서도 같은 방법으로 동작합니다.jsx 파일에 대해 태그 자동 완성을 사용하도록 하위 텍스트 3을 구성할 수 있습니까?

Sublime의 는 Sublime의하고 약간 에 더 할 수 ./Default.sublime-package을 사용하다

{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
  [
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
    { "key": "setting.auto_close_tags" }
  ]
}

바벨 패키지를 사용한다고 가정하면 셀렉터는meta.jsx.js는 JSX 구문에 일치하여 태그 닫기 동작을 활성화합니다.스코프명은 다른 패키지에 따라 다를 수 있습니다.이 경우 ScopeHunter를 사용하여 원하는 JSX 구문에 의해 적용되는 스코프를 검사할 수 있습니다.

설치: babel 및 Emet

그런 다음 키 바인딩에 추가합니다(사용자).

"Key Bindings - User"는 "Preferences]> [ Key Bindings ]에 있습니다.

{
    "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
        {
            "operand": "source.js", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
},
{ "keys": ["tab"], "command": "next_field", "context":
    [
        { "key": "has_next_field", "operator": "equal", "operand": true }
    ]
}

입력할 때 괄호가 자동으로 닫히는 것은 아니지만, Mac 또는 Windows용과 가까운 곳에 Sublime의 내장 태그를 사용할 수 있습니다.

나는 babel-sublime와 Emet의 조합을 강력히 제안한다.구문으로 "JavaScript(Babel)"를 지정하면 두 패키지가 함께 작동하며 필요에 따라 emet이 "className" 및 "htmlFor"를 적절하게 생성합니다.

유일한 단점은 확장기능이 TAB에서 동작하지 않고 CTRL+E에서 동작한다는 것입니다.이는 JavaScript에서 Tab이 다른 용도로 많이 사용되고 있기 때문입니다.

다니엘의 답변을 바탕으로 이것만을 위한 플러그인을 만들었습니다.

출처 : https://github.com/FMCorz/AutoCloseTags

설치하는 방법:

1. 를 위 저장소와 함께 합니다.Package Control: Add repository
2. 합니다.Package Control: Install package
3. 선택합니다.AutoCloseTags

다른 제안대로: Babel과 Emet을 설치합니다!

Emet 생략형 리스트 (여기 데모 참조) (및 치트시트 참조)
각 괄호 -> 에밋 -> 설정, 닫기 태그 등을 입력할 필요가 없습니다.

업데이트: 이제 Emet(v2+)은 JSX 및 HTML 요소를 시작할 때 탭 키로 작동합니다.<.
를 들어, 「」입니다.<divtab<div></div>한편, 「 」는, 「 」, 「 」의 사이에<MyComponenttab 로 will will will will will will will 。<MyComponent></MyComponent>

이 새로운 기능은 디폴트로 유효하게 되어 있습니다.false로 합니다.「 Emet 」 、 「 jsx _ prefix 」 、 「 false 」"jsx_prefix": false그러기 위해서는 [설정] -> [패키지 설정] -> [에밋]를 엽니다.

---

Emet 이전 버전:

약어를 확장하기 위해 사용합니다.

에멧 문서: 약어 설명에 탁월합니다.그러나 "확장 약자" 방법을 설명하지 못했습니다.-적어도 찾을 수 없었습니다.

서브라임에서 나는

• 열림:Preferences -> Package Settings -> Emmet -> Key Bindings - Default
• 검색한expand_abbreviation
• 찾았다ctrl+e

행복 - 마법처럼 작용 :-)

---

업데이트: AutoCloseTags는 권장하지 않습니다.
적어도 Sublime Text 4 설치에서는 더 이상 작동하지 않는 것 같습니다.

대신 바벨 플러스 에밋을 사용하세요.

또한 FMcorz와 Daniel Shannon이 제공하는 AutoCloseTags를 설치할 것을 권장합니다.

이 조합은

• (네스트 규칙으로 인해 태그가 제거됨) 자동 삭제(단순히 입력)</에밋은, 에밋은, 즉석에서 훌륭합니다.
• 누름으로써 완전한 개폐 태그(및 그 이상)까지 '완화'를 확대하다Crtl-E이것은 스켈레톤을 만드는 데 매우 적합합니다.

서브 라임용으로 babel이 설치되어 있는 경우 .js 및 .jsx 파일을 열고 view > synthics > open all with current로 이동합니다.올바른 구문 강조 표시를 표시하려면 babel > javascript (babel)를 사용합니다.또한 CTRL +E를 사용하여html 태그를 .jsx 내에서 자동 완성합니다.

언급URL : https://stackoverflow.com/questions/30027755/autocomplete-html-tags-in-jsx-sublime-text