Visual Studio Code

Отделям особено внимание на редактора, защото може да се ползва под Windows и Linux. Освен това поддържа множество плъгини помагащи при разработката на софтуер. Няколко линка: VS Code – установка и настройка. ТОП 5 плагинов. Редактор кода Visual Studio Code Настройка редактора, знакомство с версткой. Уроки по верстке сайта Портфолио HTML CSS

Разширения

Auto complete tag

Auto complete tag - Включва в себе си две разширения: Auto Close Tag - завършва тага, примерно отваряте <> то автоматично се дописва </> Auto Rename Tag - когато промените наименованието на отварящия таг то затварящия автоматично се преименува.

Сървър за HTML и PHP

Live Server (Five Server) - По добър е от чистия Live Server, защото този поддържа и PHP File >> Preferences >> Settings ● В лентата за търсене пишем : fiveServer.php.executable ● полето описваме пътя до php.exe (D:\nginx\php\php.exe) >> ● от зъбното колело >> Apply Settings to all Profiles. Така ще имаме отметка върху условието да се прилагат промените върху всички профили. Нататък тази операция няма да се прилага, за другите разширения или поправки.

След като разширението е инсталирано и настроено, долу вдясно има бутон Go Live. Чрез него автоматично се стартира браузъра по-подразбиране и може автоматично да опреснява промените по страницата. Напомням! следим да има отметка пред менюто Apply Setting to all Profiles. При Linux пътя е: /usr/bin/php вместо D:\nginx\php\php.exe.

Правопис

Bulgarian - Code Spell Checker File >> Preferences >> Settings ● В лентата за търсене пишем : cSpell.language ● Променяме от en на bg,en ● от зъбното колело >> Apply Settings to all Profiles

Форматиране на кода

Prettier - Code formatter ● Десен клавиш върху страницата или върху маркирания текст >> Format Document with ... >> избираме формата ● от зъбното колело >> Apply Settings to all Profiles

автоматично генерира стилови селектори въз основа на вашия HTML код

eCSStractor ● Клавишна комбинация () ● от зъбното колело >> Apply Settings to all Profiles

автоматично генерира стилови селектори въз основа на вашия HTML код

HTML to CSS / LESS / SCSS ● Клавишна комбинация (Ctrl+Alt+V) ● от зъбното колело >> Apply Settings to all Profiles

Допълнителни настройки

word wrap

word wrap ● (Ctrl + ,) >> в лентата за търсене пишем (word wrap) >> променяме на on ● от зъбното колело >> Apply Settings to all Profiles

TAB SIZE

TAB SIZE = 2 ● (Ctrl + ,) >> в лентата за търсене пишем (tab size) >> променяме на 2 ● от зъбното колело >> Apply Settings to all Profiles

TAB как да се държи

editor.insertSpaces В Visual Studio Code, настройката editor.insertSpaces е булева стойност (true или false), която определя какво се случва, когато натиснете клавиша Tab. • true (по подразбиране): Когато натиснете Tab, редакторът вмъква определен брой интервали (spaces) вместо реален таб символ. • false: Когато натиснете Tab, редакторът вмъква реален таб символ (\t). Тази настройка работи директно в комбинация с editor.tabSize, която определя колко интервала да се вмъкнат (когато е true) или каква да бъде визуалната ширина на таб символа (когато е false).

Два прозореца за редактиране

Натиснете Ctrl + \. Другия вариант е: горния десен ъгъл на активния таб (където са бутоните за затваряне и опции) кликнете върху иконата "Split Editor Right" (изглежда като разделен на две прозорец).

Премахване от левия прозорец OUTLINE и TIMELINE

С десен клавиш на мишката върху надписа и то премахваме като отметка.

Скриване пълния път до файла

Когато отворим даден файл за редактиране, най-отгоре има ред с пълния път. За да се скрие този ред: ● Отворете настройките с клавишната комбинация Ctrl + ,. ● В лентата за търсене най-отгоре напишете breadcrumbs. ● Намерете опцията Breadcrumbs: Enabled. ● Махнете отметката (изключете я).

Странична лента (Primary Side Bar)

За включване и изключване Ctrl + B

Лента с номерация на редовете

Скриване на индикаторите за сгъване на код (Folding Controls) Често лентата изглежда широка, защото в нея се заделя място за стрелките, с които се сгъват блоковете код (функции, цикли). Можете да ги направите видими само при посочване с мишката: 1. Отворете настройките с клавишната комбинация Ctrl + , (или File -> Preferences -> Settings). 2. В горното поле за търсене въведете: Editor: Folding Controls 3. Променете стойността от always на mouseover. Така стрелките ще се появяват само когато посочите мястото им, а лентата ще се стесни веднага. Скриване на лентата за глифове (Glyph Margin) Ако до номерата на редовете има празно пространство, в което се появяват икони за грешки (Breakpoints за дебъгване или индикатори от разширения), можете да го изключите: 1. В търсачката на настройките въведете: Editor: Glyph Margin 2. Премахнете отметката (изключете опцията). Промяна на стила на номерацията Ако сте включили опцията за „относителна номерация“ (която показва колко реда остават до текущия ред), тя понякога изисква повече място. Можете да я върнете към стандартната: 1. В търсачката на настройките въведете: Editor: Line Numbers 2. Уверете се, че е избрано on (а не relative или interval). Пълно скриване на номерата на редовете Ако лентата изобщо не ви е необходима и искате максимално чисто работно пространство, можете да я изключите напълно: * В настройката Editor: Line Numbers изберете off.