Speaker A
Привет. В этом видео мы настроим нашу рабочую среду, установим программу и поймём, почему стоит именно её использовать.
Полный курс по Visual Studio Code: установка, настройка интерфейса, плагины и работа с кодом для начинающих разработчиков.
Key Takeaways
- VS Code — мощная и бесплатная IDE с широкими возможностями и поддержкой плагинов.
- Выбор редактора зависит от личных предпочтений, а не от качества кода.
- Установка и настройка VS Code включает полезные опции для удобства работы, например, контекстное меню.
- Использование английской версии программы упрощает поиск решений и работу с плагинами.
- Git необходим для любого разработчика, и его стоит установить сразу.
Summary
- Обзор Visual Studio Code как интегрированной среды разработки (IDE) и сравнение с другими редакторами и IDE.
- Рекомендации по установке VS Code и важные настройки, включая добавление в контекстное меню проводника.
- Значение Git для программиста и советы по его установке.
- Обзор интерфейса VS Code: панели, вкладки, кнопки и основные функции.
- Причины использования английской версии программы для удобства поиска информации и работы с плагинами.
- Подробный разбор вкладок и функций редактора.
- Рассмотрение популярных плагинов, таких как сниппеты и Live Server, для ускорения разработки.
- Советы по работе с файлами, многооконному режиму и навигации по проекту.
- Настройка подсказок IntelSense для удобного написания кода на JavaScript.
- Практические советы по комментированию, многокурсорному редактированию и работе с большими проектами.
Chapters
- 00:00Введение и обзор VS Code как IDE
- 04:26Как открыть VS Code и работа с рабочими папками
- 08:32Почему лучше использовать английский язык в VS Code
- 12:44Работа с файлами и интерфейс редактора
- 16:22Обзор популярных плагинов и их установка
- 24:46Работа с подсказками IntelSense и настройка редактора
- 41:04Приёмы редактирования: комментирование и многокурсорный режим
- 60:17Навигация по проекту и работа с большими папками
Full Transcript — Download SRT & Markdown
Speaker A
E — это интегрированная среда разработки, то есть это программное обеспечение, которое объединяет инструменты для разработки приложений, а также их тестирование в одном интерфейсе. Я сейчас говорю конкретно про Visual Studio Code. Это не совсем редактор кода. Помимо этого, здесь можно
Speaker A
также пользоваться инструментами отладки. И поэтому эта программа считается IDE. Сейчас мне бы хотелось разобрать, какие ещё бывают программы, которые вы могли слышать, и в чём между ними разница. Вообще, какую программу выбрать, это решает каждый разработчик сам. И это скорее про вкусовые
Speaker A
предпочтения, чем про какое-то умение писать код. Потому что сам по себе программный код вы набираете в программе. И если вы хороший разработчик, то вы напишите грамотный код, что в Visual Studio Code, что в Sublime Text 3, что в WebStorm, например. Но
Speaker A
всё-таки давайте обсудим, почему некоторые выбирают WebStorm. Эта программа платная, и она предоставляет, по сути, тот же функционал, что VS Code, но только немножко в другом визуальном представлении. Некоторым разработчикам нравится именно этот интерфейс. Мне он не подходит, я его не очень люблю,
Speaker A
поэтому не использую. Повторюсь, глобальной разницы нет. И если вы будете использовать WebStorm, то это не означает, что вы будете писать более крутой и качественный код. Ваш код останется таким же. Просто визуально, возможно, вам станет более приятен этот интерфейс.
Speaker A
Но стоит учитывать, что программа опять же платная, но у неё есть и бесплатная версия, насколько я знаю, временная. Что касается Sublime Text 3, это текстовый редактор, и там можно верстать сайты, например, равно как и в VS Code или WebStorm, но вёрстка — это довольно
Speaker A
нетрудный процесс, и его чаще всего можно делать с лёгкостью в редакторе кода, таком, например, как Sublime Text 3. И не обязательно включать Visual Studio Code или WebStorm [музыка] для такого рода разработки. Хотя я верстаю в основном VS Code и проблем никаких не
Speaker A
испытываю. Это удобно, это быстро. У меня есть все плагины, которые могут помочь привёрстке. Поэтому тут выбор уже скорее по предпочтениям, но Sublime Text 3 — это упрощённая версия по сути, и она называется именно редактором, а не интегрированной средой разработчика.
Speaker A
Итак, давайте разберёмся, что нужно для работы VS Code. Ну, во-первых, его нужно скачать с официального сайта. Я не буду делать этот процесс, поскольку он довольно тривиальный. Вам нужно просто скачать программу, установить её под Windows или MacOS и пройтись по всем
Speaker A
пунктам, которые будут предложены в мастере установки. Однако мне бы хотелось отметить, что есть один нюанс при установке. Этот нюанс находится на последней части установки. Здесь я бы рекомендовал отметить два чекбокса, которые помогут вам добавить вкладку «Открыть с помощью Code» в контекстное
Speaker A
меню файла. В проводнике это очень удобная фишка. Например, если вы хотите открыть какую-то папку в Visual Studio Code, вы можете просто зайти в неё из-под вашей операционной системы, ну, как я сейчас, и нажав правой кнопкой мыши увидеть кнопку «Открыть с
Speaker A
помощью Code». Это действительно удобно и помогает быстро переключаться от одного проекта к другому. Также мне хотелось бы отметить, что очень важной деталью является Git, то есть система контроля версий. И если вы собираетесь стать программистом, веб-разработчиком, а если вы смотрите это видео, то я на 100%
Speaker A
уверен, что вы хотите им стать, то вам обязательно понадобится Git, и с ним нужно будет научиться со временем работать. В рамках этого видео мы не будем осваивать все аспекты Git, поскольку это другая тема, но я рекомендую его скачать. Установка там
Speaker A
тоже довольно простая, хотя пунктов в мастере установки несколько больше. И в принципе я рекомендую просто пока установить, а дальше уже мы разберёмся, что с этим можно делать.
Speaker A
Итак, давайте сперва с вами откроем редактор кода, запустим его в первый раз, посмотрим, какие здесь есть вкладки, кнопки, окна, что за что отвечает, познакомимся с ним и определимся, что здесь можно вообще в принципе делать. Давайте я вам расскажу,
Speaker A
как я вообще его открываю. Обычно я захожу в свою рабочую папку и нажимаю правой кнопкой мыши «Открыть с помощью Code». Но также, если вы работаете на Windows, то можно вынести вот сюда приложение, нажать правой кнопкой мыши.
Speaker A
И здесь увидеть те папки, которые вы недавно открывали. Они так и называются: recent folders, то есть недавние или недавно открытые папки в этом редакторе кода. Если вы ранее работали с проектом, то у вас здесь будет ваш проект. У меня
Speaker A
это Empty Project, то есть папка Empty Project, которая находится в другой папке. И её мы открыли. И её название мы вот здесь слева наблюдаем на нашем, соответственно, пространстве Visual Studio Code.
Speaker A
Вообще давайте я коротко сейчас расскажу, где какие вкладки, чтобы вы понимали в целом интерфейс. Слева у нас находится обычно панель, которая отвечает за нашу папку и все файлы внутри неё. У нас сейчас всё пусто, файлов никаких нет, поэтому мы с
Speaker A
вами ничего не наблюдаем. Чуть позже я объясню, что это за кнопки и как работать с файловой системой. Пока просто обзорная часть программы. Слева также вы можете видеть у меня несколько разных кнопок. У вас при первой установке, скорее всего, будет четыре
Speaker A
кнопки. Это файловая система или проводник, поиск по файлам или по тексту внутри этих файлов, работа с Git, а также, если не ошибаюсь, debug и расширения. Это стоковые кнопки. Но также у меня есть две дополнительные.
Speaker A
Это плагины, которые я чуть позже вам покажу. Здесь сверху, как и во всех программах, есть необходимые функции, то есть работа с выделением, работа с окнами и некоторые ещё. Мы их подробно тоже рассмотрим несколько позже. Сверху располагается глобальный поиск по всем
Speaker A
файлам, которые были открыты в вашем редакторе. Это очень удобно, если вы хотите найти какой-то файл по его названию. Вверху справа располагается четыре кнопки. Первое — это открыть или скрыть проводник, но я рекомендую использовать сочетание Ctrl+B для того,
Speaker A
чтобы это делать. Следующая кнопка тоже используется довольно часто. Это открыть или скрыть вашу консоль, но на самом деле можно использовать либо Ctrl+J сочетание клавиш, либо Ctrl+Тильда.
Speaker A
Это удобно, если вы хотите скрыть или открыть ваш терминал для ввода команды. Обычно скрывают терминал, когда работают с каким-то файлом, и он очень большой, и он не влезает вот в эту область, и вам нужно вот это пространство.
Speaker A
Соответственно, можно скрыть терминал, поскольку вы его не используете, и работать над файлом. Или размер терминала можно просто сделать поменьше, и тогда тоже пространство здесь станет больше. Есть ещё одна кнопка. Она позволяет более детально настраивать Visual Studio Code. Но, честно говоря,
Speaker A
особо сильно я с этим не заморачивался, поскольку это уже внешка, которая у всех как бы своя. Если вам интересно, вы можете попробовать распределять по-разному некоторой части интерфейса.
Speaker A
Возможно, что-то приглянётся вам гораздо лучше, чем стоковый вариант. Теперь давайте разберём с вами первую вкладку.
Speaker A
Это вкладка «Файл». Прежде чем мы начнём разбирать функции, которые здесь в списке указаны, мне бы хотелось объяснить, почему моя программа на английском языке и почему я рекомендую использовать именно английскую версию. В целом, да, вы можете русифицировать, установив расширение. И если не
Speaker A
ошибаюсь, у меня где-то оно даже было. Но дело в том, что, во-первых, этот языковой пакет не распространяется на плагины, которые вы будете устанавливать, и вы всё-таки будете иметь проблемы с языком. А это во-первых. А во-вторых, большое количество функций, которые здесь есть,
Speaker A
если вы вдруг захотите загуглить что-то в интернете, они будут на Stack Overflow или на других сайтах написаны на всё-таки английском языке, а у вас будет русский. И, возможно, вы что-то здесь не поймёте, где-то нажмёте не ту кнопку. В общем, гораздо лучше,
Speaker A
поверьте, использовать не русский, а английский язык. И в дальнейшем, на самом деле, никаких проблем с этим не будет. Итак, на вкладке Фа...
Speaker A
мы пользуемся как программисты довольно редко. И в основном файлы создаются через вот эту рабочую область, которая отражает нашу папку. И здесь есть кнопка первая, которая называется NewФа.
Speaker A
Давайте его создадим. Назовём index.html. Enter. И теперь мы можем делать с вами разметку. В целом почти все функции, которые здесь используются, они используются по назначению программистам довольно редко.
Speaker A
Однако о них полезно знать. Например, вы можете создать новый файл и задать ему конкретное расширение. В данном случае мы создадим текстовый файл. Давайте назовём его текст.
Speaker A
И мы видим, что у нас создался именно текстовый файл. Но опять же зачастую при разработке используется создание файла через эту кнопку или создание папки через вторую кнопку. Давайте назовём её components.
Speaker A
Мы создали папку и файл. Однако, возвращаясь к этому пункту, мне бы хотелось отметить важную деталь. Это автоaveй. Эта кнопка позволит сделать автоматическое сохранение файла при его изменении. Если я уберу эту кнопку и сделаю какую-то разметку в своём HTML-документе, то я увижу кружок вот
Speaker A
здесь вверху, который будет говорить о том, что я не нажал Ctrl S и не сохранил свой файл. После того, как Ctrl S я нажал, у меня этот кружок исчез, и я понимаю, что файл сохранён.
Speaker A
Однако очень часто программисты вносят много изменений за единицу времени, и удобнее делать автосей автоматическим.
Speaker A
Поэтому я эту функцию активировал. И когда я, например, верстаю то у меня автоматически происходит сохранение, и я не думаю о том, чтобы нажать Ctrl S.
Speaker A
В дальнейшем, когда вы будете писать много кода, это будет очень полезно, но иногда бывает такое, что вам нужно внести одно изменение очень большое, и тогда эту функцию можно, в принципе, отключить. Но на практике такой кейс случается редко. Здесь также есть, как и
Speaker A
во всех программах, Ctrl S, то есть сохранить файл, сохранить. Как можно ещё, э, здесь распаковать рабочее пространство. Ну, то есть, если кто-то передал вам файл Visual Studio Cд, то вы можете добавить его в своё пространство, но мы этого делать не будем пока что.
Speaker A
Это, опять же, довольно редкая функция. Самое главное здесь - это включить автосей. Остальные функции, в принципе, используются или с помощью сочетания клавиш, которые вы здесь видите, или они используются непосредственно нажатием мышки, ну или сочетанием, опять же, каким-нибудь ходкеем.
Speaker A
Hot - это горячие клавиши, то есть я имею в виду какие-то сочетания, например, Ctrl D, Ctrl V и так далее.
Speaker A
Теперь, когда мы более-менее разобрались с интерфейсом программы, давайте посмотрим, как можно её улучшить. Это позволяет сделать расширение, то есть extensions. Перейдя на эту вкладку, мы откроем по сути магазин расширений и увидим список моих расширений, которые установлены у меня на моём редакторе
Speaker A
кода. Вот такие затемнённые расширения означает, что я их выключил. А вот такие светлые, да, с такой светлой иконкой означают, что они у меня включены. Итак, первый плагин, который я бы рекомендовал - это Aut Complete Tag. Давайте я пока
Speaker A
скрою терминал, чтобы не мешать. Autocete тег позволит вам в вашем HTML-файле менять автоматически тот тег, который является закрывающимся.
Speaker A
Например, я хочу вот этот ди поменять на section. Как вы видите, когда я поставил курсор сюда, то у меня ди подсветился.
Speaker A
Теперь я могу начать стирать и увидеть, как стирается также на пятнадцатой строчке. Давайте напишем section.
Speaker A
И увидим, что у нас, к сожалению, ничего не поменялось. Такое бывает с некоторыми плагинами.
Speaker A
Давайте вернём обратно div и попробуем написать отсюда section. Ади убрать. Как мы видим, плагин сработал. Он понял, что мы вводим sectionшн здесь, на девятой строке, и то же самое поместил на пятнадцатую.
Speaker A
В принципе, это довольно удобно, поскольку это не заставляет нас вводить дважды в одно и то же место одинаковый тег.
Speaker A
Поэтому автоeteтег я настоятельно рекомендую к использованию. Следующий плагин был в своё время популярен, но сейчас его уже я не рекомендую, поскольку он недостаточно хорошо отрабатывает. Нужен он для того, чтобы делать бьютификацию кода.
Speaker A
Бьютификация кода - это процесс, при котором происходит его выравнивание. Например, предположим, у меня будет не выровнен код. Он будет написан вот так небрежно.
Speaker A
То есть здесь непонятно, какой отступ. Тут очень большой слева. Тут, например, на тринадцатой строчке тоже большой. И читать такой код становится тяжело, трудно. Здесь непонятно какие теги. Как будто это писал новичок или человек, который не разбирается в эстетике.
Speaker A
Чтобы решить эту проблему и сделать код более читабельным, я обычно нажимаю кнопку Ctrl S Hot K, ну, то есть сочетание клавиш. И у меня срабатывает плагин, но не этот, а немножко другой.
Speaker A
Его мы рассмотрим ниже. Он называется Pretier. Это современный вариант форматирования. У него, как мы видим, 42 млн скачиваний. И этот форматер является на сегодняшний день самым популярным, удобным. Его можно легко кастомизировать. Здесь вот в описании показано, кстати, как это делать, но
Speaker A
чуть позже я объясню, как у меня это настроено в программе, и вы сможете сделать это гораздо быстрее.
Speaker A
Ну и, собственно, его я рекомендую как основной форматер кода. Этот форматер уже является устаревшим Beautify, но я его использую для того, чтобы выравнивать код в одном из своих очень-очень старых проектов, поэтому у меня он включен. Вам же я его
Speaker A
устанавливать не рекомендую, он уже устарел. Следующий плагин раньше я использовал для того, чтобы счаpt работать, но сегодня он тоже не особо актуален.
Speaker A
А вот этот плагин довольно полезный. Это Color Highlight. Он позволяет нашему редактору кода подсвечивать цветом определённым цвета, которые у вас расположены в коде. Выглядит это следующим образом. Давайте я создам стиль какой-то.
Speaker A
Допустим, у нас будет тегader иметь весь текст какой-нибудь чёрный. Как мы видим, чёрный, ну, подсветился сзади, да? То есть у нас три нолика и сзади мы видим бэкграунд black. Если я сделаю цвет красный, то у меня, соответственно, появится красный. Это бывает удобно при
Speaker A
разработке, чтобы не путать цвета. Особенно это удобно при вёрстке. Следующий плагин, который я иногда использую, Draw io. Он позволяет, как мы здесь на гифке видим, создать диаграмму, да, в формате draw io и смотреть её либо редактировать.
Speaker A
Вообще есть сайт такой draw. И на нём можно создавать диаграммы, но часто в проектах так встречается, что диаграммы уже находятся в какой-то папке, и вы, чтобы их открыть, открываете сначала браузер, потом вставляете этот файл. Всё это долго. хотелось бы просмотреть сразу
Speaker A
в редакторе кода. Для этого у меня существует здесь этот плагин, и он опять же является необязательным для начала карьеры веб-разработчика, но он здесь иллюстрирует то, что любую задачу практически, которая перед вами возникает, можно решить с помощью плагина. Например, вам хочется смотреть
Speaker A
схемы прямо в редакторе. Вы можете это сделать. Например, вы хотите переключать музыку из Спотифая прямо в редакторе кода. Вы удивитесь, но это тоже возможно. Существует плагин, который позволяет синхронизировать аккаунт Spotify с вашим IDE. И где-то здесь внизу слева вы увидите кнопку
Speaker A
вперёд-назад, а также название музыкальной композиции, которую вы слушаете. В принципе, таких примеров довольно много, но они все показывают то, что редактор полностью можно кастомизировать под себя. Draw io пример со Спотифаем - это лишь одни из кейсов, которые можно назвать. Также один из
Speaker A
интересных примеров - это SВG просмотр. А здесь вот у меня был плагин SVG. Он позволяет, э, если вы видите свG иконку в вашем редакторе кода, в вашем проекте, то он позволяет открыть её в Visual Studio Cд и посмотреть. То есть, как мы видим,
Speaker A
можно вот здесь справа наблюдать иконку. Это тоже удобно, чтобы не открывать просмотр SVG иконки отдельно в браузере.
Speaker A
Вы можете всё посмотреть в вашем редакторе кода, и это удобно. Следующий плагин, который я вам рекомендую - это ESLint. Он позволит нам в джаваскрипте делать проверку и подсвечивать те места, где у нас есть ошибки или же неточности.
Speaker A
В дальнейшем этот файл на всём пути веб-разработчика вам будет помогать. вернее, этот плагин. И, в принципе, он является одним из самых популярных. Ну и тут это мы видим по скачиванием 33 млн.
Speaker A
То есть этим пользуются, можно сказать, все веб-разработчики по всему миру. File Icons - это довольно неплохая тема иконок. Она современная, очень симпатичная, но если я не ошибаюсь, у меня используется немножко другая тема.
Speaker A
Эти иконки позволяют поменять вот эту эмблему. То есть вы можете создать какой-то файл, и к нему будет назначена нужная иконка в редакторе. Это уже на вкус и цвет. Кому-то нравится один пакет иконок, кому-то другой. Здесь вы можете выбрать что-то под себя, найти что-то
Speaker A
уникальное, если вам это интересно. Следующий плагин Gitgraph, а также давайте сразу расскажу про Git History, Git History DI и Gitlands. Это четыре плагина, которые я использую для работы с GIT. Они очень удобные, и, в принципе, про них можно хоть отдельный ролик
Speaker A
снимать, но сейчас я могу сказать, что их можно установить. А разберём, как с ними работать, мы чуть-чуть позже, когда будем осваивать систему контроля версий.
Speaker A
Этот плагин позволяет добавить подсказки в, то есть Intel Sense - это выпадающий список, грубо говоря, где у вас будут необходимые стили. Это очень удобно при разработке, когда вы пишете какой-то стиль, и у вас в контекстном меню появляется нужный пункт. Следующий очень
Speaker A
важный плагин - это код снипеты. Снипеты - это как раз-таки подсказки, но в отличие от Intel Sense, они позволяют раскрывать какие-то большие куски кода, набрав всего лишь несколько символов. Например, вы хотите написать import fs from fs, но вы можете
Speaker A
набрать им, нажать tab на клавиатуре и получить вот такую строчку. Это бывает действительно удобно. Например, вы можете набрать RQR, нажать Tab и получить require.
Speaker A
Это всё просто сокращает время при наборе кода. В основном вот конкретно этот плагин я использую для того, чтобы писать CLG, то есть consol log. Это очень часто используется. И я использую также им.
Speaker A
Это наиболее часто применяемые фичи. Ради них я рекомендую установить этот плагин со снипетами. Дальше фундаментально важный плагин при разработке - это Life-сервер. Очень часто он используется, и он позволяет вам запускать в режиме реального времени какой-нибудь сайт. Я дальше в курсе
Speaker A
покажу, как это работает. Следующее - это тема WDAR Pro. Одна из моих любимых тем. Она очень красивая. Здесь всё максимально наглядно, понятно, очень хорошее сочетание всех цветов. И она является одной из самых лучших вообще в мире веб-разработки с точки зрения
Speaker A
визуального восприятия. Но вы можете установить любую другую, если вам нужна другая тема. Вы можете просто найти её в расширениях и установить. Следующий плагин опять же расширяет функционал программы Visual Studio Code. Здесь можно нажать, я его установил, чтобы нажать правой кнопкой на какой-нибудь
Speaker A
файл, и в контекстном меню увидеть Open in Default browser. Это бывает удобно, когда вы хотите, например, взять этот HTML, нажать на него правой кнопкой и Open in browser, чтобы его просмотреть и что-то решить. В общем-то, это удобно. Сейчас у меня на
Speaker A
другом окне немножко открылось это на другом мониторе. Вот мы видим, что мы открыли вот этот вот файл с помощью этого, по сути, плагина. То есть он открывается в обычном хроме, но при этом он запускается благодаря тому, что мы установили плагин и добавили сюда вот
Speaker A
эту кнопку. В стоковом функционале Visual Studio Code этого нет. Следующий плагин похожий - это Open in Bitbacket.
Speaker A
То же самое он добавляет здесь в контекстном меню Open in Bitbacket или Open in GitHub.
Speaker A
Это полезно, если вы хотите этот файл открыть сразу в Гитхабе и скинуть кому-то. В дальнейшем при работе он вам пригодится. Пока можете поставить и отложить до того момента, пока я не покажу, как это использовать. Притер мы уже обсуждали.
Speaker A
Тут, ну, по сути, я уже всё обговаривал. Просто установите и чуть дальше я покажу вам настройку. React JS - это снипеты для Реакта. Пока вы можете их установить, если вы планируете писать на Реакте, но в рамках данного урока мы
Speaker A
пока что этим пользоваться не будем. Дальше бесполезный плагин с русификацией у меня идёт, который можно, в принципе, деинсталлировать, так как он мне не нужен.
Speaker A
Ещё здесь у меня специальный SAS плагин, который позволяет добавить подсветку и автоплит в САС файлы. Ну и на SCSS это тоже, конечно же, распространяется.
Speaker A
SVG preview, я про него уже рассказывал. По большей части все вот эти расширения, они влияют на скорость разработки. То есть вы просто становитесь как программист быстрее. Вы набираете код качественнее и лучше. Но, говоря слово качественнее, я имею в виду, что вы
Speaker A
просто повышаете именно производительность, то есть становитесь быстрее, но это не означает, что улучшается качество вашего кода.
Speaker A
Качество вашего кода улучшается от практики, а расширение просто помогают это ускорить. Следующий плагин - это To 3. Он позволяет добавить вот сюда новую вкладку Todos. И если вы ставите какой-то комментарий посреди кода, например, я могу сделать это, нажав Ctrl
Speaker A
SL и здесь написать что-то вроде-ду. Обязательно с большой буквы. Ставлю двоеточие и пишу сверстать страницу.
Speaker A
Теперь, открыв свой-ду, я вижу, что у меня в файле HTML есть какой-то. То есть это что-то, что я запланировал сделать потом в будущем.
Speaker A
Я могу создать несколько таких тудушек и перемещаться по ним. Давайте сделаем несколько. Вот я, собственно, вижу их здесь впи в списке.
Speaker A
Следующий полезный плагин - это VS Code Icons. Мне он нравится, потому что он позволяет, э, отобразить иконки все. И мне, на самом деле, наиболее импонирует именно этот плагин. Я люблю, чтобы иконки были больше в таком стиле, нежели в другом. Но, повторюсь, это всё
Speaker A
вкусовщина. Ниже у меня идут плагины, которыми я пользовался раньше, но решил их отключить по тем или иным причинам, поэтому разбирать их смысла не вижу.
Speaker A
Самое главное, что вы должны запомнить, что плагины позволяют улучшить ваш комфорт. То есть вы можете работать чуть-чуть быстрее, чуть-чуть удобнее, но в целом это всё скорее про бьютификацию.
Speaker A
В заключении хотелось бы сказать, что плагины позволяют улучшить вашу производительность и скорость разработки. Я рекомендую установить те, которые я перечислил, а также обратить внимание на те, которые понадобятся вам в будущем. Теперь давайте я расскажу вам про plugin Life Server, а также про
Speaker A
Давайте сперва удалим всё, что мы здесь сверстали, и сделаем что-нибудь новое, чтобы проверить работу лай-сервера.
Speaker A
Допустим, отобразим заголовок первого уровня и напишем здесь привет, мир можно запустить этот файл двойным кликом по нашему проводнику. Например, если я открою этот файл и нажму сюда дважды, можно, в принципе, нажать сюда и открыть Open in Default Browser, но при
Speaker A
разработке удобнее пользоваться плагином Live Server. Давайте запустим его, нажав на Go Live. Мы видим процесс старн, а теперь смену на то, что у нас запустился он на порту 5.500.
Speaker A
На моём втором мониторе справа вы сейчас, ну, не видите, но у меня открылся сайт. Давайте я его перенесу на основной монитор и сюда перемещу эту ссылку. Сейчас у меня здесь отображается Привет, мир. Теперь давайте я продемонстрирую, в чём вообще прелесть
Speaker A
данного плагина. Как вы видите, я расположил окна, распределив их пространство между собой поровну. Сейчас вы наблюдаете, как я две программы расположил друг относительно друга 50 на50. И это удобно при разработке на одном мониторе. Вы можете, например, закрыть Explorer, нажав сюда
Speaker A
левой кнопкой мыши или нажав Ctrl B. И теперь вы можете верстать слева, набирать программный код, а справа видеть результат. Обычно ещё люди делают следующим образом. Если у нас сайт небольшой, чтобы дать больше пространства для нашего программного кода. Но давайте в рамках эксперимента
Speaker A
сделаем 50 на50 примерно. В чём прелесть лайфсервера? Я могу сделать второй заголовок. Теперь я могу что-то ввести сюда и увидеть. как в реальном времени у меня меняется текст. Это удобно, опять же, если вы, например, верстаете большой сайт и хотите сразу видеть результат в
Speaker A
браузере. Обычно это окно у меня находится на втором мониторе, но второй монитор можно, в принципе, по началу разработки не покупать и работать на одном. Здесь нет ничего страшного, просто можно либо разделять, либо вы можете открыть окно редактора на весь
Speaker A
экран. Это окно тоже на весь экран и при помощи сочетания Alt Tab переключаться между окнами. Это бывает удобно, когда вы ведёте разработку довольно крупного сервиса, и вам нужно одновременно работать на весь экран в редакторе кода, а также в вашем браузере. Сейчас я нажму
Speaker A
Altab и переключусь на своё приложение. У каждого есть свой стиль работы. Кто-то разделяет экран, кто-то делает 50 на50.
Speaker A
У всех всё по-разному. Я, как правило, комбинирую все эти способы. Следующий плагин. Давайте разберём этот. Более детально по нему, на самом деле, есть отличная документация, и там нет ничего сложного, но его дополнительно в V-Cд устанавливать не нужно. Он здесь уже
Speaker A
есть, и он позволяет, например, быстро верстать. Давайте что-то абстрактное сейчас верстаем. Я поставлю точку, скажу, что здесь будет section, а, вернее, div с классом section. Но давайте всё-таки сделаем г section, и у него будет класс section блок. Внутри будет лежать
Speaker A
какой-нибудь NAV, внутри которого будет лежать тег, и у него будет, например, несколько ли. И у каждого ли будет своя ссылка.
Speaker A
У ссылки будет атрибут HF и у него будет значение в виде доллара, что позволит пронумеровать нам эти ссылки от одного до например шести.
Speaker A
Теперь давайте поставим круглые скобки здесь, а также вот тут, чтобы Эмит понял, что вот эту конструкцию внутри нашего тега OL нужно повторить шесть раз.
Speaker A
Теперь, если я нажму tab, то у меня откроется вот такая вот по сути вёрстка.
Speaker A
Но перед тем, как я нажму tab, мы можем вот здесь в окне видеть abbreviation и то, что у нас есть text внутри на и дальше несколько ли, которые пронумерованы.
Speaker A
Вот так вглядит формула. И вот так выглядит её раскрытие. Давайте нажмём на tab и получим это в нашем редакторе.
Speaker A
Более детально про эт вы можете почитать опять же на официальном сайте. Все эти сокращения учатся довольно быстро, особенно если вы часто верстаете.
Speaker A
Сейчас, после того, как мы настроили наше рабочее пространство, давайте я расскажу про свои более продвинутые настройки, которые позволят вам удобнее пользоваться редактором кода и настроить его под себя. Для этого я нажму Ctrl Shift P, и здесь у меня отобразится вот
Speaker A
такое окно поиска. Но здесь вы можете видеть вот такую скобку, вернее, это знак больше. И он говорит о том, что сейчас я могу вызвать какую-нибудь команду своего плагина, которую я установил VS-код, или я могу вызвать, например, какую-то функцию VS-кода. Но в
Speaker A
данном случае я хочу открыть настройки, потому что настройки в ВС-коде, они бывают в двух форматах. Первый - это если мы нажмём Ctrl точку, вернее, Ctrl запятую, то есть, ну, у меня это на клавиатуре, там, где клавиша B, у всех
Speaker A
клавиатуры по-разному. на MacOS - это может быть другая немножко кнопка, но так или иначе Ctrl запятая открывает нам настройки пользователя, где можно настроить, э, в общем-то, весь наш редактор. Но, честно говоря, здесь довольно много разных фичей и довольно
Speaker A
долго их искать, хотя здесь есть поиск, но некоторые фишки удобнее прописать вручную. Вручную я имею в виду, что всё вот это, то, что вы видите, да, оно находится на самом деле в JSON формате, вот в этом файле, который можно открыть,
Speaker A
нажав Ctrl Shift P. Здесь набрав usersettings.jonjson. У меня это первый пункт, но у вас его, скорее всего, нет. Вам нужно будет набрать вручную вот эту надпись, и тогда вы откроете вот такой файл. У меня он, естественно, будет другой, потому что у
Speaker A
меня другие настройки, но у вас здесь будет настроек чуть-чуть поменьше. И сейчас расскажу, какие основные настройки я применил, чтобы с комфортом работать. Первая настройка относится к нашему терминалу, то есть вот к этой части нашей программы. Открыл или закрыл
Speaker A
я сейчас, кстати, по клавише Ctrl Тильда, да, то есть тоже запоминайте сочетание. Есть ряд настроек, которые относятся к Эдитор, то есть непосредственно к редактору кода, вот к этой вот части, да, есть ряд настроек, которые у нас относятся к workbench. Это
Speaker A
вот эта часть, то есть рабочая как бы область, где у нас папка открыта. Есть настройки, которые относятся к плагинам.
Speaker A
Вот VS CD icons, Live Server, да. То есть тут, в принципе, настройки как именно самой программы, так и некоторых плагинов. Вот настройки Prтира моего. Я чуть позже разберу этот конфиг тоже. А, собственно, что ещё здесь есть? Мм, в
Speaker A
принципе, на самом деле практически всё. То есть я здесь довольно много всего настраивал. Что-то у меня подтянулось автоматически, когда я плагин установил. Ну, например, код GPT я установил, да, и у меня автоматически здесь, соответственно, параметр Rusion был задан. Но есть вещи,
Speaker A
которые я менял, и вот именно их я сейчас продемонстрирую вам. Значит, первое - это работа с терминалом. Я поставил курсор style underline, то есть нижнее подчёркивание, вот здесь вы можете видеть, а не вот такая вот, значит, квадратная коробка. Мне так
Speaker A
просто нагляднее и удобнее. Вы можете посмотреть, какие ещё параметры есть у этого пункта. Если вы загуглите что-то вроде VS-код, настройка и увидите, какие параметры вообще могут быть в этом Jсоне. Я рекомендую Underline. Это просто удобно и понятно, где вы конкретно
Speaker A
сейчас находитесь в рамках вашей консоли. Шрифт у меня стоит Fракод. Вы можете выбрать любой другой.
Speaker A
В принципе, он должен быть просто моноширинным. И можете оставить дефолтный. Ничего плохого здесь нет.
Speaker A
Размер у меня в консоли четырнадцатый. Если у вас, например, очень большой монитор и масштаб вам не нравится, вы можете увеличить шрифт. Но я рекомендую не трогать эти параметры и оставить в стоковом состоянии, равно как и высоту межстрочного интервала Linehead. А вот
Speaker A
следующий параметр уже рекомендую активировать - это SMOS scролиing. У меня он в значении true, и он позволяет при прокрутки большого количества текста в консоли иметь плавный скролл. И продемонстрирую я это не в консоли, а вот здесь в рабочей области. Но на
Speaker A
консоли эффект будет такой же. Сейчас, когда я перемещаю колесом мыши рабочее пространство, у меня очень плавный скролл. То же самое будет в вашей консоли, если вы выберете пункт smooth scроolling true.
Speaker A
Вот, кстати, я здесь вижу тоже самое на диitр. То есть в редакторе кода у меня стоит с scrollроolling true. И поэтому у меня плавный скролл. Если я сделаю здесь false, то теперь, как вы видите, я листаю и у
Speaker A
меня всё очень дёрганное, очень непонятное. И, в принципе, к этому можно привыкнуть. Здесь ничего плохого нет, но это всё-таки грубо. Я рекомендую поставить параметр true вот на этот пункт.
Speaker A
Возвращаясь к терминалу, здесь у меня в качестве дефолтного, то есть терминала по умолчанию, выбран gitbш. Причин тому несколько.
Speaker A
В принципе, можете использовать, на самом деле, поначалу консоль от Command Prompt, то есть от Windows, стандартную.
Speaker A
Ничего здесь как бы плохого тоже нет. Просто со временем в своей жизни разработчика вы придёте к такому выводу, что gitбаш использовать удобнее. Пока я не буду грузить вас, почему это именно так, но какой-то особой разницы на первых порах у вас не будет, поэтому
Speaker A
можете не заморачиваться и использовать Command Prompt, либо оставить здесь gitbш. Этот параметр у вас появится, если вы установили Git и GitBash.
Speaker A
Дальше, соответственно, переходим к настройкам нашего редактора. Здесь я вывел вверх подсказки Intel Sense. Они позволяют мне более детально, более быстро писать именно джаваскриптовый код. Если здесь убрать этот параметр, то подсказки будут уходить чуть ниже. В общем, можете пока
Speaker A
этот параметр не ставить. Это уже у всех будет по-разному. То есть кому-то понравится, если подсказки для джаваскрипта будут сверху, аниже будут CSS подсказки, а кому-то наоборот. Это опционально. Просто знаете, что вот этот параметр позволяет снипеты переместить выше или же ниже.
Speaker A
Дальше у нас идёт font family, то есть тот шрифт, который используется у нас в V вс-коде. В моём случае это Ligat Consolas.
Speaker A
Что означает legat и вообще почему я не использую обычный consoles? На самом деле обычный consoles - это классный шрифт, ногатура позволяет добавить лигатуры. Вот, кстати, они ниже у меня активируются. Font ligatures true.
Speaker A
Это означает, что при наборе кода на JavaScript давайте например index.js Джест создадим, да, у меня будут некоторые символы, скажем так, меняться визуально на более симпатичные. Давайте содим функцию стрелочную.
Speaker A
И здесь я увеличу, э, значит, рабочую область, зажав Ctrl и покрутив колесо вперёд, вы можете наблюдать вот такой вот символ. На самом деле это равно. И, ну, то есть, если я пробел вот здесь поставлю, то вы увидите, что это равно и
Speaker A
вот такая стрелка. Но если вместе их написать, то редактор кода, ну, вернее, шрифт, он как бы сделает здесь лигатуру, то есть соединит их в одно. Но по факту этот символ - это просто равно. И вот эта стрелка, ну, типа вместе, но
Speaker A
визуально выглядит намного приятнее и код смотреть становится удобнее. То же самое с двойным равно, например, или с тройным равно. То есть, если вы делаете какое-то сравнение, да, if например а = b, то вы видите, по сути, двойное равно, да, но оно соединяется вот в
Speaker A
такую лигатуру. Если равно тройное, то лигатура будет вот такой. Но по факту это три символа, просто отображение другое. И об этом мало кто говорит, но на самом деле это очень удобно, если вы разрабатываете большой проект. Поэтому я рекомендую вот этот шрифт поставить и
Speaker A
включить лигатуры. Вы в описании найдёте этот шрифт, я его приложу, вы сможете его к себе легко и просто установить.
Speaker A
Следующий параметр - это формат onsave, то есть форматировать визуальную часть кода при сохранении. Тоже полезная достаточно функция. Дальше идёт line, то есть интервал между строк, перенос, который мы отключили.
Speaker A
Дальше идёт у нас tab size, то есть размер отступа слева. У меня это параметр два. Отступ слева - это вот эта вот часть. И вот здесь же мы, кстати, видим его дубликат, то есть Spa 2. Можно нажать using tabs и выбрать два. То есть
Speaker A
визуально вот эти вот линии, они подстроятся под параметр два. Если здесь выбрать, например, давайте выберем четыре, то у меня визуально вот каждая вот эта линия, она подстроится под другой вид.
Speaker A
Но давайте выберем два, потому что на большинстве проектов, на самом деле используется именно вот этот параметр, хотя он иногда не очень удобный, потому что склеивается код, да, и очень часто удобно использовать, например, четыре, чтобы код [музыка] был немножко другим.
Speaker A
То есть у нас был побольше отступ вот здесь, например, да, вот здесь тоже отступ побольше.
Speaker A
И вот здесь сейчас я, кстати, нажал на колесо мыши, да, и сверху вниз вот так провёл. У меня многокурсорный режим включился, и я просто нажал, ну, пробел. Тоже, кстати, удобная фича. М, в общем-то, такой код выглядит нагляднее, но на большинстве
Speaker A
проектов коммерческих всё-таки используется параметр два. И поэтому я весь код подстраиваю под такой формат, потому что просто, чтобы глаз привыкал к коммерческому виду деятельности.
Speaker A
Поэтому здесь у меня именно tabsй по умолчанию 2. Здесь у меня ещё интересный параметр. Это mouse whel on zoom. Если не ошибаюсь, он у вас тоже должен быть true, но он позволяет вам, зажав Ctrl, увеличивать или уменьшать пространство.
Speaker A
Это бывает удобно. Следующий очень важный параметр - это курсор Blinkin. У меня параметр SM.
Speaker A
Собственно, многое здесь завязано именно на этом параметре, на плавном, на плавной прокрутке или скроле. Вот этот параметр позволяет, зажав левую или правую стрелку, перемещать курсор довольно плавно. То есть вот, как вы видите, он перемещается слева направо довольно быстро, но в то же время
Speaker A
плавно. И он ещё плавно мигает, то есть как бы плавное затухание, плавное нарастание. Это влияет опять же на комфорт работы.
Speaker A
Курсор style, ну, то есть линия, да, понятно. Э курсор с animation. Вот, кстати, на самом деле за то, чтобы он двигался вот так быстро, отвечает этот параметр. Я его перепутал вот с этим верхним. А вот этот вот курсор Блинкин
Speaker A
отвечает за то, чтобы он мигал плавно. Но по факту, ну, как бы этот параметр важен, равно как и вот этот. Это про комфорт работы.
Speaker A
Теперь перейдём к настройкам Workbench. Здесь очень важно поставить параметр 3 18, потому что в дальнейшем, когда вы будете работать на больших проектах, вы убедитесь, что расстояние вот здесь между, допустим, header, да, вот этой папкой и modules, оно вот это расстояние
Speaker A
очень важно. И если сделать инт вот этот вот мелким, по умолчанию он, по-моему, в районе десяти, если не ошибаюсь, да? Вот в районе десяти. То, если вы заметили, тут очень маленькое расстояние и большое количество вот таких вложенностей воспринимается тяжеловато.
Speaker A
Я поставил себе 18. И теперь посмотрите, как у меня, ну, расширилась как бы вот эта область. И гораздо удобнее стало работать с файловой системой.
Speaker A
В принципе, можно поставить 20, если вам неудобно. То есть это уже на вкус и цвет, но мне параметр 18 подошёл отлично.
Speaker A
Дальше смуролинг, естественно, true. Это плавная прогрудка внутри вот этой вот части, то есть слева. Как вы видите, она тоже не дёрганная, а очень плавная.
Speaker A
Далее у нас идёт, ну, тема, то есть у меня это OneD Pro. А, в принципе, мм, на самом деле, тут дальше уже пошли настройки, больше разных плагинов, но я бы хотел рассказать про Priter. Ну, здесь, на самом деле, можно на
Speaker A
официальном сайте почитать у Притера, да, какой параметр здесь есть, как его можно выставить и так далее. Здесь, э, у меня вот такой конфиг. Вы можете его, в принципе, скопировать. Здесь я настроил, что у меня ширина, значит, отступа будет
Speaker A
два вот этого вот. То есть тут я настраивал как бы для редактора, да, отображение вот этих вот полос.
Speaker A
Вот тут я четыре, например, сейчас выбрал, да, но при этом притир подстраивается под параметр два. Вот если я здесь выберу четыре и нажму вот здесь Ctrl S, то у меня pritтер сделает, ну, отступ везде, равный четырём пробелам.
Speaker A
То есть вот эта часть - это отображение вот этих вот линий в редакторе. Ну, для удобства.
Speaker A
А вот эта часть - это для того, чтобы, соответственно, выравнивать. Давайте вернём параметр два. Нажму вот здесь Ctrl S. У меня отработает configра. И мы видим бьютификацию. Ну, и здесь я тоже выберу, на самом деле, using Tabs 2, потому что, ну, опять же,
Speaker A
в большинстве коммерческих проектах именно вот такой отступ. Да, он не всегда удобный, но, блин, поверьте, вот лучше к этому привыкнуть сейчас, чем страдать в реальном проекте. Потом здесь у меня точка с запятой, настройка, переносящейся запятой в каком-то объекте. Можете просто поставить
Speaker A
параметр All, да, и не заморачиваться. Чуть позже я, возможно, объясню, почему так. Но это, опять же, влияет больше на внешку, чем на реальный код. То есть реальный код мы будем учиться уже дальше писать, а вот это просто визуал. Какие
Speaker A
здесь параметры, не так важно, потому что, ну, опять же, это просто визуальное отображение. Вы можете просто скопировать этот конфиг и вставить его себе. Ну а отдельно потом что-то донастроить, если вам так больше нравится. На этом по глобальным настройкам Visual Studio Code у меня
Speaker A
всё. Переходим к следующему [музыка] уроку. Сейчас давайте я вам расскажу про то, как можно свои настройки Visual Studio Code синхронизировать с GIT. Вот здесь, нажав на эту иконку, можно нажать settings syon. и войти в свой GitHub профиль, привязав таким образом все
Speaker A
настройки к GitHub. Это удобно, если вы вдруг меняете компьютер или хотите работать одновременно на ноутбуке и на персональном компьютере, и вам важно иметь одну и ту же среду. Я рекомендую это сделать, поскольку очень будет жалко потом при смене, к примеру, операционной
Speaker A
системы терять весь прогресс и все настройки. Теперь давайте рассмотрим, как работать с программным кодом быстро, эффективно и не иметь с этим проблем.
Speaker A
На самом деле большое количество всех функций, которые нам понадобятся, находятся на вкладке Selection, а также на вкладке Edit. Но этими вкладками редко кто пользуется. В основном люди пользуются вот этими сочетаниями. И я про многие из них сейчас вам расскажу.
Speaker A
Итак, к примеру, вам нужно переместить строчку вот эту наверх или вниз. Вы можете её выделить, да, типа нажать Ctrl X, вырезав таким образом её в буфер обмена, потом нажать вот сюда на седьмую строчку, нажать Enter и Ctrl V. Но это
Speaker A
долго, это очень долго. Гораздо проще поставить курсор на девятую строку, нажать кнопку Alt и дальше нажать кнопку вверх стрелочку или же кнопку вниз, чтобы переместить её вверх или же вниз.
Speaker A
Это очень удобно, потому что это позволяет сократить время. Особенно, если вам нужно перенести сразу вот такой блок. Вы можете его выделить, нажать Alt, теперь нажать стрелку вверх и переместить его наверх и или вниз, например. То есть вот эта фича, она
Speaker A
очень удобна, во-первых, тем, что это быстро, во-вторых, тем, что у вас автоматически происходит, как вы видите, выравнивание.
Speaker A
В общем-то, однозначно эту фичу я рекомендую. Кстати, как я ранее говорил, возможно, вам интересно, как можно быстро поставить коммент. Ну, можно, например, двумя слышами, да? То есть, ну, в данном случае у нас это HTML, поэтому у нас будет немножко другой
Speaker A
комментарий. То есть это стрелка, затем у нас будет восклицательный знак и 2 тире. Ну, как мы видим, если я это всё комментирую, то у меня появляется легатура, то есть отображение этих символов в ином формате. Справа, соответственно, такая же. Но как я так
Speaker A
быстро её поставил? Я нажал на Ctrl и сh, который находится рядом с правой клавишей Shift. В принципе, так можно не только одну строку комментировать, но и несколько строк. Например, если я вот выделил вот эти все лишки и теперь хочу
Speaker A
их закомментить, я нажимаю Ctrl/ у меня комментируются все лишки. Это удобно и работает не только на HTML-файле, но и на любом другом.
Speaker A
Кстати, если у вас полноразмерная клавиатура, то я рекомендую использовать клавишу Home и End. [музыка] а также delete, page up и page down, чтобы быстро перемещаться по коду. Если у вас ноутбук, то вы тоже можете использовать функционал этих клавиш. Просто нужно
Speaker A
понять, каким конкретным сочетанием это делается в вашем случае. Я уверен, что эти клавиши помогут вам быстро работать, поскольку использую их каждый день сам. Например, сейчас я нажму на home и перемещусь быстро в начало строки. Если нажму на End, то я
Speaker A
перемещусь в конец. Если я нажму page up, то у меня переместится курсор на первую строчку. Если нажму page Down, то он переместится ближе к концу.
Speaker A
Соответственно, это удобно, когда вы хотите быстро переместиться наверх или вниз. А в общем-то эти клавиши я советую вам освоить и применять в дальнейшем на протяжении всей жизни разработчика.
Speaker A
Теперь давайте рассмотрим некоторые другие аспекты VS-код. М, например, допустим, вам нужно сделать дупликат этого файла, чтобы что-то с него списать. Например, вы можете нажать Ctrl и обратный слш, который у меня находится рядом с клавишей Enter.
Speaker A
И мы увидим, как у нас один и тот же файл открылся по сути дважды. Вы спросите: "Ну, а зачем это нужно?" Ну, например, предположим, файл очень большой. Давайте я его сделаю искусственно большим, то есть скопирую несколько раз.
Speaker A
Набар. Например, я хочу вот здесь что-то написать и списать это из верхней части файла.
Speaker A
Сейчас я открыл его справа вот здесь и хочу посимвольно списать вот эту часть. Я могу это сделать, потому что у меня слева открыт этот файл в нижней части, а справа открыт этот же файл и его верхняя часть. Соответственно, я могу спокойно
Speaker A
списать вот эту всю строку вот сюда, ну или скопировать её отсюда, да, сюда. Понятное дело, что в реальном мире так никто делать не будет. То есть это я для примера тайтл сюда поместил, чтобы просто показать работу с программным кодом. Но в целом это удобно
Speaker A
через Ctrl и обратный слш открывать вот так во втором окне файл. Иногда это может быть полезно. Давайте сейчас обратно всё теперь уберём. Нам не нужно столько значит навбаров.
Speaker A
Давайте теперь я покажу, как я работаю в том случае, если у меня очень много программного кода и мне нужно его, например, одновременно заменить.
Speaker A
Допустим, давайте создадим текст рыбу на я напишу lemм. И давайте, скажем так, будет здесь 500 символов, вернее 500 слов. Я нажимаю Tab. У меня раскрывается огромное количество текста.
Speaker A
Как мы видим, вот здесь горизонтальный скролл очень большой появился. И если я нажму Alt Z, то у меня всё выровняется в соответствии с шириной моей рабочей области. Теперь, допустим, я хочу найти все лом вот эти и заменить их
Speaker A
на какое-то другое слово. Я могу выбрать здесь lorм, написать 1 2 3 4 там, да, дальше ещё найти какой-нибудь лом, где он там был у меня, да? Вот здесь. Здесь написать вручную 1 2 3 4, но это всё долго. Я хочу одной
Speaker A
кнопкой сразу заменить все вот эти лоры, которые мне вот здесь редактор подсветил, на что-то другое. Я могу нажать Ctrl D, и у меня редактор выделит следующее выделение, то есть следующее совпадение с выделенным текстом. Если я ещё раз нажму Ctrl D, у меня выделится
Speaker A
ещё Lorром. Если ещё Ctrl D, то следующий ром. И как мы видим, программа входит в режим многокурсорного использования. То есть я могу нажать, например, здесь backspace и стереть всё это слово. Могу нажать 1 2 3 4 5. И, как
Speaker A
вы видите, у меня вводится это слово в несколько мест сразу. Но что, если я хочу заменить не вот эти вот лормы, да, а все, например? Я могу нажать lorм дважды вот сюда левой кнопкой мыши, дальше Ctrl Shift L, и у меня выделятся
Speaker A
все лом, которые есть в этом тексте. Теперь я в многокурсорном режиме могу нажать 1 2 3 4 5 и заменить все лорым на вот эту числовую последовательность.
Speaker A
Сейчас этот пример очень абстрактный, то есть я просто пытаюсь показать функции VS-кода, но на деле вы можете, например, увидеть такую ситуацию, что вам нужно заменить вот это слово и следующее за ним, то есть вот это. Вы нажимаете Ctrl D и
Speaker A
что-то меняете, но остальные лом слова у нас остались здесь в неизм в неизменённом состоянии. Или вы можете нажать Ctrl Shift L и выделить все. Это работает как с таким большим текстом, так и в программном коде, в принципе.
Speaker A
Да, это довольно удобная фича, стоит её запомнить. Её я использую очень часто в процессе разработки.
Speaker A
Кстати, что касается выравнивания. Ну, мы смогли выровнять текст, нажав Alt Z, да, по ширине нашей рабочей области. Но вы, возможно, заметили, что если я нажимаю Ctrl S, то у меня всё тоже выравнивается. Срабатывает в этот момент Prтеer. И ещё можно настроить базовый
Speaker A
форматер, нажав Alt Shift F. Если вы нажмёте Alt Shift F, то у меня ничего не произойдёт, потому что у меня код уже выровнен, а у вас, скорее всего, должно было появиться сверху вот такое окно, где вы должны будете выбрать дефолтный
Speaker A
форматер. У меня это PR уже. И давайте я, возможно, попробую вызвать окно, да, которое у вас должно появиться, если вы нажмёте Alt, Shift F.
Speaker A
Open. Значит, default default form. Нет, defult default format мне нужен. Давайте я просто наберу, наверное, форматер, да?
Speaker A
Но только мне нужна вот такая галочка, да, чтобы он искал по вот чтобы он искал конкретно по командам VS-кода.
Speaker A
формат document with. И, соответственно, я могу выбрать здесь с помощью чего форматировать. Ну, у меня это притир, и вы видите, он у меня по умолчанию дефолтный форматер.
Speaker A
Вот. Э, теперь давайте разберёмся, что вообще такое многокурсорный режим, как с ним работать. Ну, ранее я показывал, что можно колесо мыши зажать вот здесь и провести вниз мышку, и у вас сразу много курсоров поставится здесь.
Speaker A
Можно также выделить какое-то слово, зажать Alt, нажать, например, вот сюда, потом вот сюда, сюда, сюда, сюда, ну, куда вам удобней, и поставить несколько курсоров одновременно. Теперь вы можете что-то вводить, и у вас будет в нескольких местах сразу вводиться текст.
Speaker A
Многокурсорный режим также появляется, если выделить слово, а также начать выделять совпадение этих слов через Ctrl D. То есть тоже у нас активируется многокурсорный режим.
Speaker A
Вот. И в принципе ещё есть одно сочетание, это Ctrl, Alt и стрелка вверх-вниз. Я могу таким образом тоже делать многокурсорный режим и вводить сразу в нескольких местах то, что мне нужно.
Speaker A
Это довольно частые кейсы. Я показал лишь несколько вариаций, как это можно использовать. Ещё существует довольно полезная фича, которая позволяет вам удалить строку.
Speaker A
Вы можете удалить её, выделив мышкой, да, выделить, просто нажать backspace и, собственно, удалить. А можете нажать клавишу, вернее сочетание клавиш Shift Delete, и у вас удалится строка.
Speaker A
С одной стороны, вы удалили строку, и всё хорошо, но стоит помнить, что она находится сейчас в буфере обмена. То есть, поставив сюда, например, курсор, я могу нажать Ctrl V и увидеть, как у меня удалённая строка разместилась на десятую. Почему так? Потому что, когда я
Speaker A
нажимаю Shift Delete, у меня стирается строка, но она же остаётся в памяти, и теперь я могу её вставить в другое место.
Speaker A
Кстати, если вы пользуетесь Windows, то я рекомендую включить такую фишку в вашей операционной системе, как общий буфер. Это делается с помощью нажатия клавиши Win V. Ну, то есть как Ctrl V, только WinV. Здесь нужно будет нажать на синюю кнопку включить, и вы получите вот
Speaker A
такую интересную фичу, которая позволяет смотреть, что вы скопировали, к примеру, полчаса назад или час назад. Ну, то есть здесь есть небольшой список. И это удобно, когда вы, например, скопировали сразу несколько строк, потом вам понадобилось что-то из прошлого, но вы
Speaker A
понимаете, что вы уже много всего скопировали. Просто нажимаете Wiin V вместо Ctrl V и ищете, что вам нужно разместить на вашей строке. Это удобно, когда вы очень много копируете.
Speaker A
Однозначно эту фичу я рекомендую к использованию. Сейчас мы разобрали с вами, как пользоваться можно редактором кода, то есть какие есть функции у него, какие есть фичи с в связанные с выделением текста.
Speaker A
Давайте разберём теперь вкладку поиска. Здесь что интересно? Это глобальный поиск по всем файлам. То есть я могу ввести, например, сюда вот это слово, и он найдёт мне целых вот четыре строчки, да, где есть это слово. Если у меня будет ещё один такой HTML-файл,
Speaker A
давайте я нажму Ctrl C, Ctrl V, у меня создастся автоматически копия. Перейду на вкладку Search, нажму сюда, нажму Enter и увижу, что у меня теперь второй файл, где те же самые совпадения он нашёл. То есть вот этот поиск, он
Speaker A
глобальный по всему проекту или по всей папке. Есть ещё поиск в рамках файла, он находится вот здесь. Вы можете нажать Ctrl F.
Speaker A
Теперь у нас появляется окно find, где можно что-то ввести. Работает по аналогии с тем, как это в Хроме происходит, когда вы Ctrl F нажимаете и хотите что-то на сайте найти. Здесь давайте введём что-то, что мы хотим найти. Но перед этим давайте я закрою
Speaker A
вкладку поиска слева, чтобы у нас не было вот этих лишних выделений. А, но тогда нам придётся и, да, стереть всё-таки то, что мы искали.
Speaker A
Теперь я нажму Ctrl F. И здесь давайте найдём. Да, и увидим, что у нас есть несколько совпадений. Если я буду сейчас Enter нажимать, я буду, ну, перемещаться по совпадениям. Если я буду нажимать Shift Enter, то я буду в обратном порядке
Speaker A
перемещаться. Это удобно, если у вас очень большой текст, например, да, давайте его увеличим в несколько раз. Там вот вы нашли 44 совпадения лорем, да, и вам нужно перемещаться по этому коду.
Speaker A
Соответственно, вы можете вот так через Shift Delete перемещаться вверх, а через, вернее, через Shift Enter перемещаться вверх, а через Enter перемещаться вперёд.
Speaker A
Также можно, например, раскрыть вот это окно и заменить лорем во всех местах или только в одном на что-то другое.
Speaker A
Например, давайте заменим на 1 2 3 4. В тридцать седьмом выхождении. Я нажимаю на вот эту кнопку. И вот мы видим что на три се на тридцать седьмой раз он заменил эту строку на 1 2 3 4. И в этом
Speaker A
тексте я уже, честно говоря, потерялся. Давайте найдём. Да, вот он вот здесь заменил нам лом на 1 2 3 4. Но если мы хотим все лом поменять на 1 2 3 4, мы можем нажать на вот эту кнопку, и тогда
Speaker A
у нас во всех местах будет 1 2 3 4. Вот вместо так. Теперь давайте попробуем, например, найти что-то более узкоспециализированное, да?
Speaker A
Допустим, я хочу не просто Лорем, я хочу найти все Лорес. Для этого я вставляю сюда Лорес. Вижу, что у меня есть несколько совпадений, а именно семь.
Speaker A
А сейчас мы на втором. Вот оно второе выделено, да? Если я нажму Enter, я на третье попадаю. Вот оно здесь выделяется.
Speaker A
И, например, я хочу не просто Лорес вхождение, да, потому что долорес, ну, слово подходит под это, но я хочу именно lлорес, чтобы не было никаких до перед вот этим вот словом. Для этого я нажимаю вот эту клавишу. И мы видим, что у нас
Speaker A
результатов нет, потому что в нашем тексте нет слова lor вообще. У нас есть долоor, но это не то, это нам не подходит. Если я размещу сюда lores, то я уже найду это слово. Вот оно.
Speaker A
Вот эта кнопка говорит о регистре. То есть в данном случае весь регистр нижний. И если я нажал эту клавишу, то VS-код будет искать все лос, которые являются в нижнем регистре. Но если я нажму вот здесь вот буквой S большой, то он уже не
Speaker A
найдёт lorс. То есть вот эта часть уже вот это слово нам не подходит. Теперь давайте на реальном примере я вам покажу поиск. Вот мой проект, один из домашних.
Speaker A
Я хочу найти Messenger Top. Давайте его вставим сюда. Мы видим, что у нас нашёл VS-код все вхождения, но, допустим, я хочу найти все Messenger Top, которые будут с маленькой буквы начинаться. Как видите, у меня есть только одно такое вхождение
Speaker A
вот здесь. Если я нажму эту клавишу, то у меня, по сути, ничего не поменяется, потому что я нашёл Messenger TP именно в том формате, в котором он являлся. То есть ровно то, что здесь написано, он ищет.
Speaker A
То есть вот эти все совпадения нам подошли. Эти клавиши довольно часто используются при поиске. Эта клавиша говорит о регулярном выражении, но пока с этим лучше не заморачиваться. Поверьте, это используется редко. Теперь давайте разберём вкладки View, Go, Run, Terminal. На самом деле, здесь много
Speaker A
рассказывать я не буду, потому что редко используется. View - это про окна нашего редактора кода. То есть можно запустить, например, run у нас откроется, да? Можно здесь output посмотреть, да? То есть у нас консоль открывается и то, что мы выводим
Speaker A
здесь у нас может быть. Но всё это опять же очень редко. То есть в основном, если нам нужен проводник, я не буду открывать его через View Explorer. Я его открою через нажатием кнопки мыши либо Ctrl B.
Speaker A
Поэтому здесь вот эти кнопки используются редко. В основном всё это через сочетание. Go - это вкладка полезность которой вы осознаете, когда будете писать код на Реакте. Сейчас пока что я рекомендую с этим не заморачиваться, но объясню коротко. Здесь можно переходить к тем
Speaker A
или иным местам проекта, нажимая клавишу Ctrl и перемещаясь к какому-то компоненту. Вот у меня код на Реакте. Я хочу в header container. Я зажал Ctrl, нажал левой кнопкой мыши и переместился.
Speaker A
То же самое я бы мог сделать, если нажал бы Go и выбрал одну из этих опций. Но это всё вы изучите уже чуть-чуть попозже. Вкладка Run отвечает за баг приложения. Используется, когда вы хотите какое-то простое приложение на JavaScript написать, да, и вам нужно,
Speaker A
соответственно, что-то протестировать. Terminal - это настройки вашего терминала. Либо вы можете новый терминал создать, но опять же через эту панель, через это окно никто так не делает. В основном все пользуются вот этими сочетаниями.
Speaker A
Help. Ну, тут помощь. Не думаю, что стоит это обсуждать. Как и во всех программах, разработчики делают эту кнопку, но говорить много о ней я не буду, это лишнее. Ещё мне бы хотелось отметить две важные фичи.
Speaker A
Давайте перейдём в мой проект. И здесь хотелось бы рассказать про то, что можно нажать на какой-то файл и увидеть, как вкладка становится здесь немножко таким курсивым, хотя эти у нас написаны в обычном шрифте. Почему так? Потому что этот файл открыт как бы временно. То
Speaker A
есть, если я нажму на другой, то он переключится. Если я нажму ещё на какой-нибудь другой, то он тоже переключится вот в этом месте. Если я нажму дважды на эту вкладку, то я его здесь как бы закреплю.
Speaker A
И следующий файл, который я открою, он откроется у меня, ну, или здесь, да, то есть вот этот ранее открытый, или он откроется например в новом окне, и он будет тоже написан вот таким вот курсивом. Его можно заменить на другой, да? И если я
Speaker A
понимаю, что вот этот файл мне нужен и я с ним работаю, то я можно могу дважды нажать, да, и работать с ним. Это тоже удобно. Закрывать, кстати, можно нажатием не на крестик, а на колесо мыши. Это бывает удобно, чем нажимать на
Speaker A
крест. Если вы привыкли так делать в браузере, м то здесь можно делать, по сути так же. Ну а показать я вам хотел немножко другую фичу.
Speaker A
Предположим, вы что-то писали в этом файле. Слева мы видим, как у нас выделяется этот файл, вот этот компонент. Но вы дальше перешли в какую-то папку, что-то открыли, закрыли, где-то полазили, и внезапно у вас, вы понимаете, что вы потеряли фокус вот
Speaker A
этого файла вот в этой левой части. Как его вернуть? Ну, можно вручную найти, да? То есть component это где-то здесь, это где-то вот тут, да? И вот он. Мы его нашли. Но на большом проекте так искать будет очень сложно. Если вы один раз
Speaker A
потеряли фокус, то есть компонент открыт Messenger Component, а слева здесь у вас какая-то папка выбрана, но вам нужно фокус вернуть вот сюда, то можно нажать сюда правой кнопкой мыши и здесь выбрать пункт Reveal in Explorer View. И здесь
Speaker A
вы увидите фокус сразу на вашем компоненте. Это бывает удобно. Если нажать reveal [музыка] in Explorer in File Explorer, то он вам выдаст окно, где вы, собственно, найдёте сам файл, то есть ваша папка, конкретное место в проекте и конкретный файл. Это бывает
Speaker A
удобно, если вы хотите скинуть этот файл какому-нибудь коллеге. Ещё хотелось бы рассказать про фичу поиска непосредственно не по проекту, а по папкам. Она находится вот в этой области. То есть, если я нажму сюда на SRC, например, нажму Ctrl F, то у меня
Speaker A
появится вот такая, значит, панель, и я могу в ней ввести, например, то, что хочу найти. Допустим, мне нужен файл header. Я пишу header, нажимаю Enter, и вот он у меня фокусом выделяет папку header. Если мне нужна папка, например, components,
Speaker A
вот он её выделяет. Это тоже бывает удобно. Кстати, здесь я ещё не рассказал про такую фичу, как Collaps Folders.
Speaker A
Она полезна, если вы хотите закрыть сразу все папки, да, то есть у вас большой проект, и вам нужно всё сразу закрыть. Ну, можно вот так проходиться, да, поочерёдно, каждый закрывать файлик там и так далее, каждый закрывать, вернее, каждую папочку. Но вот эта
Speaker A
кнопка позволит закрыть все папки сразу. То есть я на неё нажал, и все мои папки, как вы видите, сразу закрылись. Вот.
Speaker A
Давайте ещё раз их откроем. И одной кнопкой мы их все закроем. Это удобно, если вы закончили работу в компании над какой-то фичой и хотите с нового листа, что называется, начать работу. Нажимаете Colapse All и начинаете разработку уже как бы с
Speaker A
чистого проекта, то есть с чистого листа, где у вас нет каких-то заранее открытых папок. Это позволяет очистить рабочее пространство и просто приступить к новой задаче, так сказать, с новым взглядом и с новым настроением. На этом базовый курс PvS-код завершён. Благодарю
Speaker A
вас за просмотр. Надеюсь, вы узнали много нового из этого видео. Лучшая поддержка для меня - это комментарий под видеороликом. Ну а если ты хочешь изучать фронт-разработку и стать программистом с нуля, то я рекомендую подписаться на мой Telegram-канал, ссылка на который находится в описании.
Speaker A
И всегда помни, что успех - это не пункт назначения, это путь, который каждый проходит самостоятельно.
Speaker A
[музыка]
Topics:Visual Studio CodeVS Codeинтегрированная среда разработкиустановка VS Codeнастройка интерфейсаплагины VS Codeработа с кодомGitLive Serverредакторы кода
