Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ emmet: Sublime Text 3 — установка, русификация + установка emmet

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Плагин Emmet для быстрой Ρ€Π°Π±ΠΎΡ‚Ρ‹ с HTML

Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ AFFINAGE Π•Π²Π³Π΅Π½ΠΈΠΉ Π‘Π°ΠΌΠΎΠΉΠ»ΠΎΠ² рассказываСт, ΠΊΠ°ΠΊ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя написания Ρ€ΡƒΡ‚ΠΈΠ½Π½ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π·Π° счСт прСобразования простых Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€ Π² ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ ΠΊΠΎΠ΄Π°.

Π•Π²Π³Π΅Π½ΠΈΠΉ Π‘Π°ΠΌΠΎΠΉΠ»ΠΎΠ²

Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ AFFINAGE

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Emmet

Emmet β€” Ρ€Π°Π½Π΅Π΅ извСстный ΠΊΠ°ΠΊ Zen Coding β€” Π½Π°Π±ΠΎΡ€ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ написаниС ΠΊΠΎΠ΄Π° HTML ΠΈ CSS. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π°Ρ‡Π°Π» Π’Π°Π΄ΠΈΠΌ МакССв Π² 2008 Π³ΠΎΠ΄Ρƒ, Π° с 2009 Π³ΠΎΠ΄Π° ΠΈ ΠΏΠΎ настоящСС врСмя Π΅Π³ΠΎ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π‘Π΅Ρ€Π³Π΅ΠΉ Π§ΠΈΠΊΡƒΡ‘Π½ΠΎΠΊ ΠΈ сообщСство ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Zen Coding.

ΠŸΠΈΡΠ°Ρ‚ΡŒ HTML-ΠΊΠΎΠ΄ ΠΈ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ мноТСство Ρ‚Π΅Π³ΠΎΠ², ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ ΠΈ скобок β€” Π΄ΠΎΠ»Π³ΠΎ ΠΈ ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ. Π‘ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Emmet эта Ρ€Π°Π±ΠΎΡ‚Π° становится Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ β€” ΠΎΠ½ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ простыС Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π² ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ ΠΊΠΎΠ΄Π°. Π’ΠΎ Π΅ΡΡ‚ΡŒ, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ€ΡƒΠΊΠ°ΠΌΠΈ HTML- ΠΈ CSS-ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, прописываСтС сокращСнныС Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ TAB ΠΈ ΠΊΠΎΠ΄ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ разворачиваСтся.

Π Π°Π±ΠΎΡ‚Π° Emmet ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π°Π²Ρ‚ΠΎΠ·Π°ΠΌΠ΅Π½Ρ‹ β€” Ρ‚ΠΎΠ³ΠΎ самого Π’9 Π² смартфонС β€” Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ, Π·Π° счСт использования ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ синтаксиса для сокращСний. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ сокращСниС, псСвдоним ΠΈΠ»ΠΈ нСсколько ΠΏΠ΅Ρ€Π²Ρ‹Ρ… символов названия Ρ‚Π΅Π³Π° ΠΈΠ»ΠΈ свойства, Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ TAB ΠΈ Emmet ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ дописываСт ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅.

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ основныС Ρ„ΠΈΡˆΠΊΠΈ ΠΈ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ этого ΠΏΠ»Π°Π³ΠΈΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΏΡ€ΠΈ написании ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΈΡˆΡƒΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ Emmet.

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Emmet

ΠΠ°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Π»Π΅Π³ΠΊΠΎ β€” скачайтС Π΅Π³ΠΎ с ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ сайта Emmet, установитС Π² свой Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π°, ΠΈ ΠΏΡƒΡΡ‚ΡŒ начнётся магия. Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… это Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΅ΡΡ‚ΡŒ Π² ΠΊΠΎΡ€ΠΎΠ±ΠΎΡ‡Π½ΠΎΠΉ вСрсии β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄ Ρƒ нас Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ VS Code, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Emmet ΡƒΠΆΠ΅ встроСн ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Если Π²Ρ‹ ΠΏΠΈΡˆΠ΅Ρ‚Π΅ ΠΊΠΎΠ΄, Ρ‚ΠΎ ΡƒΠΆΠ΅ навСрняка пользовались Emmet β€” хотя ΠΌΠΎΠ³Π»ΠΈ ΠΈ Π½Π΅ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ нашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ постоянно ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ этим ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Π² Ρ€Π°Π±ΠΎΡ‚Π΅, Π½ΠΎ ΠΏΠΎΠΊΠ° Π³ΠΎΡ‚ΠΎΠ²ΠΈΠ»ΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» для ΡΡ‚Π°Ρ‚ΡŒΠΈ, ΡƒΠ³Π»ΡƒΠ±ΠΈΠ»ΠΈΡΡŒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎ Emmet ΠΈ ΡƒΠ·Π½Π°Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ. На самом Π΄Π΅Π»Π΅, Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠ°Π»ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π΅Π³ΠΎ возмоТностСй β€” Π² основном Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ постоянно трСбуСтся ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ. Π•ΡΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Ρ„ΠΈΡˆΠ΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΏΠΎΠ΄ Ρ€Π°Π·Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ, Π½ΠΎ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΈΡ… Ρ€Π΅Π΄ΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ «скСлСт» HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² Π΄Π²Π° ΠΊΠ»ΠΈΠΊΠ°

НачнСм Π·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ вас с возмоТностями Emmet β€” для Π·Π°Ρ‚Ρ€Π°Π²ΠΎΡ‡ΠΊΠΈ создадим «скСлСт» HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ΠΎΠΎΠ±Ρ‰Π΅, это достаточно большой кусок ΠΊΠΎΠ΄Π°, Π½ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π°, достаточно ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°ΠΊ Β«!Β», Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ TAB ΠΈ ΠΎΠ½ развСрнСтся Π² ΠΊΠΎΠ΄ для стартовой страницы. На скринС Π²ΠΈΠ΄Π½ΠΎ подсвСчСнныС элСмСнты β€” это Π½Π°Π·Π²Π°Π½ΠΈΠ΅ языка, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ TAB ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π° свои.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

Набрали Π·Π½Π°ΠΊ Β«!Β» ΠΈ Π½Π°ΠΆΠ°Π»ΠΈ TAB β€” ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ «скСлСт» для стартовой страницы. ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‡Π΅Π½Π½Ρ‹Π΅ значСния ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ΄ Π·Π°Π΄Π°Ρ‡ΠΈ своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Бинтаксис сокращСний

Π’ этом ΠΈ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Emmet β€” пишСм простыС сокращСния, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB ΠΈ ΠΎΠ½ΠΈ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² слоТныС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°. ПокаТСм Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ‚Π΅Π³Π° div: Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ, пишСм div, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB ΠΈ разворачиваСтся Ρ‚Π΅Π³ <div><div>. АббрСвиатур ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Emmet, быстро Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ постоянно. А ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΊ ΠΏΠ»Π°Π³ΠΈΠ½Ρƒ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости.

Π—Π΄Π΅ΡΡŒ Π½Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° Ρ‚Π΅Π³ΠΎΠ² β€” ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ любоС слово ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Ρ‚Π΅Π³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΅ΠΌΡƒ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Если Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ test ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ TAB β€” получится Ρ‚Π΅Π³: <test><test>. Π’Π°ΠΊΠΈΡ… Ρ‚Π΅Π³ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ β€” всС зависит ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… Π·Π°Π΄Π°Ρ‡ ΠΈ Ρ„Π°Π½Ρ‚Π°Π·ΠΈΠΈ.

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° элСмСнтов, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊΒ div для создания HTML-Ρ‚Π΅Π³ΠΎΠ².

<div></div>

Π£ Emmet Π½Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° ΠΈΠΌΠ΅Π½ Ρ‚Π΅Π³ΠΎΠ², ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ любоС слово ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Ρ‚Π΅Π³, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β test:

<test></test>

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ сокращСния Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² слоТныС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°. Π›ΡŽΠ±ΠΎΠ΅ слово ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π΅Π³.

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ влоТСнности

Π—Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π΄Π΅Ρ€Π΅Π²Π° β€” Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π»ΠΈ ΠΎΠ½ΠΈ Π±Ρ‹Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈΠ»ΠΈ рядом с элСмСнтом контСкста β€” ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ влоТСнности. Π˜Ρ… Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅: Β«Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты», «сосСдниС элСмСнты», Β«Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°Β» ΠΈ Β«ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅Β».

Π”ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты

Для влоТСния элСмСнтов Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ Β«>Β» β€” Π·Π½Π°ΠΊ «большС». Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, возьмСм Ρ‚Π°ΠΊΠΎΠ΅ сокращСниС: div>ul>li, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ β€” div, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π»ΠΎΠΆΠ΅Π½ список ul ΠΈ элСмСнты списка li. НаТимаСм TAB ΠΈ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ большой кусок ΠΊΠΎΠ΄Π°.Β 

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Β > для влоТСния элСмСнтов Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°:

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ Β«>Β» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для обозначСния влоТСнности элСмСнтов Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°. ПишСм Π² нСсколько Ρ€Π°Π· мСньшС тСкста ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ кусок ΠΊΠΎΠ΄Π°.

БосСдниС элСмСнты

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ находятся Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ сосСдними ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ Β«+Β» β€” Π·Π½Π°ΠΊ «плюс». Допустим, трСбуСтся Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΎΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ страницы, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ:

  • header β€” «шапка» сайта;
  • main β€” основной ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚;
  • sidebar β€” боковая панСль сайта;
  • footer β€” Β«ΠΏΠΎΠ΄Π²Π°Π»Β» сайта.

ПишСм: header+main+sidebar+footer, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Π΅Π³ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

Для размСщСния элСмСнтов рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€+:

header+main+aside+footer

<header></header>
<main></main>
<aside></aside>
<footer></footer>

Для обозначСния сосСдних элСмСнтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ Β«+Β». Emmet Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ нСбольшой тСкст Π² нСсколько Ρ‚Π΅Π³ΠΎΠ² Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… скобок Β«()Β» ΠΌΠΎΠΆΠ΅ΠΌ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты с Ρ€Π°Π·Π½Ρ‹ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ влоТСнности. Β» ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡŽΡ‚ p Π½Π° ΠΎΠ΄ΠΈΠ½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ с div.

По ΠΏΡ€Π°Π²Π΄Π΅ говоря, ΠΌΡ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΊΠΎΠ΄ΠΎΠΌ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Β«Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°Β» ΠΈ Β«ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ Π²Π²Π΅Ρ€Ρ…Β» ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ для сСбя Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΈΡ… примСнСния β€” ΠΎΠ½ΠΈ слишком слоТныС Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ использовании. Π‘ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ быстрСС ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ нСсколько Ρ€Π°Π· ΠΏΠΎΠ½Π΅ΠΌΠ½ΠΎΠ³Ρƒ β€” ввСсти Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚Π΅Π³Π°, Π½Π°ΠΆΠ°Ρ‚ΡŒ TAB β€” ΠΈ ΠΎΠ½ развСрнётся, Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ этого куска ΠΊΠΎΠ΄Π° Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Ρ‰Π΅ сколько Π½ΡƒΠΆΠ½ΠΎ Ρ‚Π΅Π³ΠΎΠ². Но Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π½Π°ΠΉΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ этим ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°ΠΌ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅

Π‘ΠΎΠ»Π΅Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ β€” Β«ΡƒΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅Β», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обозначаСтся Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΎΠΉ Β«*Β». Он ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‚ΡŒ, сколько Ρ€Π°Π· Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ элСмСнт. НапримСр, Ссли Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ список ul ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Π½Π΅ΠΌ нСсколько элСмСнтов li β€” прописываСм ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ Β«ΡƒΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅Β», ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ сколько ΡˆΡ‚ΡƒΠΊ Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΠΈ Emmet автоматичСски прописываСт Π½Π°ΠΌ этот ΠΊΠΎΠ΄. Π‘ΡƒΠ΄Π΅Ρ‚ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ элСмСнтов li, сколько ΡƒΠΊΠ°Π·Π°Π»ΠΈ.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°Β *Β ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ, сколько Ρ€Π°Π· Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ элСмСнт:

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ Β«*Β» Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΊΠΎΠ΄ ΠΈ прописываСт Ρ‚Ρ€ΠΈ элСмСнта li.

ΠšΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

МоТно ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΈ сосСдниС элСмСнты. Допустим, Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ страницы ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ wrapper, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана. Π’ΠΎΠ³Π΄Π° добавляСм div ΠΈ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ Π² Π½Π΅Π³ΠΎ элСмСнты ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°: div>header+main+sidebar+footer. Π–ΠΌΠ΅ΠΌ TAB ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°ΠΌΠΈ.

div>header+main+aside+footer

<div>
    <header></header>
    <main></main>
    <aside></aside>
    <footer></footer>
</div>

Emmet ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΈ сосСдниС элСмСнты.

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²

Быстро Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ сгСнСрированному элСмСнту Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹:

  • ID ΠΈ Class;
  • настраиваСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ β€” [attr];
  • нумСрация ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ β€” $.

ID ΠΈ Class

Π’ Emmet синтаксис для описания элСмСнтов ΠΏΠΎΡ…ΠΎΠΆ Π½Π° CSS-сСлСкторы, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… обращаСмся ΠΊ элСмСнту ΠΏΠΎ id ΠΈΠ»ΠΈ классу. Π—Π΄Π΅ΡΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ: пишСм Ρ‚Π΅Π³, Ρƒ Π½Π΅Π³ΠΎ пишСм class β€” Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡ΠΊΡƒ, ΠΈΠ»ΠΈ id β€” Ρ‡Π΅Ρ€Π΅Π· Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΡƒ, ΠΈ наш Ρ‚Π΅Π³ развСрнСтся с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ классом.

Бинтаксис Emmet для описания элСмСнтов ΠΏΠΎΡ…ΠΎΠΆ Π½Π° CSS-сСлСкторы

Π’ CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ обозначСния elem#idΒ ΠΈΒ elem.class, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π΄ΠΎ элСмСнтов с ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈΒ idΒ ΠΈΠ»ΠΈΒ class. Π’ Emmet Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ синтаксис для добавлСния этих Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΊ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ элСмСнту

div.wrapper

<div></div>

ПишСм Ρ‚Π΅Π³ div, Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡ΠΊΡƒ прописываСм class wrapper, ΠΈ Emmet Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π΅Π³ с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ классом.

МоТно ΠΏΠΈΡΠ°Ρ‚ΡŒ нСсколько классов подряд Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство классов. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ id ΠΈ class.

МоТно ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

div#id-wrap.wrapper

<div></div>

ПишСм ΠΈ id, ΠΈ class β€” Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ Ρ‚Π΅Π³ с ΠΎΠ±ΠΎΠΈΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ.

ΠŸΠ΅Ρ€Π΅Π΄ class ΠΈ id Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³. Если напишСм ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π±Π΅Π· Ρ‚Π΅Π³Π° β€” ΠΎΠ½ ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Ρ‚Π΅Π³ div.

НС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ тэг

#id-wrap.wrapper

<div></div>

ПишСм id ΠΈ class Π±Π΅Π· Ρ‚Π΅Π³Π° β€” Emmet ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Ρ‚Π΅Π³ div.

Emmet β€” ΡƒΠΌΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚, Ссли Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ элСмСнт ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² строчный элСмСнт span. ΠŸΠΎΠ½Π°Ρ‡Π°Π»Ρƒ каТСтся, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Ρ‚Π΅Π³ div, Π½ΠΎ Emmet ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ контСкст ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Π΅Π³ΠΎ Π² span. Плагин ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Π°ΠΆΠ΅ большС β€” Ссли Π±Ρ‹ вмСсто span Π±Ρ‹Π», ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ul, Ρ‚ΠΎ Β«Ρ€Π΅Π±Π΅Π½ΠΎΠΊΒ» Π±Ρ‹Π» Π±Ρ‹ li.

span>#id-wrap.wrapper

<span>    <span></span></span>

Emmet ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ контСкст ΠΈ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ кусок ΠΊΠΎΠ΄Π° с Ρ‚Π΅Π³ΠΎΠΌ span.

НастраиваСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

Если Ρ…ΠΎΡ‚ΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ настраиваСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΊ элСмСнту, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ [attr] β€” ΠΊΠ°ΠΊ Π² CSS. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ disabled β€” Β«Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Π°Β» β€” пишСм Π² ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… скобках эти Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ Emmet Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄.

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΒ [attr]Β Π½ΠΎΡ‚Π°Ρ†ΠΈΡŽ (ΠΊΠ°ΠΊ Π² CSS) для добавлСния настраиваСмых Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΊ элСмСнту:

button[type="button" disabled]

<button type="button" disabled></button>

ПишСм Π² ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… скобках Π½ΡƒΠΆΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΡ… Π² ΠΊΠΎΠ΄.

НумСрация ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎ ΡƒΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π»ΠΈ, ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π½Π°ΠΊΠ° Β«*Β» Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ нСсколько элСмСнтов. Π’Π΅ΠΏΠ΅Ρ€ΡŒ посмотрим, ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ класс ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ†ΠΈΡ„Ρ€ΠΎΠΉ β€” ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΎ Ρ‚Ρ€Π΅Ρ…. Для этого пишСм Π·Π½Π°ΠΊ Π΄ΠΎΠ»Π»Π°Ρ€Π° Β«$Β» ΠΈ ΡƒΠΌΠ½ΠΎΠΆΠ°Π΅ΠΌ Π½Π° Ρ‚Ρ€ΠΈ. Π’Π°ΠΊ, ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ классу добавилась Ρ†ΠΈΡ„Ρ€Π°.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π° умнТСния *Β ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ элСмСнты,

ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Β $Β ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…

ul>li.item$*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ПишСм Π·Π½Π°ΠΊ Β«$Β» ΠΈ ΡƒΠΌΠ½ΠΎΠΆΠ°Π΅ΠΌ Β«*Β» Π½Π° Ρ‚Ρ€ΠΈ β€” ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ классу добавляСм Ρ†ΠΈΡ„Ρ€Π° ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΎ Ρ‚Ρ€Π΅Ρ….

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ списка Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ сторону, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ собаки β€” Β«@Β» с минусом Β«-Β».

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°Β @Β ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π½Π°Ρ‡Π°Π»Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ.

ul>li.item$@-*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ΠœΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Β«@Β» с минусом Β«-Β» ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ сторону β€” ΠΎΡ‚ Ρ‚Ρ€Π΅Ρ… Π΄ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ.

Π’Π°ΠΊΠΆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π° собаки Β«@Β» ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ нумСрация Π½Π°Ρ‡ΠΈΠ½Π°Π»Π°ΡΡŒ Π½Π΅ с Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹, Π° с ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†ΠΈΡ„Ρ€Ρ‹. Π’ΠΎΠ³Π΄Π° пишСм Β«$Β», Β«@Β» ΠΈ Ρ†ΠΈΡ„Ρ€Ρƒ, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β«Ρ‚Ρ€ΠΎΠΉΠΊΡƒΒ». Π’Π°ΠΊ, нумСрация Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ: 3-4-5 ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. ΠŸΠΎΡΡ‚Π°Π²ΠΈΠΌ ΠΏΠ΅Ρ€Π΅Π΄ Β«Ρ‚Ρ€ΠΎΠΉΠΊΠΎΠΉΒ» минус ΠΈ нумСрация ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ с Ρ‚ΠΎΠΉ Ρ†ΠΈΡ„Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ: 3-2-1.

ДобавляСм тСкст

Π€ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки Β«{}Β» ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΊΠΎΠ΄ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ тСкст. Для этого пишСм Ρ‚Π΅Π³, добавляСм Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ скобок прописываСм свой тСкст. НаТимаСм TAB ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Β«ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚Β» Π² ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π΄ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹ΠΌΠΈ скобками Ρ‚Π΅Π³.

Для добавлСния тСкста ΠΊ элСмСнту ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΒ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки {}

p{Π—Π΄Π΅ΡΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ тСкст}

<p>Π—Π΄Π΅ΡΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ тСкст</p>

ВСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобок Emmet Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π² тСкст, Β«ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉΒ» Π² ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π΄ скобками Ρ‚Π΅Π³.

Β«Π Ρ‹Π±Π°Β» тСкста β€” Lorem Ipsum

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ часто Π±Ρ‹Π²Π°Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ вСрстку Π½Π° ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π½Π΄ΠΎΠΌΠ½Ρ‹ΠΉ тСкст для ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π·Π°Π΄Π°Ρ‡. Часто для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСрвисы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ тСксты. Но Emmet ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Β«Ρ€Ρ‹Π±ΡƒΒ» тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π²ΠΎΠ΄Π° простой Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹: lorem. Π’ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ с грСчСского, Lorem Ipsum ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ «всС Π±ΡƒΠΊΠ²Ρ‹Β».

Когда Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ элСмСнт ΠΊΠΎΠ΄Π° тСкстом β€” пишСм сокращСниС lorem, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB ΠΈ Emmet Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ Π² тСкст ΠΈΠ· 30 слов.

ВСкст для наполнСния (Ρ€Ρ‹Π±Π°)Β lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ducimus expedita quia quo ratione sapiente sed. Ad aut consequatur dolorum ea eius esse ex laborum molestiae quaerat, reiciendis repudiandae vitae.

ПишСм lorem, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ тСкст ΠΈΠ· 30 слов.

Если трСбуСтся ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ‹ β€” послС слова lorem пишСм Ρ†ΠΈΡ„Ρ€Ρƒ, которая ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство слов. АббрСвиатура развСрнСтся Π² тСкст Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ тСкст ΠΈΠ· дСсяти слов β€” пишСм lorem10.

lorem10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, modi?

ДобавляСм послС Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ lorem Ρ†ΠΈΡ„Ρ€Ρƒ Β«10Β» ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ тСкст ΠΈΠ· дСсяти слов.

БокращСния

Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΏΡ€ΠΎ синтаксис сокращСний ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Π² Emmet Π½Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° ΠΈΠΌΠ΅Π½ Ρ‚Π΅Π³ΠΎΠ² β€” ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡ‚ΡŒ любой тСкст ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Π΅Π³ΠΎ Π² Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³, Π° Π² дальнСйшСм Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот тСкст Π² качСствС Ρ‚Π΅Π³Π°.

Π£ Emmet Π½Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° ΠΈΠΌΠ΅Π½ Ρ‚Π΅Π³ΠΎΠ², ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ любоС слово ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Ρ‚Π΅Π³, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β test:

<test></test>

Π›ΡŽΠ±ΠΎΠΉ тСкст Emmet ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π΅Π³.

ΠŸΡ€Π°Π²Π΄Π°, нСсколько элСмСнтов, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡƒΠΆΠ΅ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Если напишСм img ΠΈ Π½Π°ΠΆΠΌΡ‘ΠΌ TAB β€” ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ кусок ΠΊΠΎΠ΄Π° с ΡƒΠΆΠ΅ встроСнными элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ свои Π·Π°Π΄Π°Ρ‡ΠΈ.Β 

img

<img src="" alt="">

АббрСвиатуру img Emmet Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π² ΠΊΠΎΠ΄ со встроСнными элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ.

ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹

Названия Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅. Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… написаниС ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ псСвдонимы Π½Π°Π·Π²Π°Π½ΠΈΠΉ Ρ‚Π΅Π³ΠΎΠ². НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ слово blockquote, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ псСвдоним bq, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ разворачиваСтся Π² ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³.Β 

ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹ Π½Π°Π·Π²Π°Π½ΠΈΠΉ Ρ‚Π΅Π³ΠΎΠ²

bq

<blockquote></blockquote>

ΠŸΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ‹ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° написаниС Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… ΠΈΠΌΠ΅Π½ Ρ‚Π΅Π³ΠΎΠ². Β 

ПишСм свои псСвдонимы ΠΈ сокращСния

Π’Π°ΠΊΠΈΠ΅ сокращСния ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Допустим, ΠΌΡ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ слово section ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, Π° Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π±Ρ‹Π»ΠΎ сокращСниС Π²ΠΈΠ΄Π° sc. Но Π² Emmet ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ этого Π½Π΅ прописано, поэтому Ссли Π±Π΅Π· настроСк просто напишСм sc ΠΈ Π½Π°ΠΆΠΌΠ΅ΠΌ TAB β€” развСрнСтся ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΌ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚.Β 

scΒ >Β section

<sc></sc>

Если Π±Π΅Π· ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… настроСк Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ сокращСниС β€” ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ совсСм Π½Π΅ Ρ‚ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ сокращСниС Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² VC Code ΠΈ WebStorm.

Настройки для VS Code
  1. Π’ любом мСстС Ρƒ сСбя Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ создайтС Ρ„Π°ΠΉΠ» snippets.json;
  2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² настройки VS Code: File > Preferences > Settings β€” ΠΈΠ»ΠΈ просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Ctrl+,Β»;
  3. Π’ поискС Π²Π±Π΅ΠΉΡ‚Π΅ тСкст Β«Emmet Extensions PathΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π»Π°ΡΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠ° Settings;
  4. Π’ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΊΠ°ΠΊ Π½Π° рисункС Π½ΠΈΠΆΠ΅ Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² Settings Item ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ snippets. json, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создали Ρ€Π°Π½Π΅Π΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ OK;

5. Β Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π² Ρ„Π°ΠΉΠ» snippets.json ΠΈ Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄: для HTML, ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ snippet. Π’ качСствС ΠΊΠ»ΡŽΡ‡Π° ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ сокращСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Emmet β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, sc. А Π² качСствС значСния β€” Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ β€”Β  Π² нашСм случаС это section.

{
    "html": {
        "snippets": {
            "sc": "section"
        }
    }
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² Ρ„Π°ΠΉΠ»Π΅ snippets.json, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ своС сокращСниС Π² VS Code для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Emmet.

Π Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ конструкции любой слоТности

Π’ Ρ‚Π°ΠΊΠΈΠ΅ сокращСния ΠΌΠΎΠΆΠ½ΠΎ Π²ΡˆΠΈΠ²Π°Ρ‚ΡŒ Π½Π΅ просто Ρ‚Π΅Π³ΠΈ, Π½ΠΎ ΠΈ конструкции любой слоТности HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ большой кусок ΠΊΠΎΠ΄Π° с большой Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ, Π΄Π°Ρ‚ΡŒ Π΅ΠΉ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π² JSON это всС ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ. И ΠΏΡ€ΠΈ Π²Π²ΠΎΠ΄Π΅ сокращСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ настроили, Emmet Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ большой кусок ΠΊΠΎΠ΄Π°, сгСнСрированного Π·Π°Ρ€Π°Π½Π΅Π΅. Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ часто ΠΏΠΈΡˆΠ΅Ρ‚Π΅, Π²Π°ΠΌ это Π½Π°Π΄ΠΎΠ΅Π΄Π°Π΅Ρ‚ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ слишком ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ β€” ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Emmet Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π²Ρ‹Π΄Π°Π²Π°Π» Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π²Π°ΠΌ большой кусок ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΈ Π²Π²ΠΎΠ΄Π΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ³ΠΎ сокращСния. Β 

Настройки для WebStorm

  1. Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π² настройки WebStorm: File > Settings (ΠΈΠ»ΠΈ просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+Alt+S) > Editor > Live Templates;
  2. Π’ ΠΎΠΊΠ½Π΅ настроСк Π·Π°Π΄Π°ΠΉΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ своСго сокращСния: Π² Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π² Template Text β€” Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΈ сохранитС измСнСния;

3. Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π² WebStorm Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚Π΅ сокращСниС ΠΈ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ TAB β€” развСрнСтся Ρ‚Π΅Π³ ΠΈΠ»ΠΈ кусок ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π»ΠΎΠΆΠΈΠ»ΠΈ Π² это сокращСниС.

sc

<section></section>

ПослС настроСк Π² WebStorm, Emmet Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ сокращСния Π² Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ ΠΈΠ»ΠΈ куски ΠΊΠΎΠ΄Π°.

Π Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с BEM

Emmet ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ BEM. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° возьмСм ΠΊΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ: .block>.block__el.block__elβ€”-mod. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ TAB разворачиваСтся Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ ΠΊΠΎΠ΄. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ, придСтся ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈ Π΄Π²Π° Ρ€Π°Π·Π° β€” Π½Π°Π·Π²Π°Π½ΠΈΠ΅ элСмСнта.

.block>.block__el.block__el--mod

<div>
    <div></div>
</div>

ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠ°Ρ конструкция: Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π»ΠΎΠΆΠ΅Π½ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ элСмСнт с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ.

ΠŸΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π΄ΠΎΠ»Π³ΠΎ, Π½ΠΎ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΎΠΏΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Emmet. Плагин ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ BEM, поэтому ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° элСмСнта ΠΈ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ сам элСмСнт, Π° ΠΏΠΈΡΠ°Ρ‚ΡŒ сразу Π΅Π³ΠΎ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€. ΠŸΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ становится Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС ΠΈ ΠΏΡ€ΠΎΡ‰Π΅.

На скринС Π½ΠΈΠΆΠ΅ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° написания: ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ β€” для WebStorm, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ β€” для VS Code. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ вносят Π² Emmet свои ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‚ Π΅Π³ΠΎ, поэтому Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎ-своСму.

.block>.__el--mod β€” Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ записи для WebStorm

.block>.-el_modΒ β€” Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ записи для VS Code

<div>
    <div></div>
</div>

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° BEM ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΊΠΎΠ΄ΠΎΠΌ Π΅Ρ‰Π΅ быстрСС.

НастраиваСм BEM Π² VS CodeΒ 
  1. Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π² настройки: File > Preferences > Settings β€” ΠΈΠ»ΠΈ просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Ctrl+,Β»;
  2. НайдитС Π² поискС syntaxProfiles;
  3. Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² настройки JSON. Π—Π΄Π΅ΡΡŒ хранятся Π²ΠΎΠΎΠ±Ρ‰Π΅ всС настройки VS Code;

4. Β Π’ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² настройках JSON ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄: ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² HTML ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌ BEM, ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ отобраТался элСмСнт ΠΈ ΠΊΠ°ΠΊ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ отобраТался ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€. НапримСр, Ссли ΠΏΠΎ BEM «ЯндСкса» ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ отобраТаСтся ΠΎΠ΄Π½ΠΈΠΌ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ, Π° ΠΌΡ‹ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠΌΡƒ Ρ‚ΠΈΡ€Π΅ β€” это ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΠΎ.

{
    "emmet.syntaxProfiles": {
        "html": {
          "filters": "bem"
        }
    },
    "emmet.preferences": {
        "bem.elementSeparator": "__",
        "bem.modifierSeparator": "--",
        "bem.element": "__" // not work issues
    }
}

НастраиваСм BEM Π² WebStorm

1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² настройки WebStorm: File > Settings (ΠΈΠ»ΠΈ просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+Alt+S) > Editor > Emmet > HTML;

2. Π’ ΠΎΠΊΠ½Π΅ настроСк ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ для элСмСнта ΠΈ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° ΠΈ сокращСниС для элСмСнта. НапримСр, ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ настройки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π²Π²ΠΎΠ΄Π΅ Π·Π½Π°ΠΊΠ° Ρ‚ΠΈΡ€Π΅ Β«-Β» срабатывала Π·Π°ΠΌΠ΅Π½Π° Π½Π° Π΄Π²Π° Π½ΠΈΠΆΠ½ΠΈΡ… подчСркивания Β«__Β».

Π Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π² CSS

Emmet поддСрТиваСтся Ρ‚Π°ΠΊΠΆΠ΅ Π² CSS, поэтому ΠΊΠΎΠ³Π΄Π° пишСм сокращСния Π² CSS ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB β€” ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ Π² кусок ΠΊΠΎΠ΄Π°. НапримСр, Ссли пишСм fz ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ TAB, Emmet Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Π΅Π³ΠΎ Π² front-size.Β 

Π“Π΄Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС сокращСния Emmet

ВсС сокращСния ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² Π¨ΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ΅ Π½Π° сайтС Emmet β€” ΠΈΡ… Ρ‚ΡƒΡ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ. АббрСвиатуры, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, быстро Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это постоянно Π½ΡƒΠΆΠ½ΠΎ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Β«Π½Π° Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚Π΅Β» ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ. А Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ β€” скорСС всСго Π²Π°ΠΌ ΠΈ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Ρ‚ΡŒ, вСдь ΠΏΡ€ΠΎΡ‰Π΅ Π½Π°Π±Ρ€Π°Ρ‚ΡŒ Ρ€ΡƒΠΊΠ°ΠΌΠΈ, Π±Π΅Π· использования Emmet.

На ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС ΠΏΠ»Π°Π³ΠΈΠ½Π° Emmet.io ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС сокращСния.

Π“Π΄Π΅ ΠΏΠΎΡ‚Ρ€Π΅Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet

ΠžΡΠ²ΠΎΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΏΡ€ΠΎΡ‰Π΅, Ссли сначала Π½Π°Π±ΠΈΡ‚ΡŒ Ρ€ΡƒΠΊΡƒ Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ‚Ρ€Π΅Π½Π°ΠΆΠ΅Ρ€Π΅. Π’Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ нСбольшиС задания Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ слоТности, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Emmet ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ½ΡƒΡ‚ΡŒ ΠΊ использованию сокращСний ΠΈ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Emmet, потрСбуСтся врСмя, Π½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного Π½Π΅Ρ‚ β€” Ρ‚Π°ΠΌ достаточно простыС ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹ΠΉ синтаксис. Π—Π°Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ это Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ написании ΠΊΠΎΠ΄Π° β€” ΠΏΠΎΡ‚Ρ€Π°Ρ‡Π΅Π½Π½ΠΎΠ΅ Π½Π° освоСниС ΠΏΠ»Π°Π³ΠΈΠ½Π° врСмя окупится стократ. Π‘Π±Π΅Ρ€Π΅ΠΆΠ΅Ρ‚Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ Π½Π΅Ρ€Π²ΠΎΠ², Π° вСрстка станСт Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ эффСктивнСС.

НС ΠΌΠΎΠ³Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Emmet для Brackets Π½Π° Linux Mint Cinnamon

Вопрос Π·Π°Π΄Π°Π½

Π˜Π·ΠΌΠ΅Π½Ρ‘Π½ 10 мСсяцСв Π½Π°Π·Π°Π΄

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Π½ 718 Ρ€Π°Π·

Π–ΠΌΡƒ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ. НачинаСт бСсконСчно Π΄ΠΎΠ»Π³ΠΎ крутится Π·Π½Π°Ρ‡ΠΎΠΊ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. ΠœΠΎΠΆΠ΅Ρ‚ Π΅ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ способы ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅ΠΌΠΌΠ΅Ρ‚?

  • linux
  • linux-mint
  • emmet

Emmet plugin for Brackets editor

8

РСшил ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ brackets Π½Π° Linux Mint 20 Ulyana(Ubuntu 20. 04 LTS).

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ с apt install snapd
snap install brackets --classic ΠΌΠ½Π΅ Π½Π΅ нравится.

ПоблСма с ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

РСшСниС:
ЗапускаСтС brackets.
МСню Debug - Switch Language- C System Default Π½Π° русский ΠΈ Reload Brackets
Π”Π°Π»Π΅Π΅ просто Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.
ΠŸΡ€ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ запускС мСню Π½Π° русском ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒΡΡ.
Π‘Ρ‹Π»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ языка ΠΏΡ€ΠΈ запускС brackets Ρ‡Π΅Ρ€Π΅Π· мСню. 

Запускал Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅ /snap/bin/brackets

Brackets Π΅ΡΡ‚ΡŒ ΠΈ Π½Π° Flathub

Π‘ΠΊΠ°Ρ‡Π°Π» https://github.com/adobe/brackets/releases/download/release-1.14.1/Brackets.Release.1.14.1.64-bit.deb

Π›ΡƒΡ‡ΡˆΠ΅ Ρ‚Π°ΠΊ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ dpkg -i Brackets.Release.1.14.1.64-bit.deb
ПослС Ρ‚Π°ΠΊΠΎΠ³ΠΎ приходится Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ apt --fix-broken install
Π§Π΅Ρ€Π΅Π· gdebi ΠΈ gdebi-core установка Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с libcurl3.

ΠŸΠΎΡ‡ΠΈΡ‚Π°Π» https://github.com/adobe/brackets/issues/14786

dpkg-deb -R ./Brackets.Release.1.14.1.64-bit.deb Brackets
sed -i 's/libcurl3/libcurl3 | libcurl4/' Brackets/DEBIAN/control
dpkg-deb -b Brackets Brackets-fixed. deb
sudo apt install -f ./Brackets-fixed.deb

Emmet plugin нашСлся

Ну ΠΈ поставился

2

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅

РСгистрация Ρ‡Π΅Ρ€Π΅Π· Google

РСгистрация Ρ‡Π΅Ρ€Π΅Π· Facebook

РСгистрация Ρ‡Π΅Ρ€Π΅Π· ΠΏΠΎΡ‡Ρ‚Ρƒ

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· рСгистрации

ΠŸΠΎΡ‡Ρ‚Π°

НСобходима, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ показываСтся

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· рСгистрации

ΠŸΠΎΡ‡Ρ‚Π°

НСобходима, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ показываСтся

НаТимая Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚Β», Π²Ρ‹ ΡΠΎΠ³Π»Π°ΡˆΠ°Π΅Ρ‚Π΅ΡΡŒ с нашими ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ соглашСниСм, ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΎΠΉ ΠΎ ΠΊΡƒΠΊΠΈ

Установка ΠΈ настройка Enhanced Mitigation Experience Toolkit (EMET) β€” 4sysops

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Enhanced Mitigation Toolkit (EMET), Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚. Π’ этом руководствС я расскаТу ΠΎΠ± основах настройки EMET ΠΈ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΡŽ, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ².

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

  1. Установка EMET Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ
  2. АвтоматичСская установка EMET
  3. Настройка EMET
  4. Π Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ
  • Автор
  • ПослСдниС сообщСния

Кайл Π‘Π΅ΠΊΠΌΠ°Π½

Кайл Π‘Π΅ΠΊΠΌΠ°Π½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ систСмным администратором Π² АтлантС, ΡˆΡ‚Π°Ρ‚ ДТордТия, поддСрТивая Office 365 Π² Π²Ρ‹ΡΡˆΠΈΡ… ΡƒΡ‡Π΅Π±Π½Ρ‹Ρ… завСдСниях. Π˜ΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 17 Π»Π΅Ρ‚ ΠΎΠΏΡ‹Ρ‚Π° систСмного администрирования.

ПослСдниС сообщСния Кайла Π‘Π΅ΠΊΠΌΠ°Π½Π° (ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС)

Набор инструмСнтов Enhanced Mitigation Experience Toolkit прСдоставляСтся Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π° MSI, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€ΡƒΡ‡Π½ΡƒΡŽ установку ΠΈΠ»ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅. Π‘Π½Π°Ρ‡Π°Π»Π° ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Ρ†Π΅Π½Ρ‚Ρ€ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Microsoft ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ EMET 5.5.

УстановитС EMET Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ

ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ MSI-Ρ„Π°ΠΉΠ»Π° EMET Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ. НаТмитС Β«Π”Π°Π»Π΅Π΅Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ экран привСтствия ΠΈ экраны ΠΏΠ°ΠΏΠΊΠΈ установки.

EMET 5.5 Π­ΠΊΡ€Π°Π½ Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΠ°ΠΏΠΊΠΈ для установки

ΠŸΡ€ΠΈΠΌΠΈΡ‚Π΅ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΎΠ½Π½ΠΎΠ΅ соглашСниС, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π”Π°Π»Π΅Π΅Β» Π΅Ρ‰Π΅ Π΄Π²Π° Ρ€Π°Π·Π°, ΠΏΡ€ΠΈΠΌΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠ΅ UAC, ΠΈ EMET установится. Когда процСсс установки Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡΡ, запустится мастСр настройки EMET.

ΠœΠ°ΡΡ‚Π΅Ρ€ настройки Enhanced Mitigation Experience Toolkit

Если Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ EMET, Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ настройки β€” это Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ способ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнными настройками. Если Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Π² эту систСму ΠΏΠΎΠ·ΠΆΠ΅ ΠΈΠ»ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ EMET Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, пропуститС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ·ΠΆΠ΅ . (Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΠΌΠ°Π½Ρ‡ΠΈΠ², Ссли Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… систСмах. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π²Ρ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ EMET с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ.)

Установка EMET Π² автоматичСском Ρ€Π΅ΠΆΠΈΠΌΠ΅

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° установки EMET прСдставляСт собой Ρ„Π°ΠΉΠ» MSI, поэтому установка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ вашСго любимого ΠΏΠ°ΠΊΠ΅Ρ‚Π° управлСния систСмами (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, System Center Configuration Manager) довольно проста. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡƒΡŽ строку:

 msiexec.exe /i Β«EMET Setup.msiΒ» /qn /norestart 

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ использовании этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° EMET устанавливаСтся с минимальной ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ; всС Ρ€Π°Π²Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ EMET послС Π΅Π³ΠΎ установки.

Настройка EMET

ПослС установки EMET Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ EMET GUI Π² мСню Β«ΠŸΡƒΡΠΊΒ» Π² ΠΏΠ°ΠΏΠΊΠ΅ Enhanced Mitigation Experience Toolkit. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ способ быстро ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅, EMET поставляСтся с ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнными профилями Π·Π°Ρ‰ΠΈΡ‚Ρ‹ XML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π˜ΠΌΠΏΠΎΡ€Ρ‚Β», Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· XML-Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒΒ».

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнных ΠΏΡ€ΠΎΡ„ΠΈΠ»Π΅ΠΉ Π·Π°Ρ‰ΠΈΡ‚Ρ‹ Π² EMET

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² EMET Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнного профиля:
ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡ прилоТСния для Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния Π² EMET

ΠžΡ‚ΡΡŽΠ΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ вноситС измСнСния ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ вашС тСстированиС выявляСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с этими ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнными ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΏΠΎ ΡƒΡΡ‚Ρ€Π°Π½Π΅Π½ΠΈΡŽ Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ, ΠΈΠ»ΠΈ добавляйтС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ€Ρ‹ для Π²Π°ΡˆΠΈΡ… собствСнных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ 9ΠΊΠ½ΠΎΠΏΠΊΠ° 0042. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ исполняСмому Ρ„Π°ΠΉΠ»Ρƒ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² EMET, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ исполняСмый Ρ„Π°ΠΉΠ» ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Open . На этом этапС Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ EMET.
Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² EMET

Π Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ

ГрафичСский интСрфСйс ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ EMET ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°, настроСнныС Π½Π° локальном ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅, Π½Π° Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π½Π° локальном ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ установлСны срСдства ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ администрирования сСрвСра (RSAT). Π”Π°Π»Π΅Π΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Кнопка Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ Π² графичСском интСрфСйсС EMET. Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ (GPO), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ здСсь ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ OK . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ New ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ.
Π Π°Π·Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ EMET с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ 4sysops!

Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² консоль управлСния Π³Ρ€ΡƒΠΏΠΏΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ°ΠΌΠΈ (GPMC) ΠΈ свяТитС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ с ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡ†Π΅ΠΉ, содСрТащСй ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹. Если Π½Π° этих ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… установлСн ΠΊΠ»ΠΈΠ΅Π½Ρ‚ EMET, ΠΎΠ½ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ эту Π½ΠΎΠ²ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ запускС обновлСния Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ.

Π Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ ΠΈ настройка Enhanced Mitigation Experience Toolkit (EMET) 3.0 с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ System Center Configuration Ma…

Π’ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π½Π° CLOUDBLOGS 15 мая 2012 Π³.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Configuration Manager для установки Enhanced Mitigation Experience Toolkit (EMET) 3.0 ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΉ для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π°ΡˆΠΈΡ… управляСмых систСмах. Π’ этом Π±Π»ΠΎΠ³Π΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ EMET 3.0 с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Configuration Manager.

Набор инструмСнтов Enhanced Mitigation Experience Toolkit (EMET) 3.0 ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для прСдотвращСния доступа Ρ…Π°ΠΊΠ΅Ρ€ΠΎΠ² ΠΊ вашСй систСмС Π·Π° счСт Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Ρ‰ΠΈΡ‚Ρ‹ любого прилоТСния, настроСнного для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠ³ΠΎ смягчСния послСдствий. Одно ΠΈΠ· основных прСимущСств EMET Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² усилСнии Π·Π°Ρ‰ΠΈΡ‚Ρ‹ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΠΈΠ±ΠΎ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π² ΠΊΠΎΠ΄Π΅ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ΅Ρ€ ΠΏΠΎ сниТСнию бСзопасности, Π»ΠΈΠ±ΠΎ Π½Π΅ Π±Ρ‹Π»ΠΈ исправлСны Π΄ΠΎ послСдних вСрсий. Π‘Π΅Π· ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, прСдоставляСмых поставщиком для этих ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов управлСния Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈ пСрСкомпиляции прилоТСния Π½Π΅ Π±Ρ‹Π»ΠΎ Π±Ρ‹ простого способа Π·Π°Ρ‰ΠΈΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΡ‚ эксплуатации. Π’ΠΎΡ‚ Ρ‚ΡƒΡ‚-Ρ‚ΠΎ ΠΈ появляСтся EMET.

EMET ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ инфраструктуру ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ Windows, которая называСтся Application Compatibility Framework. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эту ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ, EMET примСняСт ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ ΠΌΠ΅Ρ€Ρ‹ Π·Π°Ρ‰ΠΈΡ‚Ρ‹ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ, настроСнному для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΉ Π·Π°Ρ‰ΠΈΡ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… рСсурсов ΠΊ отслСТиваСмым прилоТСниям. Полная информация ΠΎ послСднюю Π²Π΅Ρ€ΡΠΈΡŽ EMET ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ здСсь . EMET 3.0 ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΎΡ‚ΡΡŽΠ΄Π° .

EMET 3.0 Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈ Π·Π°Ρ‰ΠΈΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π·Π°Ρ‰ΠΈΡ‚Ρƒ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… распространСнных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π˜Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ с установлСнным EMET, запустив простой Π΄Π²ΠΎΠΈΡ‡Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, XML-схСма, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ Π² профилях Π·Π°Ρ‰ΠΈΡ‚Ρ‹, являСтся простой ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π° для добавлСния Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² список Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ доставлСны с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Configuration Manager. Как ΠΈ Π² случаС с Π»ΡŽΠ±Ρ‹ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ, ΠΏΠ΅Ρ€Π΅Π΄ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ΠΌ Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ срСдС Π²Π°ΠΆΠ½ΠΎ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ EMET Π½Π° Π½ΡƒΠΆΠ½Ρ‹Ρ… Π²Π°ΠΌ прилоТСниях.


Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для развСртывания ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° EMET

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ шагом Π² Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠΈ EMET являСтся Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° EMET 3.0 MSI. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ² MSI, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Π±ΡƒΠ΄Ρƒ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° созданиС прилоТСния Π² Configuration Manager 2012, Π½ΠΎ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ ΠΈ объявлСниями с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Configuration Manager 2007.



  1. Из Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния | Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ прилоТСниями | ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β».

  2. ΠžΡΡ‚Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΈΠΏ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² качСствС установщика Windows (собствСнный) ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ исходному ΠΏΡƒΡ‚ΠΈ UNC для Ρ„Π°ΠΉΠ»Π° EMET Setup.MSI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ скачали Ρ€Π°Π½Π΅Π΅.

  3. БвСдСния ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π±ΡƒΠ΄ΡƒΡ‚ автоматичСски ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Ρ‹ ΠΈΠ· MSI вмСстС с ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° MSI (Π½Π° страницС Β«Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎΠ± ΠΈΠΌΠΏΠΎΡ€Ρ‚Π΅Β»).

  4. На страницС Β«ΠžΠ±Ρ‰Π°Ρ информация» Π²Ρ‹ смоТСтС Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ для этого прилоТСния, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ рядом с Β«ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° установки», которая содСрТит свСдСния ΠΎΠ± установкС EMET Π½Π° основС MSI. ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ строку установки ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: msiexec /i «EMET Setup.msi» /qn /norestart

  5. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ установки Π½Π° Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для систСмы .

  6. Π—Π°Π²Π΅Ρ€ΡˆΠΈΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρƒ мастСра.

  7. Π’ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ созданном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ.

  8. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³.

  9. На страницС содСрТимого Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ распространСния.

  10. На страницС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² развСртывания Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΡ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ установки (скорСС всСго, это потрСбуСтся, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π΅ тСстируСтС Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅).

  11. НастройтС Π·Π°ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅, взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΈ оповСщСния, Π° Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρƒ мастСра.

  12. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π² процСссС автоматичСского развСртывания ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° EMET Π½Π° всСх Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°Ρ…. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ…ΠΎΠ΄ΠΎΠΌ развСртывания этого прилоТСния Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠœΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ | РазвСртывания.


Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для настройки EMET

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΠ»ΠΈ EMET (ΠΈΠ»ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ Π² процСссС), Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ EMET для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠ³ΠΎ устранСния рисков для ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Π²Π°ΠΌΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π‘Π΅Π· настройки EMET ΠΊΠ»ΠΈΠ΅Π½Ρ‚ EMET Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ для обСспСчСния Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΉ Π·Π°Ρ‰ΠΈΡ‚Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ создадим Π½Π°Π±ΠΎΡ€ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‰ΠΈΡ… ΠΎΠ± установлСнном ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ EMET, ΠΈ нацСлимся Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² с ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ.


Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ EMET



  1. Из Π°ΠΊΡ‚ΠΈΠ²ΠΎΠ² ΠΈ соотвСтствия | ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ устройств Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ устройств.

  2. НазовитС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ устройств (ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ с установлСнным EMET) ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ.

  3. На страницС ΠΏΡ€Π°Π²ΠΈΠ» члСнства Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ запроса.

  4. НазовитС запрос ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ запроса».

  5. На Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠ΅Π² Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΆΠ΅Π»Ρ‚ΡƒΡŽ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΡƒ.

  6. Π’ свойствах критСрия ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΈΠΏ ΠΊΠ°ΠΊ простоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒΒ».

  7. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «УстановлСнныС прилоТСния» Π² качСствС класса Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°.

  8. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ΅ имя Π² качСствС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°.

  9. ПослС наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ «ОК» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β».

  10. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ EMET ΠΈΠ· списка Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π•. По ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ ΠΎΠ΄Π½Π° систСма Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΎΠ± ΠΈΠ½Π²Π΅Π½Ρ‚Π°Ρ€ΠΈΠ·Π°Ρ†ΠΈΠΈ своСго оборудования послС установки ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° EMET, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΎ. Если Π΅Π³ΠΎ Π½Π΅Ρ‚ Π² спискС, просто Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

  11. ПослС выполнСния ΠΏΡ€Π°Π²ΠΈΠ»Π° запроса Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ часто Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ эту ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ EMET Π½Π° эту ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ, поэтому ΠΎΡ†Π΅Π½ΠΈΠ²Π°ΠΉΡ‚Π΅ Π΅Π΅ Ρ‚Π°ΠΊ часто, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅Π΄Π°Π²Π½ΠΎ установили EMET, добавлялись Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ эта коллСкция Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ установили EMET, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΠ»ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ своСй ΠΈΠ½Π²Π΅Π½Ρ‚Π°Ρ€ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π° сСрвСр. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ инвСнтаризация отправляСтся ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ 7 Π΄Π½Π΅ΠΉ.


Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ EMET ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ



  1. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ 4 Ρ„Π°ΠΉΠ»Π° Π² исходный ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС источника для ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ EMET. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ эти Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ· исходного ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° EMET послС установки MSI Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅. ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π•. Если Π²Ρ‹ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ всС эти Ρ„Π°ΠΉΠ»Ρ‹, конфигурация EMET Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

    1. All.XML (ΠΈΠ· Ρ„Π°ΠΉΠ»ΠΎΠ² исходной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (x86) EMETDeploymentProtection Profiles)

    2. EMET_Conf.exe (ΠΈΠ· Ρ„Π°ΠΉΠ»ΠΎΠ² исходной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (x86)EMET)

    3. EMET_notifier.exe (ΠΈΠ· исходных Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (x86)EMET)

    4. MitigationInterface.dll (ΠΈΠ· исходных Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (x86)EMET)


  2. Из Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния | ΠŸΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚.

  3. НазовитС ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ этот ΠΏΠ°ΠΊΠ΅Ρ‚ содСрТит исходныС Ρ„Π°ΠΉΠ»Ρ‹. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ΠΌ Ρ„Π°ΠΉΠ»Π°ΠΌ, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ Π½Π° шагС 1.

  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ.

  5. НазовитС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΈ Π·Π°Π΄Π°ΠΉΡ‚Π΅ для ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ EMET_Conf. exe —import All.xml. ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π•. Π­Ρ‚ΠΎ всСго лишь ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования всСх ΠΏΡ€ΠΎΡ„ΠΈΠ»Π΅ΠΉ Π·Π°Ρ‰ΠΈΡ‚Ρ‹, прСдоставлСнных ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ EMET. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ этот Ρ„Π°ΠΉΠ» ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈ Π·Π°Ρ‰ΠΈΡ‚Ρ‹, прСдоставляСмыС EMET. Π’Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡΠ»Π°Ρ‚ΡŒΡΡ Π½Π° Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ EMET.

  6. УстановитС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для скрытого запуска ΠΈ нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, вошСл Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π² систСму.

  7. Π—Π°Π²Π΅Ρ€ΡˆΠΈΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρƒ мастСра.

  8. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π±ΡƒΠ΄ΡƒΡ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΡ… Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅.

  9. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ создали Ρ€Π°Π½Π΅Π΅, Π² качСствС Ρ†Π΅Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ мастСр Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ настройками.


Π—Π°Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ†Π΅Π»ΡŒ этого Π±Π»ΠΎΠ³Π° двоякая: Π²ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, я Ρ…ΠΎΡ‚Π΅Π» ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ всСх ΠΊ самому инструмСнту EMET, Π° Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, я Ρ…ΠΎΡ‚Π΅Π» ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ простой способ использования Configuration Manager для развСртывания ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° EMET ΠΈ Π΅Π³ΠΎ настройки.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *