sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°

Как ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML-ΠΊΠΎΠ΄ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Sublime Text 2?

Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

15 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²

Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ это часто, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ этот ΠΊΠ»ΡŽΡ‡ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ:

Ссли ваш Ρ„Π°ΠΉΠ» Π½Π΅ сохранСн (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹ просто вставили Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ Π² Π½ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ язык для отступ, Π²Ρ‹Π±Ρ€Π°Π² мСню Π’ΠΈΠ΄ β†’ синтаксис β†’ language of choice ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° reindent.

Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π΄ΡŽΠΆΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ»ΠΎ Ρ‚ΠΎΠ³ΠΎ способов форматирования HTML Π² Sublime. Π― протСстировал ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· самых популярных ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² (см. запись, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я сдСлал Π² своСм Π±Π»ΠΎΠ³Π΅ для ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ), Π½ΠΎ Π²ΠΎΡ‚ ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²:

ΠΊΠΎΠΌΠ°Π½Π΄Π° Reindent

Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄ ΠΏΠ»Π°Π³ΠΈΠ½ CodeFormatter, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ (наряду с ΠΏΠ΅Ρ€Π΅ΠΈΠ½Π΄Π΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ) ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ грязный ΠΊΠΎΠ΄, Π΄Π°ΠΆΠ΅ всС это находится Π² ΠΎΠ΄Π½ΠΎΠΉ строкС.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅:

Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ сочСтания клавиш F12 Π»Π΅Π³ΠΊΠΎ.

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ порядок вмСстС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ систСмой сборки для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ HTML.

Π£ мСня Π΅ΡΡ‚ΡŒ HTMLTidy.sublime-сборка Π² ΠΌΠΎΠΈΡ… ΠΏΠ°ΠΊΠ΅Ρ‚Π°Ρ… / User / directory:

ΠΈ tidy_config.cfg Ρ„Π°ΠΉΠ» Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅:

ΠΈ просто Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ build system ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ctrl + b ΠΈΠ»ΠΈ cmd + b ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Ρ„Π°ΠΉΠ»Π°. Одна ΠΈΠ· Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ST2 автоматичСски Π½Π΅ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Π°ΠΉΠ» ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ (ΠΈΠ»ΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ).

Π½Π° Mac я использовал macports для установки tidy, Π² Windows Π²Π°ΠΌ придСтся Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Π² систСмС сборки, Π³Π΄Π΅ находится tidy:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Sublime text 3 ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Установка ΠΈ настройка.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. sublime text 3 plagins 1. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-sublime text 3 plagins 1. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text 3 plagins 1. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сущСствуСт мноТСство Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈ IDE, Π½ΠΎ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Sublime Text 3, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² срСди Π²Π΅Π± Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π—Π° Ρ‡Ρ‚ΠΎ ΠΆΠ΅ Π΅Π³ΠΎ Ρ‚Π°ΠΊ Π»ΡŽΠ±ΡΡ‚? ΠŸΠ΅Ρ€Π²ΠΎΠ΅ это ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ установки ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Ρ€ΠΎΠ΄Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим самыС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Sublime text 3 ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π² Ρ€Π°Π±ΠΎΡ‚Π΅. ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Package Control (ΠΏΠ°ΠΊΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€). Π― описывал ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ этот процСсс, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎ sublime.

Π”Π°Π»Π΅Π΅ я расскаТу ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ… ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π² Ρ€Π°Π±ΠΎΡ‚Π΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΊΡ€Π°Ρ‚ΠΊΠΎ ΠΈΡ… настройку.

Sublime text 3 ΠΏΠ»Π°Π³ΠΈΠ½ для форматирования ΠΊΠΎΠ΄Π° HTML-CSS-JS Prettify

Часто Π²ΠΎ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΌΡ‹ Π½Π΅ слСдим Π·Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ΄Π°. Π­Ρ‚ΠΎΡ‚ ΠΏΠ°ΠΊΠ΅Ρ‚, позволяСт Π²Π°ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML, CSS, JavaScript ΠΊΠΎΠ΄ ΠΈ JSON Ρ„Π°ΠΉΠ»Ρ‹. УстанавливаСтся ΠΎΠ½ ΠΊΠ°ΠΊ ΠΈ всС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ Command Palette Π½Π°Π±Π΅Ρ€ΠΈΡ‚Π΅ prettify, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ HTML-CSS-JS Prettify. НСт нСобходимости ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ настройку, сразу ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Emmet быстроС написаниС ΠΊΠΎΠ΄Π°.

Плагин Emmet ускоряСт написаниС ΠΊΠΎΠ΄Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ горячих клавиш ΠΈ сниппСтов. Помимо Sublime Text, Emmet ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ β€” Notepad++, Coda, Eclipse, TextMate ΠΈ Π΄.Ρ€. Emmet устанавливаСтся Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹.

Как Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet?

ΠŸΡ€ΠΈΠ²Π΅Π΄Ρƒ ΠΏΠ°Ρ€Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ². НапримСр ΠΏΡ€ΠΈ написании Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ul Π±Π΅Π· <> ΠΈ наТатия Tab Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список. Если ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ элСмСнты li пишСм Ρ‚Π°ΠΊ ul>li

Π’Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ div.my-class для назначСния класса элСмСнту.

Sublime Text 3 ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΊΠΎΠ΄Π°

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. sublime text 3 plagins. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-sublime text 3 plagins. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text 3 plagins. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Плагин Sublime Linter

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΊΠΎΠ΄Π° являСтся вСсьма Π²Π°ΠΆΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ процСсса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Если Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ использовали linter, Ρ‚ΠΎ Π·Π½Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ это инструмСнт для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ качСства ΠΊΠΎΠ΄Π°. Он провСряСт ΠΊΠΎΠ΄ Π½Π° ошибки ΠΈ использованиС ΠΏΠ»ΠΎΡ…ΠΈΡ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° основС Sublime Linter Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ практичСски любой ΠΊΠΎΠ΄. Если Π²Ρ‹ ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚Π΅ ΠΎΡˆΠΈΠ±ΠΊΡƒ Π² ΠΊΠΎΠ΄Π΅, Sublime Linter подсвСтит Π΅Ρ‘ нСбольшим красным ΠΈΠ»ΠΈ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΌ ΠΊΡ€ΡƒΠΆΠΊΠΎΠΌ.

Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ Command Palette β€” Package Control : Install Package Π½Π°Π±Π΅Ρ€ΠΈΡ‚Π΅ linter, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ SublimeLinter
Π”Π°Π»Π΅Π΅ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π»ΠΈΠ½Ρ‚Π΅Ρ€Ρ‹ для javascript ΠΈ php.

Плагин ESLint для javascript

ESLint написанный Николасом Закасом. Π•Π³ΠΎ основноС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π»ΠΈΠ½Ρ‚Π΅Ρ€ΠΎΠ² Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π΅ тСкст ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ, Π° ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сгСнСрированноС AST-Π΄Π΅Ρ€Π΅Π²ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π΅ΠΌΡƒ большС возмоТностСй для Π°Π½Π°Π»ΠΈΠ·Π°.

Вторая ваТная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ESLint это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ любоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСт Π½ΠΎΠ²Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°.

Π€Π°ΠΉΠ» Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ сСбя, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠ΅Π³ΠΎ Ρ„Π°ΠΉΠ»Π° ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ:

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ дСйствиС это установка ESLint Π² Sublime Text. Установка происходит Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌ Ρ‡Π΅Ρ€Π΅Π· Command Palette. Π’ ΠΏΠΎΠ»Π΅ поиска ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π΅ΠΌ eslint, Π² спискС ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появился Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ SublimeLinter-contrib-eslint ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ ΠΈΠ»ΠΈ ΠΌΡ‹ΡˆΡŒ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

Π”Π°Π»Π΅Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² Β«Preferences / Package Settings / ESLint / Settings β€” UserΒ» Π² мСню, ΠΈ вставляСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Плагин PHP CodeSniffer

PHP CodeSniffer β€” содСрТит Π² сСбС Π΄Π²Π° скрипта, Π³Π»Π°Π²Π½Ρ‹ΠΉ phpcs провСряСт PHP (Ρ‚Π°ΠΊ ΠΆΠ΅ JavaScript ΠΈ CSS) Ρ„Π°ΠΉΠ»Ρ‹ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΠΉ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ стандарта кодирования.

ЯвляСтся ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΌ инструмСнтом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π’Π°Ρˆ ΠΊΠΎΠ΄ чистым ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ сСмантичСскиС ошибки, Π΄ΠΎΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ. Π’Ρ‚ΠΎΡ€ΠΎΠΉ скрипт phpcbf автоматичСски ΠΏΡ€Π°Π²ΠΈΡ‚ ΠΊΠΎΠ΄ ΠΏΠΎΠ΄ стандарты кодирования.

Для установки Code Sniffer Ρƒ Вас ΡƒΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ установлСн PHP ΠΈ Composer ΠΏΠ°ΠΊΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Composer Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС.

ΠŸΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ установки Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π² ΡΠΈΡΡ‚Π΅ΠΌΠ½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ PATH Π±Ρ‹Π» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ composer, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ

Для установки Ρ‡Π΅Ρ€Π΅Π· Composer ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ:

composer global require «squizlabs/php_codesniffer=*»

Π”Π°Π»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ стандарт кодирования, Π² нашСм случаС это Π±ΡƒΠ΄Π΅Ρ‚ WordPress Coding Standards, для установки снова ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Composer:

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг β€” установка ΠΏΠ°ΠΊΠ΅Ρ‚Π° sublime-phpcs ΠΈ phpcs-linter стандартным способом Ρ‡Π΅Ρ€Π΅Π· Package Control : Install Package, для Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Sublime Linter.

ПослС установки ΠΈΠ· command palette Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Preferences: SublimeLinter Settings β€” User ΠΈ измСняСм user.linters.phpcs.standard Π½Π° php стандарт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ WordPress, WordPress-VIP, ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅.

Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ PHP Code Beautifier and Fixer Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ path ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ phpcbf.bat ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅ΠΆΠΈΡ‚ Π² your_path_to_wpcs\vendor\bin\

И Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ настройки ( Preferences β€” Package Settings β€” PHP Code Sniffer β€” Settings β€” User ) Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ:

Для запуска Π² Command Palette пишСм fixer ΠΈΠ· списка Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ PHP Π‘oding Standards Fixer: Fix this file (PHP Code Beautifier).

Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ горячиС клавиши, Π·Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π² Preferences β€” Package Settings β€” PHP Code Sniffer β€” Key Bindings β€” User ΠΈ добавляСм:

Π­Ρ‚ΠΎ основныС Sublime text 3 ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π°ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ это Π½Π΅ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ список, количСство ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² зависит ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… потрСбностСй ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ. А ΠΊΠ°ΠΊΠΈΠ΅ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅? ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² коммСнтариях.

Если ΡΡ‚Π°Ρ‚ΡŒΡ оказалась Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Π΅ΠΉ с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΡŽ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. И ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π² наши сообщСства Π² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°

Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

15 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²

Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ это часто, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ этот ΠΊΠ»ΡŽΡ‡ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ:

Ссли ваш Ρ„Π°ΠΉΠ» Π½Π΅ сохранСн (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹ просто вставили Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ Π² Π½ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ язык для отступ, Π²Ρ‹Π±Ρ€Π°Π² мСню Π’ΠΈΠ΄ β†’ синтаксис β†’ language of choice ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° reindent.

Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π΄ΡŽΠΆΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ»ΠΎ Ρ‚ΠΎΠ³ΠΎ способов форматирования HTML Π² Sublime. Π― протСстировал ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· самых популярных ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² (см. запись, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я сдСлал Π² своСм Π±Π»ΠΎΠ³Π΅ для ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ), Π½ΠΎ Π²ΠΎΡ‚ ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²:

ΠΊΠΎΠΌΠ°Π½Π΄Π° Reindent

Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄ ΠΏΠ»Π°Π³ΠΈΠ½ CodeFormatter, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ (наряду с ΠΏΠ΅Ρ€Π΅ΠΈΠ½Π΄Π΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ) ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ грязный ΠΊΠΎΠ΄, Π΄Π°ΠΆΠ΅ всС это находится Π² ΠΎΠ΄Π½ΠΎΠΉ строкС.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅:

Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ сочСтания клавиш F12 Π»Π΅Π³ΠΊΠΎ.

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ порядок вмСстС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ систСмой сборки для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ HTML.

Π£ мСня Π΅ΡΡ‚ΡŒ HTMLTidy.sublime-сборка Π² ΠΌΠΎΠΈΡ… ΠΏΠ°ΠΊΠ΅Ρ‚Π°Ρ… / User / directory:

ΠΈ tidy_config.cfg Ρ„Π°ΠΉΠ» Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅:

ΠΈ просто Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ build system ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ctrl + b ΠΈΠ»ΠΈ cmd + b ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Ρ„Π°ΠΉΠ»Π°. Одна ΠΈΠ· Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ST2 автоматичСски Π½Π΅ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Π°ΠΉΠ» ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ (ΠΈΠ»ΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ).

Π½Π° Mac я использовал macports для установки tidy, Π² Windows Π²Π°ΠΌ придСтся Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Π² систСмС сборки, Π³Π΄Π΅ находится tidy:

Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π² Sublime 3 Π°Π²Ρ‚ΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°?

Допустим, я вставил HTML ΠΊΠΎΠ΄ Π² Sublime Text. Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ табуляциСй, соотвСтствСнно, получаСтся каша.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌ дСйствии ΠΊΠΎΠ΄ сам форматировался ΠΈ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π» Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄?

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. . sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

1 ΠΎΡ‚Π²Π΅Ρ‚ 1

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΌΠΈ срСдствами

Preferences β†’ Key Bindings β€” User

Если Ρ„Π°ΠΉΠ» пустой, Ρ‚ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ.
Если Π½Π΅Ρ‚, Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π² массив, ΠΊΠ°ΠΊ добавляли Π±Ρ‹ Π΅Π³ΠΎ Π² JSON.

Π”Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ позволяСт ΠΏΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ CTRL + ALT + L ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π²ΠΎ всСм Ρ„Π°ΠΉΠ»Π΅ ΠΈΠ»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стороннСго ΠΏΠ»Π°Π³ΠΈΠ½Π°

Установка:

ИспользованиС (любой ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²)

ΠŸΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡ‚Π΅, поТалуйста, ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ SublimeText 3 Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ автоматичСски Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π»/структурировал html ΠΊΠΎΠ΄, когдя я Π΅Π³ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡŽ/ΠΏΠΈΡˆΡƒ.
Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‡Ρƒ Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для форматирования HTML ΠΊΠΎΠ΄Π°

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½. НС ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ae47bce8f7d2a2984f95889751c227f6. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-ae47bce8f7d2a2984f95889751c227f6. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ae47bce8f7d2a2984f95889751c227f6. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. av104437. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-av104437. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° av104437. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π°Π²Ρ‚ΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ всСгда трСбуСтся, ΠΈΠ½ΠΎΠ³Π΄Π° (Ρƒ мСня ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ ΠΎΡ‡Π΅Π½ΡŒ часто) Π½ΡƒΠΆΠ½ΠΎ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² бОльшСй части ΠΊΠΎΠ΄Π°.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π°Π²Ρ‚ΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° (расставлСниС отступов, Π°Π²Ρ‚ΠΎΠ·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Ρ‚Π΅Π³ΠΎΠ²) Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ. Если трСбуСтся Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ β€” просто Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π³ΠΎ (для надёТности Π΅Ρ‰Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Ctrl+J) ΠΈ выровняйтС встроСнными срСдствами, способы ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π²Ρ‹ΡˆΠ΅ (ΠΈΠ»ΠΈ Ρ‡Π΅Ρ€Π΅Π· контСкстноС мСню)

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Sublime Text 3 для вСрстки сайтов. Настройка внСшнСго Π²ΠΈΠ΄Π° ΠΈ установка ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². Руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

БСгодня расскаТу ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ для вСрстки сайтов ΡƒΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ‚. Быстрый, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ настраиваСмый Sublime Text 3.

ΠœΡ‹ с нуля настроСм Π΅Π³ΠΎ внСшний Π²ΠΈΠ΄, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ AutoFileName, BracketHighliter, ColorHighliter, Emmet, GotoCSSDeclaration ΠΈ Tag, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сущСствСнно ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΌ ΠΏΡ€ΠΈ вСрсткС сайтов! Ну Ρ‡Ρ‚ΠΎ ΠΆ, ΠΎΡ‚ слов ΠΊ Π΄Π΅Π»Ρƒ!

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ, послС установки Sublime Text 3, я Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽ внСшний Π²ΠΈΠ΄ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

Боковая панСль

Для отобраТСния ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ View – Side Bar – Show Open Files. Π’ этой ΠΏΠ°Π½Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ наши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΠΈ ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ нашСй вСрстки. Для наглядности сСйчас добавлю ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ…. ВсС Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ β€” это просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ с ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ Π½Π° Π½Π°ΡˆΡƒ панСль.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. cjuzeckjia ujp k3d1n3527ci4. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-cjuzeckjia ujp k3d1n3527ci4. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° cjuzeckjia ujp k3d1n3527ci4. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

ЦвСтовая схСма

Π”Π°Π»Π΅Π΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ ΠΊΠΎΠ΄Π°, для наглядности ΠΎΡ‚ΠΊΡ€ΠΎΡŽ любой Ρ„Π°ΠΉΠ», Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с HTML ΠΊΠΎΠ΄ΠΎΠΌ. Для этого Π΄Π²Π° Ρ€Π°Π·Π° кликаю Π½Π° Π½ΡƒΠΆΠ½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠΆΡƒ Preferences – Color Scheme, открываСтся окошко с установлСнными Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Ρ‚ΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹ внСшний Π²ΠΈΠ΄ нашСго ΠΊΠΎΠ΄Π° ΠΈ сама ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. vm sjf8jgp4msozhohhjyweeqg8. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-vm sjf8jgp4msozhohhjyweeqg8. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° vm sjf8jgp4msozhohhjyweeqg8. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π›ΠΈΡ‡Π½ΠΎ ΠΌΠ½Π΅ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· прСдустановлСнных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², поэтому я ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму. ΠžΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ ΠΈΡ… количСство ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ Π½Π° сайтС с дополнСниями ΠΊ Sublime packagecontrol.io. Π― ΡƒΠΆΠ΅ знаю ΠΊΠ°ΠΊΡƒΡŽ ΠΈΠΌΠ΅Π½Π½ΠΎ я схСму Ρ…ΠΎΡ‡Ρƒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ сСйчас ΠΈ сдСлаю.

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ схСмы, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ дополнСния, ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ спСрва ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ установщик этих Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ. Π—Π²ΡƒΡ‡ΠΈΡ‚ слоТно, Π½ΠΎ Π½Π° Π΄Π΅Π»Π΅ всС Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠΆΡƒ Π² мСню Tools – Command Palette, Π»ΠΈΠ±ΠΎ наТимаю Ctrl+Shift+P. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ с поиском, Π² ΠΏΠΎΠ»Π΅ поиска Π²Π²ΠΎΠΆΡƒ install ΠΏΠΎΠΊΠ° Π½Π΅ ΡƒΠ²ΠΈΠΆΡƒ ΠΏΡƒΠ½ΠΊΡ‚ Install Package Control, ΠΈ наТимаю Π½Π° Π½Π΅Π³ΠΎ. Бпустя нСсколько сСкунд ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ сообщСниС ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Package Control ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ установлСн. Π’Π΅ΠΏΠ΅Ρ€ΡŒ я ΠΌΠΎΠ³Ρƒ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ установкС Π½ΡƒΠΆΠ½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмы.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. z. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-z. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° z. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Для этого ΠΎΠΏΡΡ‚ΡŒ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽ Command Palette заТимая Ctrl+Shift+P, Π² ΠΏΠΎΠ»Π΅ поиска ΠΎΠΏΡΡ‚ΡŒ Π²Π²ΠΎΠΆΡƒ install ΠΏΠΎΠΊΠ° Π½Π΅ ΡƒΠ²ΠΈΠΆΡƒ ΠΏΡƒΠ½ΠΊΡ‚ Package Control: Install Package (ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ дополнСния) наТимаю Π½Π° Π½Π΅Π³ΠΎ. НСмного ΠΏΠΎΠ΄ΠΎΠΆΠ΄Π°Π² Π²ΠΈΠΆΡƒ ΠΎΠΊΠ½ΠΎ со списком всСх доступных Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΊ Sublime. Ну, ΠΏΠΎΡ‡Ρ‚ΠΈ всСх.

Π’ ΠΏΠΎΠ»Π΅ поиска Π²Π²ΠΎΠΆΡƒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ дополнСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ…ΠΎΡ‡Ρƒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ β€” это цвСтовая схСма ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Base16 Color Schemes, Ρ‚ΠΎΡ‡Π½Π΅Π΅ это Ρ†Π΅Π»Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ с мноТСством Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… схСм. НаТимаю Π½Π° Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΈ оТидаю установки. Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ процСсса установки ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ² Ρ‚Π°ΠΌ ΠΆΠ΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ сообщСниС ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ всС установлСно ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠΆΡƒ ΠΊ смСнС схСмы. Для этого ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню Preferences – Color Scheme ΠΈ Π²ΠΈΠΆΡƒ Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ ΡƒΠΆΠ΅ большоС мноТСство Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². МСня интСрСсуСт схСма Ocean, Π²Π²ΠΎΠΆΡƒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π² поискС, ΠΈΡ… Ρ‚ΡƒΡ‚ Π΅ΡΡ‚ΡŒ Π΄Π²Π΅: ΠΎΠ΄Π½Π° Π±ΠΎΠ»Π΅Π΅ контрастнСй Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. . sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Моя любимая цвСтовая схСма установлСна, Ρ‚Ρ‹ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ моТСшь Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ сСбС Π»ΡŽΠ±ΡƒΡŽ Π΄Ρ€ΡƒΠ³ΡƒΡŽ.

ΠžΠ±Ρ‰ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΌΠ½Π΅ большС нравится Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ, поэтому ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠΆΡƒ Preferences – Theme, ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°ΡŽΡΡŒ Π½Π° Adaptive.sublime-theme

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. lm5crobvcnh8pbbk ikvenqleae. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-lm5crobvcnh8pbbk ikvenqleae. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° lm5crobvcnh8pbbk ikvenqleae. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠ΄ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это влияСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° восприятиС, Π½ΠΎ ΠΈ Π½Π° ΡƒΡΡ‚Π°Π»ΠΎΡΡ‚ΡŒ ΠΈ Π·Π΄ΠΎΡ€ΠΎΠ²ΡŒΠ΅ Ρ‚Π²ΠΎΠΈΡ… Π³Π»Π°Π·. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π±Π΅Ρ€ΠΈ сСбС Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСбя Π½ΠΈΡ‡Π΅Π³ΠΎ Π² Π½Π΅ΠΉ Π½Π΅ напрягало. И ΠΏΠΎΠΌΠ½ΠΈ ΠΏΡ€ΠΎ ΠΏΠ΅Ρ€Π΅Ρ€Ρ‹Π²Ρ‹ Π² Ρ€Π°Π±ΠΎΡ‚Π΅!

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ восприятиС ΠΊΠΎΠ΄Π° ΠΈ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π½ΠΈΠΌ ΠΌΠ½Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Preferences – Settings. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ Ρ‚Π°ΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π½Π° Π΄Π²Π΅ части. Π’ Π»Π΅Π²ΠΎΠΉ части настройки ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ нСльзя, Π° Π²ΠΎΡ‚ Π² ΠΏΡ€Π°Π²ΠΎΠΉ части Ρ‚Ρ‹ моТСшь эти настройки ΠΏΠ΅Ρ€Π΅Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ, каТдая ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠ΄Ρ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ. Π’ΠΎΡ‚ ΠΊΠ°ΠΊΠΈΠ΅ настройки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ я:

Поясню ΠΊΠ°ΠΆΠ΄ΡƒΡŽ настройку.

Π£Π±ΠΈΡ€Π°Π΅Ρ‚ странныС отступы Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ панСлью, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΠ±Ρ‰ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρƒ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠΉ.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. u43gwpcya sg4f6buszklwjutqa. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-u43gwpcya sg4f6buszklwjutqa. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° u43gwpcya sg4f6buszklwjutqa. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

ВыставляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.Π’Π°ΠΊΠΆΠ΅ быстро ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°, работая с ΠΊΠΎΠ΄ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΆΠ°Π² ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ» ΠΈ ΠΏΠΎΠΊΡ€ΡƒΡ‚ΠΈΠ² колСсо ΠΌΡ‹ΡˆΠΈ.

Если Ρ‚Ρ‹ Π²Π΄Ρ€ΡƒΠ³ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» случайно, Ρ‚ΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ пСрСйдя Π² Preferences – Font β€” Reset

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. f jiwlnu6ewojud3iimdup0omeq. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-f jiwlnu6ewojud3iimdup0omeq. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° f jiwlnu6ewojud3iimdup0omeq. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π­Ρ‚ΠΈ Π»ΠΈΠ½ΠΈΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ элСмСнт, Ρ‡Ρ‚ΠΎ сущСствСнно ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π² ΠΊΠΎΠ΄Π΅.

Π›ΠΈΡ‡Π½ΠΎ я ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°ΡŽ ΠΈΡ… (false) ΠΏΠΎ Π΄Π²ΡƒΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ. ΠŸΠ΅Ρ€Π²Π°Ρ β€” я ΡƒΠΆΠ΅ Π½Π΅ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ ΠΈ Π±Π΅Π· Π½ΠΈΡ… Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΡΠΏΡ€Π°Π²Π»ΡΡŽΡΡŒ, вторая ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° β€” это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ настройка.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. s77wqm. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-s77wqm. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° s77wqm. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ табуляции ΠΈ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹. Π’ΠΎ Π΅ΡΡ‚ΡŒ это Π½Π΅ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°, Π° просто Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для удобства Ρ€Π°Π±ΠΎΡ‚Ρ‹. И Π²ΠΎΡ‚, Ссли Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈ draw_indent_guides ΠΈ draw_white_space Ρ‚ΠΎ получатСся ΠΊΠ°ΡˆΠΈΡ†Π° которая Π»ΠΈΡ‡Π½ΠΎ мСня напрягаСт. Π§Ρ‚ΠΎ ΠΈΠ· этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π° Ρ‡Ρ‚ΠΎ Π½Π΅Ρ‚ β€” Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Ρ‚Π΅Π±Π΅.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. s6az ve44n2srsl76d2rmfctyiy. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-s6az ve44n2srsl76d2rmfctyiy. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° s6az ve44n2srsl76d2rmfctyiy. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π»ΠΈΠ½ΠΈΠΈ отступа ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Tab. Π›ΠΈΡ‡Π½ΠΎ ΠΌΠ½Π΅ нравится 3ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ πŸ™‚

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. oavhhuent. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-oavhhuent. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° oavhhuent. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

НапримСр ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ, Π° ΠΏΠΎΡ‚ΠΎΠΌ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎ Π·Π°ΠΊΡ€Ρ‹Π»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ πŸ™‚ Π‘Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ΅? Π£ мСня постоянно, Ρ‚Π°ΠΊ Π²ΠΎΡ‚ эта настройка Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Β«ΠΏΠ°ΠΌΡΡ‚ΡŒΒ» Ρƒ Sublime ΠΈ ΠΏΡ€ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΎΡ‚ΠΊΡ€ΠΎΡŽΡ‚ΡΡ ΠΈ всС послСдниС Ρ„Π°ΠΉΠ»Ρ‹. И Π΄Π°, ΠΏΠ°ΠΌΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ послС ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΊΠΎΠΌΠΏΠ°.

Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ ΠΎΠΊΠ½Π°

Π•Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ восприятиС ΠΊΠΎΠ΄Π° ΠΈ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ процСсс вСрстки Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ ΠΎΠΊΠ½Π°.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ практичСски всСгда приходится Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с нСсколькими Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ index.html style.css ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ js Ρ„Π°ΠΉΠ», Ρ‚ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ удобством Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° с ΠΊΠΎΠ΄ΠΎΠΌ Π½Π° сСкторы. Π’Π°Ρ€ΠΈΠ½Ρ‚ΠΎΠ² нСсколько. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² View – Layout ΠΈ смотрим Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ Ρƒ нас Π΅ΡΡ‚ΡŒ.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. . sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

БоотвСтствСнно Single – это Π²ΠΈΠ΄ Π±Π΅Π· Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ сСйчас, Columns: 2, 3, 4 это Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. НапримСр Π½Π°ΠΆΠ°Π² Π½Π° Columns: 2 наш экран с ΠΊΠΎΠ΄ΠΎΠΌ раздСлится ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ, ΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ‡Π°ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ΠΏΡƒΡΡ‚ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ CSS слСва HTML ΠΈ JS справа, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π±ΠΎΠ»Π΅Π΅ наглядной ΠΈ быстрой.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. 9d7ptdnxxhl8 4 z0azd0tlcaqi. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-9d7ptdnxxhl8 4 z0azd0tlcaqi. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 9d7ptdnxxhl8 4 z0azd0tlcaqi. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π’Π°ΠΊ ΠΆΠ΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒ экран ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ это Rows: 2 ΠΈ Rows: 3, Π½Π°ΠΆΠ°Π² Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° Rows: 3 ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Ρ‚Ρ€ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π° ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠΈΠ½ΡƒΡ‚ΡŒ JS Ρ„Π°ΠΉΠ» Π² Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ ΠΎΠΊΠ½ΠΎ. И послСдний Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ это Grid: 4 ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»ΠΈΡ‚ экран ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΎΠΊΠ½Π°. ΠžΠ±Ρ€Π°Ρ‚ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ горячих клавиш Alt+Shift+ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ Ρ†ΠΈΡ„Ρ€Π°.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. 9ssmw404yl3svo1brz3z71owizw. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-9ssmw404yl3svo1brz3z71owizw. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 9ssmw404yl3svo1brz3z71owizw. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Ρƒ тСбя Π΅ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ ΠΏΠΎ вкусу. Π― Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΎΠ΄Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠΈ синтаксиса

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ настройкой внСшнСго Π²ΠΈΠ΄Π° Π±ΡƒΠ΄Π΅Ρ‚ настройка подсвСтки синтаксиса. Π‘Π»ΠΎΠ²ΠΎ ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ Π½Π° Π΄Π΅Π»Π΅ всС просто.

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠΈ синтаксиса – это особоС ΠΎΠΊΡ€Π°ΡˆΠΈΠ²Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ³ΠΎ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Π° Π² ΠΊΠΎΠ΄Π΅. НапримСр, Π² этой Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмС Π² HTML Ρ„Π°ΠΉΠ»Π΅ ΠΊΡ€Π°cΠ½Ρ‹ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ Ρ‚Π΅Π³, Π·Π΅Π»Π΅Π½Ρ‹ΠΌ β€” Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса, Π±Π΅Π»Ρ‹ΠΌ β€” тСкст ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ восприятиС ΠΊΠΎΠ΄Π° Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ понятнСС. ΠžΠ±Ρ€Π°Ρ‚ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€Π°Π²Ρ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡƒΠ³ΠΎΠ» ΠΎΠΊΠ½Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΊΠΎΠΉ Ρ„Π°ΠΉΠ» Ρƒ нас сСйчас Π°ΠΊΡ‚ΠΈΠ²Π΅Π½, CSS HTML JS ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅ происходит ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ отобраТСния ΠΊΠΎΠ΄Π° этого ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°.

Π—Π°Ρ‡Π΅ΠΌ ΠΆΠ΅ Ρ‚ΡƒΡ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Ссли всС ΠΈ Ρ‚Π°ΠΊ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚? Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ Π² Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅Ρ‚Π΅ Sublime установлСны ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ подсвСтки синтаксиса Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ для всСх Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ².

НапримСр, Π² дальнСйшСм я ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ SCSS, ΠΎΡ‚ΠΊΡ€Ρ‹Π² Π΅Π³ΠΎ я ΡƒΠ²ΠΈΠΆΡƒ ΡΠΏΠ»ΠΎΡˆΠ½ΡƒΡŽ ΠΏΡ€ΠΎΡΡ‚Ρ‹Π½ΡŽ ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° Π±Π΅Π»Ρ‹Ρ… символов. НС ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ, ΠΏΡ€Π°Π²Π΄Π°?

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. . sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π’Π°ΠΊ Π²ΠΎΡ‚, Π² Ρ‚Π°ΠΊΠΈΡ… случаях я Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚.

ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ наш ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹ΠΉ CommΠ°nd Palette пСрСйдя Tools – Command Palette, Π»ΠΈΠ±ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Ctrl+Shift+P Π½Π°Π±ΠΈΡ€Π°Π΅ΠΌ install, ΠΆΠΌΠ΅ΠΌ Install Package Control ΠΈ ΠΈΡ‰Π΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ SCSS. НаТимаСм Π½Π° Π½Π΅Π³ΠΎ, послС установки ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ нашС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° SCSS. БСйчас всС выглядит симпатичнСС, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ?

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. . sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Настройка внСшнСго Π²ΠΈΠ΄Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Π²Π°ΠΆΠ½Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ довольно Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ врСмя ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΠΌ Π·Π° написаниСм ΠΊΠΎΠ΄Π°. Π­Ρ‚ΠΎ влияСт Π½Π° Π½Π°ΡˆΡƒ ΡƒΡΡ‚Π°Π»ΠΎΡΡ‚ΡŒ, ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Π·Π΄ΠΎΡ€ΠΎΠ²ΡŒΠ΅ Π΄Π° ΠΈ просто Π½Π° настроСниС.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ сдСлаСм это установим ряд ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ. Π˜Ρ… сущСствуСт ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство, Π° я расскаТу ΠΏΡ€ΠΎ основныС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ сам ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Ρ€Π°Π·Ρ‹ ускорят вСсь процСсс вСрстки. ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ!

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹

AutoFileName

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² процСссС вСрстки часто приходится ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Π² Ρ€Π°Π·Ρ‹ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ процСсс ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ. Установим Π΅Π³ΠΎ. НаТимаСм Ctrl+Shift+P Π΄Π°Π»Π΅Π΅ Install Package Control ΠΈΡ‰Π΅ΠΌ AutoFileName устанавливаСм. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ сСйчас. Π‘Ρ€Π°Π·Ρƒ Π·Π°ΠΌΠ΅Ρ‡Π°Π΅ΠΌ появлСниС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню со списком Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ². ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ ΠΈ Π²ΠΈΠ΄ΠΈΠΌ Ρ‚ΡƒΡ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ Ρ„Π°ΠΉΠ», Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ пригодится.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. v5fklpjimmpaemapj3vdb d9epk. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-v5fklpjimmpaemapj3vdb d9epk. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° v5fklpjimmpaemapj3vdb d9epk. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

BracketHighliter

BracketHighliter ΠΌΠΎΠΆΠ½ΠΎ пСрСвСсти ΠΊΠ°ΠΊ подсвСтка ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ. Установим Π΅Π³ΠΎ. НаТимаСм Ctrl+Shift+P, Install Package Control ΠΈΡ‰Π΅ΠΌ BracketHighliter. УстанавливаСм. Π’ΡƒΡ‚ Π΄Π°ΠΆΠ΅ открываСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с сообщСниСм ΠΎΠ± ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ установкС. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π² нашСм ΠΊΠΎΠ΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ элСмСнт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³, Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ ΠΈ конСчная ΠΊΠΎΠ²Ρ‹Ρ‡ΠΊΠ°, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π°Ρ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π°Ρ скобка. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ с ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ Π² ΠΊΠΎΠ΄Π΅.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. mgpr8wdwsdreoomitnzpip5f8hq. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-mgpr8wdwsdreoomitnzpip5f8hq. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° mgpr8wdwsdreoomitnzpip5f8hq. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

ColorHighliter

ΠžΠ±Ρ€Π°Ρ‚ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° этот ΠΊΠΎΠ΄ β€” это ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π°, Π½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ нСпонятно.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. vdpcscnnmg zblrx3ths 8q458. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-vdpcscnnmg zblrx3ths 8q458. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° vdpcscnnmg zblrx3ths 8q458. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π”Π°Π²Π°ΠΉ установим ΠΏΠ»Π°Π³ΠΈΠ½. Ctrl+Shift+P, Install Package Control ΠΈΡ‰Π΅ΠΌ ColorHighliter. ΠžΠΏΡΡ‚ΡŒ открываСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с сообщСниСм ΠΎΠ± ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ установкС. И сообщСния ΠΎ Π½Π΅ΠΊΠΎΠΉ ошибкС, ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅ΠΌ ΠΈΡ…. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π° наш ΠΊΠΎΠ΄ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ, ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΈΠ΄ΠΈΠΌ Ρ‡Ρ‚ΠΎ Π·Π° Ρ†Π²Π΅Ρ‚ скрываСтся Π·Π° Π±ΡƒΠΊΠ²Π΅Π½Π½ΠΎΡ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. Π‘Π°ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π² мСню Tools β€” ColorHighliter Π½ΠΎ сСйчас Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° этом. ВсС ΠΈ Ρ‚Π°ΠΊ стало Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. 2oda862gjiywhnbebcwhecwnll0. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-2oda862gjiywhnbebcwhecwnll0. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 2oda862gjiywhnbebcwhecwnll0. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Π’Π΅Π»ΠΈΠΊΠΈΠΉ ΠΈ ΠΌΠΎΠ³ΡƒΡ‡ΠΈΠΉ Emmet

УстанавливаСм ΠΏΠΎ Π½Π°Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠΉ схСмС. Ctrl+Shift+P, Install Package Control ΠΈΡ‰Π΅ΠΌ Emmet. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с сообщСниСм с ΠΏΡ€ΠΎΡΡŒΠ±ΠΎΠΉ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ для окончания установки. Π—Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Sublime. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ сообщСниС, Ρ‡Ρ‚ΠΎ всС установлСно.

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΆΠ΅ ΡƒΠΌΠ΅Π΅Ρ‚ Emmet?

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ Π² HTML Ρ„Π°ΠΉΠ» ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π΅Π³ div с классом .block, для этого Π½Π°ΠΌ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ достаточно ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ, Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ «block» ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Tab. ΠœΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ:

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ запись, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Ρ‚Π΅Π³ div с классом .block Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ span ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ запись:

Π–ΠΌΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Tab ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ:

Но ΠΈ это Π΅Ρ‰Π΅ Π½Π΅ всС, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои сниппСты, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹/Π·Π°Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ.
Для этого ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ Preferences – Package Settings – Emmet – Settings User. Π—Π΄Π΅ΡΡŒ запишСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ запись:

Π½Π°ΠΌ достаточно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ bl ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Tab

Из этого слСдуСт, Ρ‡Ρ‚ΠΎ возмоТности Emmet Π±Π΅Π·Π³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹, ΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свои сниппСты ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ быстро. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ возмоТностях ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° сайтС https://emmet.io

GotoCSSDeclaration

Плагин ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΌ с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ Π² ΠΊΠΎΠ΄Π΅. УстанавливаСм Ρ€ΠΎΠ²Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹. Π”Π°Π»Π΅Π΅ Π½Π°Π·Π½Π°Ρ‡ΠΈΠΌ горячиС клавиши для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ для этого ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Preferences – Key Bindings, ΠΈ пишСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄

Π“Π΄Π΅ [«ctrl+1«] это ΠΈ Π΅ΡΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ сочСтаниС клавиш. БохраняСм Cntr+S.
И Π²ΠΎΡ‚ ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π£ нас Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ CSS ΠΈ HTML Ρ„Π°ΠΉΠ»Ρ‹. CSS ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΎΡ‡Π΅Π½ΡŒ большой ΠΈ Π½Π°ΠΉΡ‚ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ быстро слоТно, Π½ΠΎ это Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ. НапримСр, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ CSS для класса content-mainpage ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ Π½Π° Π½Π΅Π³ΠΎ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ctrl+1. Вуаля, ΠΌΡ‹ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ мСстС CSS Ρ„Π°ΠΉΠ»Π°.

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. yac51vfjrfafz6kmuqiyznrl4ou. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-yac51vfjrfafz6kmuqiyznrl4ou. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° yac51vfjrfafz6kmuqiyznrl4ou. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

Ну ΠΈ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π΄ΠΎΡ‡ΠΈΡ‚Π°Π» Π΄ΠΎ этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΏΠΎΠΊΠ°ΠΆΡƒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π΅ Ρ‚Π°ΠΊ просто, Π½ΠΎ ΠΎΠ½ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚ΠΎΠ³ΠΎ стоит.

Π—ΠΎΠ²ΡƒΡ‚ Π΅Π³ΠΎ Tag ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π°ΠΌ придСтся Π΅Π³ΠΎ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. По этой ссылкС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π°Ρ€Ρ…ΠΈΠ² с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ. Π”Π°Π»Π΅Π΅ распаковываСм Π² ΠΎΡΠΎΠ±ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. Для Windows 10 это C:\Users\[ΠŸΠΎΠ΄ΡΡ‚Π°Π²ΡŒ своС имя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ]\AppData\Roaming\Sublime Text 3\Packages. Π”Π°Π»Π΅Π΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Sublime ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ снова ΠΈ добавляСм горячиС клавиши ΠΎΡ‚ΠΊΡ€Ρ‹Π² Preferences – Key Bindings ΠΈ дописав ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π“Π΄Π΅ ctrl+` это ΠΈ Π΅ΡΡ‚ΡŒ нашС сочСтаниС клавиш.

Π˜Ρ‚Π°ΠΊ, для Ρ‡Π΅Π³ΠΎ ΠΆΠ΅ ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Π»ΠΈ вСсь этот Π½Π΅Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΡƒΡ‚ΡŒ? Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π² процСссС написания, ΠΊΠΎΠ΄Π° ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ сначала с HTML ΠΏΠΎΡ‚ΠΎΠΌ пСрСносим названия классов Π² CSS ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ ΡƒΠΆΠ΅ Ρ‚Π°ΠΌ. Π’Π°ΠΊ Π²ΠΎΡ‚ этот пСрСнос Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ давольно Π΄ΠΎΠ»Π³ΠΎ. И Ρ‚ΡƒΡ‚ Π½Π°ΠΌ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Tag. БСйчас Π½Π°ΠΌ достаточно Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ HTML ΠΊΠΎΠ΄, Π½Π°ΠΆΠ°Ρ‚ΡŒ нашС сочСтаниС клавиш ctrl+`

sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. csfnbfe6u ph5lplp7di2enc2wo. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Ρ„ΠΎΡ‚ΠΎ. sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°-csfnbfe6u ph5lplp7di2enc2wo. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° sublime text Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° csfnbfe6u ph5lplp7di2enc2wo. Π£ мСня ΠΏΠ»ΠΎΡ…ΠΎ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, которая автоматичСски ΠΏΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ HTML-ΠΊΠΎΠ΄ Π² Sublime Text 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»Π΅Π³Ρ‡Π΅ читался?

ΠΈ ΠΏΠΎΡ‚ΠΎΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ копирования Π² наш CSS ctrl+v.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

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

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