Emmet: HTML둜 퍼질 λ•Œ μ†μ„±μ˜ μˆœμ„œλ₯Ό μ œμ–΄ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

에 λ§Œλ“  2015λ…„ 11μ›” 03일  Β·  18μ½”λ©˜νŠΈ  Β·  좜처: emmetio/emmet

class 속성을 항상 첫 번째 μ†μ„±μœΌλ‘œ κ°–κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

이 문제λ₯Ό λ’·λ°›μΉ¨ν•˜κ³  μ‹ΆμœΌμ‹ κ°€μš”? ν˜„μƒκΈˆμ„ κ²Œμ‹œν•˜μ‹­μ‹œμ˜€! μš°λ¦¬λŠ” Bountysource λ₯Ό 톡해 ν˜„μƒκΈˆμ„

Enhancement

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

μ§ˆλ¬Έμ€ μ˜€λŠ˜λ‚ κ³Ό 관련이 μžˆμŠ΅λ‹ˆλ‹€.
@sergeche 이 μž‘μ—…μ΄ TODO λͺ©λ‘μ—

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

일반적으둜 λ‹€λ₯Έ 속성이 μžˆλŠ” μŠ€λ‹ˆνŽ«μ΄ 약어에 λŒ€ν•΄ μ§€μ •λ˜μ§€ μ•ŠλŠ” ν•œ λͺ¨λ“  속성은 약어에 λ‚˜νƒ€λ‚˜λŠ” μˆœμ„œλŒ€λ‘œ ν‘œμ‹œλ©λ‹ˆλ‹€. μ—¬κΈ°μ—μ„œ μŠ€λ‹ˆνŽ« 자체λ₯Ό λ³€κ²½ν•˜κ³  빈 속성 class μ˜¬λ°”λ₯Έ μœ„μΉ˜μ— μΆ”κ°€ν•˜κΈ°

@sergeche
label.clasname β†’ <label for="" class="clasname"></label>
a.classname β†’ <a href="" class="classname"></a>
a[class=classname href="goo"] β†’ <a href="goo" class="classname"></a>

일반적으둜 λͺ¨λ“  속성은 약어에 λ‚˜νƒ€λ‚˜λŠ” μˆœμ„œλŒ€λ‘œ ν‘œμ‹œλ©λ‹ˆλ‹€.

μ•„λ‹ˆμš” )

ν•˜μ§€λ§Œ λ‹€μŒκ³Ό 같은 μŠ€λ‹ˆνŽ«μ„ λ§Œλ“œλŠ” 방법은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€. a.classname β†’ <a class="classname" href=""></a> ?

a μŠ€λ‹ˆνŽ«μ„ μœ„ν•΄: https://github.com/emmetio/emmet/blob/master/lib/snippets.json#L691

μ†”λ£¨μ…˜: 이 μŠ€λ‹ˆνŽ«μ„ μ‚­μ œν•˜κ±°λ‚˜(빈 κ°’μœΌλ‘œ μž¬μ •μ˜: "a": null ), "a": "<a class=\"\" href=\"\"> μˆ˜μ •ν•˜λ©΄ class 속성이 항상 ν‘œμ‹œλ©λ‹ˆλ‹€. . λ˜λŠ” <a> μš”μ†Œμ— 속성이 ν¬ν•¨λ˜μ§€ μ•Šμ€ μƒˆ μŠ€λ‹ˆνŽ«μ„ λ§Œλ“­λ‹ˆλ‹€.

흠...
"a": null, - http://take.ms/BHuO6
아무것도 λ³€κ²½λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€: a.classname β†’ <a href="|" class="classname"></a>

"a": "<a class=\"\" href=\"\">" - http://take.ms/98CIZ
μ‚¬μš©ν•  수 μ—†μŒ: a.classname β†’ <a class="" href="">|

"a": "<a>", 썼닀
λ…Έλ…Έλ…Έλ…Έ, λ°μ΄λΉ„λ“œ λΈ”λ ˆμΈ, NO: a.classname β†’ <a>

λ‚΄ μ§ˆλ¬Έμ— λŒ€ν•œ λŒ€λ‹΅μ΄ "μ•ˆ 돼"λΌλŠ” 것을 μ˜¬λ°”λ₯΄κ²Œ μ΄ν•΄ν•˜κ³  μžˆμŠ΅λ‹ˆκΉŒ? μ•„λ‹ˆλ©΄ λ‚΄κ°€ λ­”κ°€ 잘λͺ»ν•˜κ³  μžˆμŠ΅λ‹ˆκΉŒ? )

κ·Έλ ‡κ²Œ ν•˜λŠ” 것이 νŽΈλ¦¬ν•©λ‹ˆλ‹€. - μ•„λ‹ˆμš”, 속성에 λŒ€ν•œ μ •λ ¬ μš°μ„  μˆœμœ„λ₯Ό μ„€μ •ν•  수 μžˆλ„λ‘ 컀널을 λ³€κ²½ν•΄μ•Ό ν•©λ‹ˆλ‹€.

μ–΄λ–€ νŒŒμΌμ—μ„œ 무언가λ₯Ό νŒŒν—€μΉ κΉŒμš”? :)

λ˜λŠ” https://github.com/emmetio/emmet/blob/master/lib/filter/html.js#L21
μ›μΉ™μ μœΌλ‘œ μ˜¬λ°”λ₯Έ 좜λ ₯을 μƒμ„±ν•˜λŠ” 자체 ν•„ν„°λ₯Ό μž‘μ„±ν•˜κ³  컀널을 κ±΄λ“œλ¦¬μ§€ μ•Šλ„λ‘ ν™•μž₯으둜 μ—°κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν•„ν„°κ°€ μžˆλŠ” μ˜΅μ…˜μ΄ 훨씬 μ’‹μŠ΅λ‹ˆλ‹€(μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ ν•΅μ‹¬μœΌλ‘œ λ“€μ–΄κ°€λŠ” 것을 μ‹«μ–΄ν•©λ‹ˆλ‹€). API에 λŒ€ν•œ μ •λ³΄λŠ” μ–΄λ””μ—μ„œ 읽을 수 μžˆμŠ΅λ‹ˆκΉŒ? μ•„λ‹ˆλ©΄ λͺ‡ 가지 예λ₯Ό λ“€μ–΄λ³ΌκΉŒμš”?

μ§ˆλ¬Έμ€ μ˜€λŠ˜λ‚ κ³Ό 관련이 μžˆμŠ΅λ‹ˆλ‹€.
@sergeche 이 μž‘μ—…μ΄ TODO λͺ©λ‘μ—

ν•„ν„°λ₯Ό μž‘μ„±ν•˜κ³  ν’€ μš”μ²­μ„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 필터에 λŒ€ν•œ λ¬Έμ„œλŠ” μ—†μ§€λ§Œ 이것은 트리 ν˜•νƒœμ˜ ꡬ문 λΆ„μ„λœ μ•½μ–΄λ₯Ό β€‹β€‹μž…λ ₯으둜 받아듀이고 이λ₯Ό λ³€κ²½ν•  수 μžˆλŠ” 일반적인 κΈ°λŠ₯μž…λ‹ˆλ‹€(예: μŠ€μ™‘ 속성)

a (http://s020.radikal.ru/i717/1703/c0/8127577c2b25.png)에 λŒ€ν•œ μž¬μ •μ˜λœ μŠ€λ‹ˆνŽ«, ν•„ν„° 없이 μ •μƒμ μœΌλ‘œ μž‘λ™ν•©λ‹ˆλ‹€: a.xxx -> <a class="xxx" href=""></a>
κ·ΈλŸ¬λ‚˜ bem ν•„ν„°λ₯Ό μ‚¬μš©ν•  λ•Œ κ²°κ³Όκ°€ μ˜¬λ°”λ₯΄μ§€ μ•Šκ³  클래슀 이름이 μ€‘λ³΅λ©λ‹ˆλ‹€.
a.xxx|bem -> <a class="xxx xxx" href=""></a>
div.yyy>a.-xxx|bem -> <a class="yyy__xxx -xxx" href=""></a>
μ–΄λ–»κ²Œ λ“  이것을 ν”Όν•  수 μžˆμŠ΅λ‹ˆκΉŒ? @sergeche

@DDyst 이 κΈ°λŠ₯은 Atom의 μ•ŒνŒŒ 버전에 μžˆλŠ” μƒˆ 컀널에 μžˆμŠ΅λ‹ˆλ‹€.

μ‹œμ²­/μ‹œλ„ν•˜λŠ” 방법? )

μ„Έλ₯΄κ²Œμ΄, 이 κΈ°νšŒμ— μ–΄λ–€ νŒŒμΌμ„ μ°Ύμ•„μ•Ό ν•˜λŠ”μ§€ 힌트λ₯Ό μ£Όμ„Έμš” - 파일 ꡬ쑰가 많이 λ³€κ²½λ˜μ–΄ μžˆλŠ” 것을 보고 μžˆμŠ΅λ‹ˆλ‹€ O_o ... μ§€κΈˆκΉŒμ§€ μ»€λ„μ—μ„œ 직접 μ‚¬μš©μž μ •μ˜ν•˜λŠ” 것이 μ˜¬λ°”λ₯΄κ²Œλ§Œ κ°€λŠ₯ν•©λ‹ˆκΉŒ?
예, 그리고 | bem - 이제 μ–΄λ–»κ²Œ?
μ‰Ώ .. 그리고 에밋이 더 이상 이보닀 쒋을 μˆ˜λŠ” μ—†λ‹€κ³  μƒκ°ν–ˆλŠ”λ°, 이게 μ˜¨λ‹€!!))

  1. Emmet의 μ‚¬μš©μž μ„€μ •μœΌλ‘œ μ΄λ™ν•©λ‹ˆλ‹€.
    ν™˜κ²½ μ„€μ • -> νŒ¨ν‚€μ§€ μ„€μ • -> Emmet -> μ„€μ • μ‚¬μš©μž
  2. λ‹€μŒ μŠ€λ‹ˆνŽ«μ„ μ‚½μž…ν•©λ‹ˆλ‹€.
{
  "snippets": {
    "html": {
      "abbreviations": {
        "a": "<a class='' href=''>"
        }
      }
    }
}

κΈ€μŽ„, μš°λ¦¬λŠ” 항상 μˆ˜μ—…κ³Όμ˜ λͺ¨λ“  링크λ₯Ό μ–»μŠ΅λ‹ˆλ‹€. :)

μŠ€λ‹ˆνŽ«μ„ ν•΄κ²°ν•  λ•Œ 속성을 μ—­μˆœμœΌλ‘œ κ²°ν•©ν•˜λŠ” 초기 κ΅¬ν˜„μ„ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. λ¨Όμ € μ•½μ–΄λ‘œ μž‘μ„±λœ 속성, κ·Έ λ‹€μŒ μŠ€λ‹ˆνŽ«μ— μ„ μ–Έλœ 속성(μœ„μ˜ 컀밋 링크 μ°Έμ‘°). μ˜ˆμƒλ˜λŠ” λ™μž‘κ³Ό μœ μ‚¬ν•©λ‹ˆκΉŒ?

또 λ‹€λ₯Έ μ˜΅μ…˜μ€ μ½”λ“œ μ‘°κ°μ—μ„œ μ•”μ‹œμ  속성(μ‹œμž‘ 뢀뢄에 λŠλ‚Œν‘œ 포함)을 μ„ μ–Έν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. "foo": "my-tag[title !class]" μ•”μ‹œμ  μ†μ„±μ˜ λ³Έμ§ˆμ€ 값이 μžˆλŠ” κ²½μš°μ—λ§Œ ν‘œμ‹œλœλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 즉, μ•”μ‹œμ  속성을 μ‚¬μš©ν•˜λ©΄ μ•½μ–΄μ—μ„œ μ„ μ–Έλœ μˆœμ„œμ— 관계없이 속성이 ν‘œμ‹œλ˜μ–΄μ•Ό ν•˜λŠ” μˆœμ„œλ₯Ό 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

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

κ΄€λ ¨ 문제

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

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

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

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

sergeche picture sergeche  Β·  25μ½”λ©˜νŠΈ