НАИПОЛНЕЙШИЙ ГАЙД - программисту
Шаг 1. Скачайте VS code.
https://code.visualstudio.com/
Нажимайте буквально на одну синюю кнопку скачивания где-то по центру вашего экрана (ну и там написано, что у вас будет скачана версия на Винду или другую ОС, с которой вы сидите).
Шаг 2. Установите VS code.
Просто жмите далее далее далее... не забудьте проставить все галочки, которые вы сможете найти по пути. К примеру вот эти:
Установили? Молодцы, вот вам печенька! 🍪
Шаг 3. Запустите VS code.
А хотя когда установка завершится, вроде бы должна быть опция запустить сразу... если нет, проверьте свой рабочий стол - там должна быть заветная иконка:
Шаг 4. Первый запуск VS code.
Так открыли? Давайте установим русский язык сначала, потом начните ознакамливаться с интерфейсом редактора.
Вот вы запустили ВС код, и слева должны быть иконки, расскажу о них коротко по порядку:
- Типа бумага (файлик) - Все файлы в той директории, в которой вы находитесь через редактов
- Лупа - для поиска (хз чего, никогда не пользовался)
- Крутая иконка - встроенная система git. Прочитайте тут.
- Жучок - очень удобный встроенный инструмент отладки кода. Debugging
- Четыре квадрата, но один оторвался - то что нам нужно
Это - главная, как по мне, причина, почему VS Code такой крутой текстовый редактор. Это - вкладка с расширениями. Нажмите на неё, в поиск вбейте:
russian
ну короче там в самом верху поиска должно быть, как на картинке, Russian Language Pack for Visual Studio Code. Нажмите инсталл, там вот на картинке кто-то курсор туда навел и нажал. Программа попросит перезапуститься - разрешите, и кажется теперь у вас всё (или почти всё) должно быть на русском.
Код, к сожалению, до сих пор придётся писать на английском (ну типа).
Полазайте теперь по интерфейсу, прочтите там сям, может там на главном экране предлагается какой-то начальный туториал пройти, чтобы ознакомиться получше с интерфейсом - делайте что говорят, думаю это полезно. А можете и не делать.
Шаг 5. Другие расширения.
Так, давайте скачаем другие расширения.
Обратите внимание, что к названиям расширений я предлагаю название автора расширения - сверьте и название расширения, и имя автора, чтобы оба совпали.
Так как я себя считаю крутым программистом, то вот какие у меня примерно стоят расширения:
- Python от Microsoft - для питона
- Pylance от Microsoft - хз точно, но какое-то полезное расширение, идущее рука об руку с Python
- HTML CSS Support от ecmel - смотрите, когда в поиск будете вбивать, там первее будет почти такое же расширение, но перечеркнутое и оранжевое. Короче его не надо устанавливать (так как оно перечеркнутое). То что вам надо - второе в поиске.
- Intellisense for css чето чето от zignd - короче, когда вы вбивали в поиск расширений html css support, это должно было быть третьим в поиске. Тоже установите
- Live server от Ritwick Dey - каждый раз, когда будете писать свой крутой сайт, сможете запускать этот сайт сразу, чтобы параллельно наблюдать за изменениями, на локальном сервере.
Когда всё скачаете, перезапустите VS code как хорошая профилактическая мера.
Шаг 6. Создайте папку где-нибудь.
Можете, кстати, на рабочем столе - почему нет. Назовите её точно так, как снизу (можете скопировать, чтобы не ошибиться, но проверьте на всякий случай на отсутствие лишних пробелов в начале и конце, важно не ошибиться):
Оттацитил программирование
Эта папка будет хранилищем всех ваших детищ - ну проектов ваших, сайтов.
Шаг 7. Откроем папку для проектов в VS code.
Теперь перейдите в VS Code, нажмите на Файл (File) в верхнем левом углу (должно быть сразу справа иконки вс кода). Выберите из контекстного меню Открыть папку..., и в открывшемся Проводнике, найдите свою свежесозданную папку, перейдите туда короче, и ну в общем, нажмите "Открыть" (кнопка в открывшемся проводнике, рядом с Отмена).
Если чувствуете себя конкретно программистом - могли бы вместо вышеописанной процедуры (Файл -> Открыть...) сделать то же самое следующей последовательностью:
Ctrl + K
Ctrl + O
И вам бы открылся тот же Проводник.
Шаг 8. Создайте файл в своей папке.
Когда вы нажали тогда ещё (в седьмом шаге) кнопку "Открыть" в Проводнике, у вас интерфейс должен быть примерно такой (хотя бы его верхняя левая часть):
Нажмите на ОТТАЦИТИЛ ПРОГРАММИРОВАНИЕ (у меня вон на скрине, правее лупы, линия). На этой линии появятся следующие иконки:
- Создать новый файл в данной директории
- Создать новую папку в данной директории
- Обновить Проводник
- Закрыть все открытые директории в Проводнике
Ух как серьезно-то, не ожидал от себя. Ну короче жмите на создать новый файл, назовите его (важно):
tacit.html
И бахайте энтер. Юху, минус два, теперь у вас есть свой первый сайт! Ща его запустим.
Шаг 9. Запуск веб-сайта на локальном сервере
Если до этого моменты вы ничего не напороли, то вот так должно выглядеть (примерно) ну, ваш интерфейс:
Порра писать код!!! Напишите следующее:
<h1 style="color: blue">ТАЦИТ</h1>
Красиво, реально. Я даже слезу пустил. Нажмите Ctrl + S, сохраните ваше чудо.
Давайте же теперь увидим сам сайт. В нижнем правом углу, кроме всего прочего, должно быть Go Live (может у вас на русском написано кстати говоря, но думаю навряд ли).
Вон оно у меня, ещё с такой антеннкой раздающей по круговому диапазону волны. Нажимайте на Go Live. У вас (после недолгой задержки) должен сразу в браузере открыться веб-сайт следующего содержания:
Блин, у меня тацит получился каким-то маленьким. Надеюсь у вас он получился больше.
Шаг 10. Юбилей!
Уже десятый шаг! Прочитайте мою статью про черноногих кошек и леопардов.
Шаг 11. Небольшой совет для удобства.
Просто можете скопировать мои настройки:
{
"editor.inlineSuggest.enabled": true,
"files.autoSave": "onWindowChange",
"editor.formatOnSave": true,
"editor.detectIndentation": false
}Как их вам вставить у себя: нажмите на тот Файл (File) который сверху слева, выберите Предпочтения (хз как оно перевелось на русский, смотрите короче вон по скрину), и там Настройки (у меня Settings)
И нажмите на то что я указал выше. Откроются ваши личные настройки в формате json. Кстати, наверняка у вас там пока пусто, так как у вас ещё нет личных настроек. Скопируйте и вставьте мои, сохраните файл (Ctrl + S), и можете закрывать его.
Шаг 12. Ну вроде всё
Ну реально всё, вы теперь можете заходить в любую кафешку, доставать свой лептопчик (соболезную если у вас стационар), покупать кофе в красивой чашечке, садиться за стульчик (или диванчик), включать VS Code, открывать tacit.html, и писать туда что-то с умным видом (писать можно и не особо умное, главное - подача)
Осторожно: повышенные риски быть замеченным каким-то агенством по найму программистов, и быть предложенным устроиться на работу программистом.