Здравейте приятели! Поради масовото търсене актуализирах ръководството за бързо настройване на редактора на кодове Възвишен текст 3, инсталиране на добавките, необходими за оформлението и създаване на ваши собствени предварително зададени настройки за бърз старт на ново работно място.

Готино

заеквам

Вероятно сте запознати със ситуацията, когато трябва бързо да инсталирате и конфигурирате Sublime Text на ново работно място, за да работите по нови проекти. като правило, фина настройка Sublime Text отнема много време и да го правите всеки път не е практично и отнема много време.

Днес ще разгледаме колкото е възможно повече бърза настройка Sublime Text, най-популярните плъгини сред дизайнерите на оформление за ускоряване на дизайна, и ние ще инсталираме една от най-добрите и удобни теми за редактор Една тема за тъмен материал.

По подразбиране Sublime Text изглежда доста тъжно:

Първо трябва да конфигурирате Контрол на пакета. За да направите това, натиснете клавишната комбинация Ctrl+Shift+P. В изскачащия прозорец въведете Install Package Control и изберете съответния елемент. След няколко секунди Package Control ще бъде инсталиран и ще получите известие за това.

Ако сте потребител на MacOS, трябва да натиснете Cmd+Shift+P на клавиатурата.

Контролът на пакета е необходим, за да можете да инсталирате добавки и плъгини в Sublime Text 3 от хранилището на пакети.

Инсталиране на добавки в Sublime Text

След това трябва да инсталирате плъгините, необходими за работата. Ще разгледаме инсталирането на най-популярните плъгини сред програмистите, които значително опростяват разработката. Можете също да експериментирате с други добавки в Package Control, може да харесате други от огромния брой налични пакети.

За да инсталирате добавки в Sublime Text чрез Package Control, трябва да извикате менюто, както направихме по-рано: Ctrl+Shift+P. След това въведете командата „Инсталиране на пакет“ и изберете желания пакет от списъка.

Най-популярните плъгини за Sublime Text:

• Емет- ускорява писането на HTML и CSS код до скоростта на светлината. Урок за Емет ;
• AutoFileName- допълва кода при писане на пътища към файлове в оформлението;
• Същност- позволява на Sublime Text да използва услугата GitHub Gist кодов фрагмент. Основен урок;
• дързък- плъгин за подчертаване на Sass синтаксиса в Sass и Scss файлове. Разширява Emmet в Sass файлове.

Инсталиране на кожата на Sublime Text

Много ми харесва темата Една тема за тъмен материали подчертаване на кода в подходящата цветова схема. Това са най-балансираните, доста контрастни, но не прекалено сурови цветове за удобна работа в редактора.

За да инсталираме цветовата схема One Dark, трябва да инсталираме следните пакети чрез Package Control:

• Една тъмна цветова схема- цветова схема за подчертаване на кода;
• Един тъмен материал - тема- UI Sublime Text тема.

Ръчно инсталиране на приставката

Някои добавки вече не се актуализират в Package Control или просто не се показват там. Някои от тези добавки са жизненоважни при работа с код и трябва да се инсталират ръчно.

Един от тези плъгини BufferScroll- невероятен плъгин, който, когато отворите отново документ, поставя курсора на мястото, където сте завършили редактирането последния път, като по този начин намалява времето, необходимо за намиране на правилната позиция за продължаване на работата.

За да инсталирате BufferScroll ръчно, отидете на страницата на GitHub на плъгина, изтеглете го и го разархивирайте на всяко удобно място на вашия диск. След това в Sublime Text изберете елемента от менюто Предпочитания > Преглед на пакети. Това ще отвори папката с потребителски данни на вашето устройство. Копирайте папката, съдържаща файловете на Buffer Scroll тук, и рестартирайте Sublime Text. Сега плъгинът работи.

Фина настройка на редактора, предварително задаване на моите настройки

Нека да преминем към настройките на Sublime Text.

Представям предварително зададените си настройки, които винаги използвам за начални настройки Sublime Текстов редактор на ново работно място или след преинсталиране на системата. Можете да използвате тази предварителна настройка във вашия редактор и да я персонализирате, ако е необходимо:

Клавишна карта (потребители на Windows): [ ( "клавиши": ["alt+shift+f"], "команда": "reindent"), ] Настройки: ( "show_definitions": false, "auto_complete": false, "bold_folder_labels" : true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active"], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab" true, "tab_syize" : 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )

Предварително зададен код за потребителски настройки (Preferences.sublime-settings | Preferences > Settings) - отделно:

( "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13 , "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true , "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )

Предварително зададен код за персонализирани клавишни комбинации (По подразбиране (Windows).sublime-keymap | Предпочитания > Клавишни връзки) - отделно:

[ ("клавиши": ["alt+shift+f"], "команда": "отстъпка"), ]

Сега, когато е избрано и натиснато Alt+Shift+Fвашият код ще бъде автоматично отстъпен със съответната йерархия на влагане на елементи.

Като поставите тези фрагменти в съответните файлове с настройки, ще получите напълно готов за работа персонализиран Sublime Text или можете да персонализирате редактора за себе си. В настройките има две полета - лявото с настройки по подразбиране и дясното с потребителски. В настройките по подразбиране можете да видите подсказки за всяко свойство и да го приложите от дясната страна, като копирате и зададете стойността си.

Да разберете кое свойство е отговорно за какво е доста просто - всички свойства имат интуитивни имена английски. Всяка собственост от голямото разнообразие от налични настройки може просто да бъде преведена на руски и вие можете да разберете какво означава.

За да направите резервно копие на всички ваши настройки и бързо да внедрите Sublime Text на друго работно място, просто копирайте папката

"C:\Users\(Вашият потребител)\AppData\Roaming\Sublime Text 3"
в тайното място резервно мястона вашия диск или флаш устройство и след това го поставете на друг потребител или на друг компютър в същата директория под потребителя.

Също така по ваша преценка можете да деактивирате миникартата вдясно и да скриете менюто. Това може да стане, като отидете на View > Hide Minimap и View > Hide Menu. Можете да покажете менюто, като натиснете клавиша Ctrl на клавиатурата.

Добавките за Sublime Text са написани на Python. Самият език е много прост и ако сте програмист, тогава няма да ви е трудно да го научите. Ако не, тогава също няма значение, тъй като най-вероятно плъгинът вече е написан за вашата задача.

Инсталиране на добавки в Sublime Text

включено в моментаИма два метода за инсталиране на добавки в програмата:

1. Варварски. Просто изтеглете необходимия плъгин от интернет и го пуснете в съответната папка. Но това не е правилен метод, така че няма да се спираме на него.
2. Чрез Sublime Package Control

Преди да започнете да инсталирате добавки, трябва да инсталирате Sublime Package Control, прочетете за това.

За да инсталирате плъгини ви трябва:

1. отворен команден редчрез натискане на клавишната комбинация: ctrl+shift+p ;
2. в реда въведете Install Package и натиснете enter;
3. Най-отдолу в полето, което се отваря, въведете името на плъгина, например: emmet;
4. натиснете enter и изчакайте инсталацията да приключи, там ще се появи екран с куп редове;
5. Готови.

(вижте инструкциите на 3 екранни снимки)

Няма особен смисъл да говорим кои плъгини са популярни и кои не, тъй като Sublime е написан на няколко десетки езика за програмиране и всеки език има свои собствени плъгини.

Но тъй като повечето хора, които избират този редактор, пишат на PHP, все пак ще разгледаме няколко.

Възвишен текст Емет

Малко по-рано в примера инсталирахме този плъгин. Това значително ускорява развитието на уебсайта. За да разберете какво прави в долния десен ъгъл, вместо Plain Text изберете PHP. Сега го поставяме в редактора! и натиснете TAB.

Можете също така да въведете: .wrapper, натиснете tab, както виждате, имаме div.

За да направите меню с 10 връзки, можете да напишете следното и след това да натиснете tab: .menu>ul>li*10>a(menu_$)

От лявата страна “!+tab”, в централната част “.wrapper + tab”, а от дясната страна “menu>ul>li*10>a(menu_$) + tab” Мисля, че разбрахте.

Разширен нов файл

Позволява ви да създавате нови файлове. Инсталираме плъгина, отваряме дясната странична лента (изглед – странична лента – показване на странична лента), след това натискаме клавишната комбинация ctrl+alt+n и пишем index.php, както виждаме, че файлът е създаден и това е много бързо и удобно.

Осветител за скоби

По подразбиране, ако стоим, например, на някакъв div, тогава е много трудно да забележим затварящия таг, тъй като той е подчертан твърде слабо. Осветител за скоби.

Цветен хайлайтър

Той предлага цвета на кода, тоест по подразбиране не ни е ясно какъв цвят ще бъде кодът #224f43​, но плъгинът подчертава кода с цвета, който е. Освен това, ако щракнем върху кода, той ще го маркира с този цвят.

Gotocss декларация

Помага ви да намерите и да отидете на правилния css елементнаправо от html код. Просто трябва да щракнете с десния бутон върху елемента, към който се прилага този стил и да изберете Go To CSS Declaration

Отидете на официалния уебсайт на Sublime Text в секцията за изтегляне и изтеглете най-новата версияпрограми за вашите операционна системаИзтеглих 64-битовата програма. Стартираме го и проверяваме дали всичко работи. Между другото, програмата не е безплатна и ако не закупите ключ, тогава няма ограничения, освен надписа „нерегистриран“ в заглавието и ненатрапчив изскачащ прозорец с предупреждение след определен период от време (веднъж на половин час - час).

Да инсталираме русификатора

Разопаковайте изтегления архив и копирайте всички файлове с разширение .sublime-menu (с изключение на папката "backup") в една от следните папки (в зависимост от вашата операционна система):

Ако няма папка "По подразбиране" на посочения път, тогава трябва да я създадете.

Нека настроим автоматичен нов ред

Отворете Предпочитания → Настройки - По избор

Добавете следния ред:

"word_wrap": вярно

Борба с кодирането във файловете

Нека повторим Предпочитания → Настройки - Персонализирани. Трябва да се смени

"fallback_encoding": "Западен (Windows 1251)",

към този ред:

"fallback_encoding": "Кирилица (Windows 1251)",

Инсталиране на Package Control

Package Control е необходим за разширяване на функционалността на редактора Sublime Text 3 с различни добавки.

Отидете на уебсайта и вижте инструкциите за инсталиране. Или отидете в редактора, натиснете клавишите: Ctrl + ~, в командния ред, който се появява, въведете следната инсталационна команда:

импортиране на urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "Пакет Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Грешка при валидиране на изтеглянето (получи %s вместо %s), моля, опитайте ръчно инсталиране" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb" ).write(by)

Задаване на цветови схеми

Натиснете отново Ctrl+Shift+P и напишете daylerees - теми.

Допълнително

За достъп до FTP трябва да инсталирате "SFTP"

Друга интересна функция е "Goto-CSS-Declaration". Когато щракнете върху клас, той показва този клас във стиловия файл.

Междуплатформен текстов редактор.

Кратко ръководство за начинаещи за работа в sublime и в областта на оформлението. Тук са събрани всички най-необходими и важни неща. (Следвайте връзките, за да намерите повече, ако е необходимо)

Ще го разгледаме за Layout на Pug / Less, където не се нуждаем от огромна функционалност за отстраняване на грешки. Следователно този конкретен редактор (по мое мнение) побеждава своите конкуренти както по скорост, така и по функционалност.

1. Инсталиране на програмата и контролиране на добавките (Package Control)

1. Инсталирайте Sublime Text 3. Тук всичко е просто - изтеглянеи стартиране.

Тук можем да изтегляме, инсталираме, изтриваме, преглеждаме добавки и т.н.

2. Настройки на програмата:

1. Използваме интервали вместо раздели.
   "translate_tabs_to_spaces": вярно
2. Размерът на раздела е 4 интервала.
   "tab_size": 4

   Защо, питате вие?
   За да не натиснете случайно интервал и табулатор заедно и да счупите сглобката на мопса.
   А също и за еднаквост на работа в екипа.

3. струни не трябвазавършват с празни знаци.
   За целта използваме плъгин TrailingSpaces .

- Може би тук свършват задължителните настройки на MustHave. Нека да преминем към отделните:

1. Режим на цял екран F11 + скриване на панела с менюта (alt).Позволява ви да използвате максимално монитора за работа и да не се разсейвате от състоянието на OS панела.
2. Забрана за прекъсване на редове.Вероятно най-добрият имот от изброените. Предотвратява объркване в синтаксиса на pug. Винаги показва очаквания код и влагане, независимо от размера на екрана. Хоризонталното превъртане се извършва чрез shift + колело (или сензорен панел)
   "word_wrap": "false"
3. Теми.Не мога да кажа нищо по този въпрос. Просто намерете това, което ви харесва (за предпочитане използвайте тъмна схема). Използвам „тема“: „Material-Theme-Darker.sublime-theme“.
4. Осветяване на синтаксиса.Е, мисля, че тук не би трябвало да има проблем. Ако се уверите, че разширяването и подчертаването съвпадат (Мопс за Мопс, а не Нефрит за Мопс)
5. Изглед → Странична лента → Скриване на отворени файлове- Освобождава място за дървото на проекта. Тъй като това поле вече е дублирано с раздели и три точки в горната част

3. Полезни клавишни комбинации:

1. В първия параграф ще кажем, че ще пропуснем всички стандартни комбинации, като напр ctrl(⌘) + Z(⌘ - по-нататък просто ctrl). Отказ, запазване, повторение, затваряне на раздела, раздел за възстановяване и т.н.
2. Може би следващото нещо популярна комбинациятова:
   crtl + P- Позволява ви да търсите във файловете на вашия отворен проект. Позволява ви да се отървете от огромното дърво на отворени стилове.
3. Следващи по важност:
   ctrl + D- Търсене на копия на избран текст. Идеален за мултиредактиране. И за търсене на дубликати. Особено в по-големи файловеи големи фрагменти. За мулти-курсор задръжте ctrl и използвайте мишката.
4. ctrl + L- Избира целия ред и ви позволява да го изтриете напълно. Работи добре заедно с ctrl+D.
5. Търсене...Е, може би първото нещо е ctrl+F - търсене на файлове. Второто и по-важно нещо е да търсите в папка за множество файлове ctrl + shift + F (Можете да го извикате, като щракнете с десния бутон върху папката и изберете „Намиране в папка...“) Съветвам ви да не включвате „ Famous Fat Man” папка в търсенето
6. ctrl + shift + нагоре/надолу- Премества ред нагоре/надолу (разменя ги). Удобен за работа със стилове и променливи.
7. Сега малък урок по комбинации от клавишни комбинации. Вероятно сте виждали тези комбинации, разделени със запетаи. Така че видях... и сега знам как да ги използвам. За да направите това, натиснете тези комбинации на свой ред (не е нужно да пускате общия клавиш за мод)
   Ето някои полезни:
8. ctrl + K, ctrl + 4- Скрива всички клонове, чието влагане е по-голямо от 4. Подобно на стрелката за свиване. ( ctrl + K, ctrl + J- разгръща всичко, което е)
9. ctrl + K, ctrl + B- Скрива/показва страничната лента. (работи добре с F12)

Което ви позволява да проверите кода си за синтактични грешки. Допълнително предоставени прости инструкцииза да превърнете редактора в пълноправен IDE за уеб разработка.

ВНИМАНИЕ! Статията описва настройката на Sublime Text 3 (наричан по-долу ST3) в Windows 7.

1. Нека си представим, че вече сте инсталирали ST3 на вашия Win 7 и сте инсталирали Package Control.

2. Сега трябва да инсталирате допълнителни пакети в ST3. Да отидем на Предпочитания -> Контрол на пакети -> Инсталиране на пакети
И инсталирайте следните пакети:

• SublimeLinter
• SublimeLinter-html-подреден
• SublimeLinter-csslint
• SublimeLinter-jsl
• SublimeLinter-jshint
• SublimeLinter-php
• SublimeLinter-phplint
• JSHint

3. Настройте проверка за грешки в синтаксиса на HTML
3.1. Изтеглете и го поставете във всяка папка, която искате.
3.2. Добавете пътя към тази папка! от tidy.exe към сървърната променлива потребител на windows(PATH), чиито настройки се намират в My Computer -> Properties -> Допълнителни опциисистеми -> Променливи на средата... -> Изберете променливата “PATH” -> Щракнете върху “Edit” и добавете пътя.
ВНИМАНИЕ! Обърнете внимание на точка и запетая ";" след всеки път и не забравяйте да го напишете, а също така обърнете внимание на обратната наклонена черта.

4. Настройте проверка за грешки в синтаксиса на CSS
4.1. Изтеглете и инсталирайте node.js
4.2. Добавете пътя към папката (към папката!) с node.js в PATH (пътят е приблизително следният: C:\Users\User_name\AppData\Roaming\npm)! Не забравяйте за точката и запетая.
4.3. Инсталирайте csslint. За да направите това, изпълнете командата Windows низот името на администратора и напишете: npm install -g csslint

5. Настройване на проверка за синтаксис на JavaScript
5.1. Ако не сте изпълнили точки 4.1. и 4.2. - правим това.
5.2. Инсталираме jslint и jshint, за да направим това, извършваме същата операция като в параграф 4.3. Просто пишем съответно jslint и jshint вместо csslint.

6. Настройка на проверка за грешки в синтаксиса на PHP
6.1. Не за php в компилацията на Denwera!
6.2. (АКТУАЛИЗАЦИЯ) Факт е, че много (включително и аз) като локален сървърпоставиха себе си Denwer. И Бог знае защо (не навлязох в подробности), но PHP на Денвър не се приема от ST3, за живота ми. Той може да извежда PHP грешки към ST3 конзолата, но все още няма да има подчертаване на синтаксиса.
P.S. Изрично добавих тази точка, защото... в много форуми пишат, че инсталирайте PHP, конфигурирайте ST3 пакети и ще бъдете щастливи. Но щастието не се случва, защото... Елементът с инсталирането на PHP обикновено се пропуска незабавно поради надеждата за производителността (пригодността) на denwer.
6.3. Затова веднага отиваме тук и изтегляме PHP. Инсталиране на PHP - просто разархивирайте архива във всяка папка и напишете пътя до тази папка в PATH (раздел 3.2.)
6.4. Ако сте имали път към папката Denver PHP, регистриран във вашия PATH, не забравяйте да го изтриете.
7. Конфигурационен файл SublimeLinter.sublime.settings

НЕОБХОДИМО Е ДА СЕ КОРИГИРА ПЪТЯ ДО tidy.exe и php.exe

( "user": ( "debug": true, "delay": 0.25, "error_color": "D02000", "gutter_theme": "Packages/SublimeLinter/gutter-themes/Circle/Circle.gutter-theme", "gutter_theme_excludes ": , "lint_mode": "фон", "linters": ( "csslint": ( "@disable": false, "args": , "грешки": "", "изключва": , "ignore": " ", "предупреждения": "" ), "hlint": ( "@disable": false, "args": , "excludes":), "htmltidy": ( "@disable": false, "args": , "изключва":), "jscs": ( "@disable": невярно, "args":, "изключва":), "jshint": ( "@disable": невярно, "args":, "изключва": ), "jsl": ( "@disable": false, "args": , "excludes": ), "php": ( "@disable": false, "args": , "excludes": ), "phplint ": ( "@disable": false, "args": , "excludes": )), "mark_style": "outline", "no_column_highlights_line": false, "passive_warnings": false, "paths": ( "linux" : , "osx": , "windows": ), "python_paths": ( "linux": , "osx": , "windows": ), "rc_search_limit": 3, "shell_timeout": 10, "show_errors_on_save": false, "show_marks_in_minimap": true, "sublimelinter": true, "sublimelinter_executable_map": ( "css": "node", "html": "Z:\\usr\\bin\\tidy.exe", //път към вашата папка с tidy.exe, обърнете внимание на двойните обратни наклонени черти, те са задължителни "php": "C:\\Program Files\\PHP_5.6\\php.exe" //път към вашата папка с php.exe ), "syntax_map": ( "css": "css", "html (django)": "html", "html (rails)": "html", "html 5": "html", "js": " js", "php": "php", "python django": "python"), "warning_color": "DDB700", "wrap_find": true ) )

8. Рестартирайте Sublime Text
Случва се някои хора да забравят за режима за отстраняване на грешки на Sublimelinter. За да го активирате, щракнете с десния бутон някъде в областта за редактиране ST3 -> SublimeLinter -> Режим на отстраняване на грешки