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.

Правопис

Bulgarian - Code Speel Checker File >> Preferences >> Settings ● В лентата за търсене пишем : cSpell.language ● Променяме от us на bg,us ● от зъбното колело >> 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

convert indentation to tabs

convert indentation to tabs ● (Ctrl + ,) >> в лентата за търсене пишем (editor.insertSpaces) >> махаме отметката ● от зъбното колело >> 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