ym104432846
Вставьте ссылку на видео из Youtube, Rutube, VK видео
Задайте вопрос по видео
Что вас интересует?
00:00:00
Установка и настройка VS Code:
  • VS Code – лучший редактор кода для веб-разработки
  • Бесплатная доступность VS Code на macOS, Windows и Linux
  • Расширение "Prettier" для форматирования кода установлено более 12 млн раз
  • Prettier автоматически форматирует код при сохранении
  • Автоматическое сохранение файлов при изменении фокуса
  • Размер табуляции установлен равным 2 пробелам
  • Цветовая тема "One More Dark" меняет цвета редактора и кода
  • Тема с иконками файлов для визуального оформления
0: Теперь, прежде чем мы сможем начать писать хотя бы 1 строку кода, нам сначала нужно установить специальный инструмент, который называется редактор кода, а редактор кода это, по сути, специальное программное обеспечение, которое позволяет нам писать программный код, такой, как
1: Си очень простым способом. И поскольку этот курс, вероятно, является вашим 1 знакомством с любым программированием в этом видео, я расскажу вам об установке самого лучшего редактора кода в мире.
2: А затем я также покажу вам, как немного настроить его с помощью некоторых специальных настроек, цветовых тем и расширений.
3: А редактор кода, который мы будем использовать в этом курсе, называется visual studio code от microsoft microsoft и, как я только что сказал, по моему мнению и мнению многих других разработчиков, это самый лучший редактор кода для веб разработки в мире.
4: Так что на самом деле каждый разработчик, которого я знаю сейчас использует этот редактор кода, так что вы также не ошибётесь, если будете использовать vs code, так что чтобы загрузить его, просто зайдите в code with стадио датком или чтобы сделать это ещё проще.
5: Вы можете просто погуглить vs code, и тогда это будет тот самый 1 результат, и, конечно же, vs code доступен бесплатно для всех существующих платформ. Итак, макос, виндоус и линукс и.
6: Поэтому, пожалуйста, просто продолжай прямо сейчас и скачай установщик для своей собственной системы, а затем установи программу на свой компьютер точно так же, как любую другую программу, а затем, как только ты закончишь это делать, просто вернись к этому видео, чтоб
7: Мы могли немного настроить свой редактор.
8: Хорошо, я надеюсь, что тебе удалось установить visual studio code или vs code, как мы его ещё называем, на свой компьютер. Как только ты откроешь редактор кода, он должен выглядеть примерно так и, как я уже говорил ранее.
9: Сейчас мы немного настроим версус коуд, чтобы тебе было легче следовать этому курсу, и начнём мы с установки расширения, а расширение для vs code это, по сути, всего лишь небольшая часть функциональности, которую мы можем загрузить.
10: И которая делает редактор немного лучше. Таким образом мы можем настроить редактор в соответствии с нашими потребностями. Так что ты можешь думать об этом немного как о расширениях google кроум, например, так что это та же концепция и то, что мы Собира.
11: Установить сейчас называется приди так что просто найдите красивее и, вероятно, это будет 1 результат, потому что приди чрезвычайно популярное расширение, как вы видите на данный момент.
12: Его скачали более 12000000 раз, так что просто продолжай и нажми установить здесь, а затем включи его, и, вероятно, после этого тебе также придётся перезагрузить это окно vs code теперь это расширение автоматически фо.
13: Матирует ваш код всякий раз, когда вы его сохраняете, и это будет очень важно, чтобы ваш код всегда выглядел точно так же, как код, который я набираю в видео, потому что таким образом вам будет намного легче его найти. Любые ошибки или недочёты, которые есть в вашем собственном.
14: Code. Так тебе будет легче находить ошибки и исправлять их по мере просмотра видео. Хорошо. На данный момент это будет единственное расширение, которое мы
15: Собираемся установить. Мы просто установим ещё несколько чуть позже, в следующем разделе. Так что теперь давайте перейдём к этому значку настроек, а затем выберем настройки отсюда, чтобы мы могли настроить пару параметров.
16: И давайте начнём с 2 настроек, которые связаны с более красивым расширением, которое мы только что установили. Так что просто зайдите сюда в строку поиска. Так что поиск по названию настроек на самом деле самый простой способ их найти.
17: Так что просто введите здесь средство форматирования по умолчанию. И вот здесь нам действительно нужно установить значение красивее, так что у меня, конечно, уже есть этот набор, но тебе придётся просмотреть этот список и найти красивее, где
18: Нибудь здесь файн придир само хир.
19: Так что это прямо здесь, так что выбери более привлекательный форматировщик кода, и это должен быть этот. Э, придя в vs code хорошо и теперь vs code знает, что для for.
20: Форматирование твоего кода следует использовать более привлекательное расширение, которое мы только что установили. А теперь скажи, когда на самом деле следует форматировать твой код? Ну что же, нам нужно установить для этого другую настройку, а именно формат при сохранении
21: Он сейф. Так вот, значит, что это здесь и здесь. Тебе нужно установить этот флажок, чтобы программа, приди автоматически форматировала твой файл каждый раз, когда ты его сохраняешь.
22: Хорошо, ещё 1 очень важная настройка это автоматическое сохранение, так что для автоматического сохранения нам нужно установить значение при изменении фокуса. Это позволит автоматически сохранять файлы при переходе на другую вкладку или при полном закрытии.
23: Окна. Это очень важно для того, чтобы вы никогда не теряли свои правки, и чтобы вам не приходилось постоянно сохранять файлы вручную. Так что снова установите этот параметр в положение. Включить изменение фокуса.
24: Ещё 1 вариант, который мне нравится использовать, но я не уверен, что он уже используется по умолчанию. Это установить размер вкладки равным 2 ту, так что в данном случае это просто повторение, чтобы ваш код выглядел точно так же, как мой код.
25: Таким образом, размер табуляции это по сути, просто отступ кода. Ты поймёшь, что это значит чуть позже, когда мы начнём писать html, а теперь окей, вот 4 параметра, которые нам нужно установить. Так?
26: То я думаю, с настройками у нас все в порядке, а теперь, наконец, давайте поговорим об этих цветах таким образом, в принципе, мы можем настроить vs code с помощью цветовой темы, которая затем изменит цвета самого редактора кода, а также самого кода.
27: Таким образом, различные части кода будут выделяться разными цветами. Теперь это зависит только от личных предпочтений. Так что вы можете просто использовать тему, которая уже автоматически поставляется по умолчанию в
28: Но я решил установить специальную тему, которая, как мне кажется, упрощает чтение кода таким образом, вам будет проще следовать этому курсу.
29: Так что цветовая тема это, по сути, просто ещё 1 расширение, которое нам нужно установить, и это расширение называется one more ночи.
30: Вот это самое 1 расширение здесь, и, как вы можете видеть, здесь, внизу, оно придаст нашему коду такие цвета, а также сам редактор vs code будет окрашен в синий цвет, который вы уже можете видеть здесь, в этом окне.
31: Так что если вы хотите использовать эту цветовую тему, чтобы ваш редактор выглядел точно так же, как у меня, тогда просто скачайте это расширение и установите цветовую тему, используя эту опцию здесь.
32: И, конечно, ты также можешь поэкспериментировать с некоторыми другими темами, нажав здесь, внизу, на значок настроек, а затем здесь, в разделе цветовая тема, ты можешь выбрать 1 из этих светлых тем или 1 из этих тёмных тем. Итак?
33: В vs code уже есть множество предустановленных тем, так что ты тоже можешь попробовать их, или если у тебя есть другие предпочтения, ты также можешь установить любую другую тему, которая тебе понравится, и на
34: Наконец, есть ещё 1 маленькая деталь тема с иконками файлов, так что на самом деле это не имеет значения, но я установил здесь эту опцию, так что соти. И ещё раз повторю если ты хочешь, чтобы твой редактор выгля.
35: Точно так же, как мой, ты также можешь выбрать эту опцию хорошо, на этом мы закончили настройку в vs code на данный момент. Итак, теперь ты действительно готов написать свою 1 строку кода именно это.
36: Мы и собираемся сделать в следующем видео, скоро увидимся.