Emmet: Sublime text 3, λΉŒλ“œ 3143μ—μ„œ JSX에 λŒ€ν•œ TAB ν‚€λ‘œ μžλ™ 완성이 μž‘λ™ν•˜μ§€ μ•ŠμŒ

에 λ§Œλ“  2018λ…„ 02μ›” 04일  Β·  2μ½”λ©˜νŠΈ  Β·  좜처: emmetio/emmet

μ•ˆλ…•ν•˜μ„Έμš”, μ €λŠ” 이것이 μž‘λ™ν•œλ‹€κ³  κ°€μ •ν•˜κ³  μž‘λ™ν•˜λŠ” λ‹€λ₯Έ λž©ν†±μ„ 가지고 μžˆμ§€λ§Œ μ—¬κΈ°μ—μ„œλŠ” μ΅œμ‹  Sublime ν…μŠ€νŠΈ 3으둜 μ—…λ°μ΄νŠΈν–ˆμœΌλ©° JSXμ—μ„œ μž‘λ™ν•˜λŠ” html νƒœκ·Έ μžλ™ μ™„μ„± κΈ°λŠ₯이 μ—†μŠ΅λ‹ˆλ‹€.

μ—¬κΈ° λ‚΄κ°€ μ‚¬μš©ν•˜λŠ” 것,

이유λ₯Ό μ•Œκ² μ–΄μš”? λ‹€λ₯Έ ν”ŒλŸ¬κ·ΈμΈμ— 잘 μ•Œλ €μ§„ λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆκΉŒ? 찾아보고 μ•Œμ•„ λ‚΄λ €κ³ ν–ˆμ§€λ§Œ 아무 것도 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

{
  "keys": ["tab"],
  "command": "expand_abbreviation_by_tab",

  // put comma-separated syntax selectors for which
  // you want to expandEmmet abbreviations into "operand" key
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "source.js, meta.class.js, meta.group.braces.curly.js, meta.group.braces.round.js, meta.jsx.js ",
      "operator": "equal",
      "match_all": true,
      "key": "selector"
    },

    // run only if there's no selected text
    {
      "match_all": true,
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal",
      "operand": false,
      "match_all": true,
      "key": "has_next_field"
    },

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible --
    // remove this section
    {
      "operand": false,
      "operator": "equal",
      "match_all": true,
      "key": "auto_complete_visible"
    },
    {
      "match_all": true,
      "key": "is_abbreviation"
    }
  ]
}

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ΄μœ λŠ” λͺ¨λ₯΄κ² μ§€λ§Œ μ•„λž˜μ—μ„œ μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€!

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

λͺ¨λ“  2 λŒ“κΈ€

μ΄μœ λŠ” λͺ¨λ₯΄κ² μ§€λ§Œ μ•„λž˜μ—μ„œ μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€!

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

λ™μΌν•œ λ¬Έμ œκ°€ μžˆμ—ˆμ§€λ§Œ μ½˜μ†”μ€ "μ΅œμƒμœ„ 값은 배열이어야 ν•©λ‹ˆλ‹€"와 같은 κ²½κ³ λ₯Ό λ³΄λƒˆμŠ΅λ‹ˆλ‹€.

{
  "keys": ["tab"],
  "command": "expand_abbreviation_by_tab",

  // put comma-separated syntax selectors for which
  // you want to expandEmmet abbreviations into "operand" key
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "source.js, meta.class.js, meta.group.braces.curly.js, meta.group.braces.round.js, meta.jsx.js ",
      "operator": "equal",
      "match_all": true,
      "key": "selector"
    },

    // run only if there's no selected text
    {
      "match_all": true,
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal",
      "operand": false,
      "match_all": true,
      "key": "has_next_field"
    },

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible --
    // remove this section
    {
      "operand": false,
      "operator": "equal",
      "match_all": true,
      "key": "auto_complete_visible"
    },
    {
      "match_all": true,
      "key": "is_abbreviation"
    }
  ]
}

μœ„μ˜ μ½”λ“œλŠ” 객체,
μ•„λž˜ μ½”λ“œλŠ” 객체의 λ°°μ—΄μž…λ‹ˆλ‹€

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

이것은 "μ΅œμƒμœ„ 값은 배열이어야 함" κ²½κ³ λ₯Ό μˆ˜μ •ν•˜λ―€λ‘œ μž‘λ™ν•©λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰

κ΄€λ ¨ 문제

DanielRuf picture DanielRuf  Β·  5μ½”λ©˜νŠΈ

planetoftheweb picture planetoftheweb  Β·  3μ½”λ©˜νŠΈ

fversepuy picture fversepuy  Β·  5μ½”λ©˜νŠΈ

MarvinXu picture MarvinXu  Β·  10μ½”λ©˜νŠΈ

deathmood picture deathmood  Β·  15μ½”λ©˜νŠΈ