Что такое Visual Studio Code и зачем нужно его изучать. Visual Studio Code (VS Code) — редактор исходного кода, разработанный Microsoft. Работает на Windows, Linux и macOS. Понимает синтаксис популярных языков программирования, включая javascript, делает красивую подсветку конструкций языка, что облегчает разработчику работу над кодом. VS Code популярен в IT компаниях, знание данного редактора облегчает трудоустройство при поиске работы по найму. Фрилансеру облегчает процесс поиска заказчика, как и любое другое знание продуктов компании Microsoft.
Введение: Первые шаги в освоении Visual Studio Code
Всем большой привет!
Сегодня у нас: Первые шаги в освоении Visual Studio Code.
Это такой универсальный редактор для программистов.
Этот курс, я предполагаю, будет интересен новичкам.
А поскольку я сам новичок, никогда Visual Studio Code не использовал, только начинаю его освоение, думаю, что этот курс будет полезен таким же новичкам.
Начнем мы с того, зачем вообще нужен этот редактор, зачем его нужно изучать.
Этот редактор разработан компанией Microsoft. А значит, это продукт высочайшего качества. Работает на всех популярных операционных системах. Конечно на Windows, Linux и macOS.
И что очень важно: понимает синтаксис популярных языков программирования, включая javascript. Делает красивую подсветку конструкций языка, что облегчает разработчику работу над кодом.
Важно отметить, что Microsoft начала работать над этим программным продуктом в 2015 году. Провела несколько лет напряженной работы над ним. И сейчас это ПО очень высокого качества.
Как следствие, Visual Studio Code очень популярен в IT компаниях для создания кодов программ. Знание данного редактора облегчает трудоустройство при поиске работы по найму. Фрилансеру облегчает процесс поиска заказчика, как и любое другое знание продуктов компании Microsoft.
Нажмите картинку выше, и в новом окне браузера появится картинка с более высоким качеством.
Эти частые вопросы, как правило, и отображают, что же это такое, с чем его едят...
Самый важный вопрос и ответ, наверное, вот этот:
What is the difference between Visual Studio Code and Visual Studio IDE?#
Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.
В чем разница между редактором "Visual Studio Code" и интегрированной средой разработки "Visual Studio"?#
Visual Studio Code - это оптимизированный редактор кода с поддержкой таких операций разработки, как отладка, выполнение задач и контроль версий. Он направлен на предоставление только тех инструментов, которые необходимы разработчику для быстрого цикла сборки-отладки кода, и оставляет более сложные рабочие процессы для более полнофункциональных IDE, таких как среда разработки Visual Studio.
Таким образом, имеем следующее.
Разница такая. Значок Visual Studio Code синего цвета. А у Visual Studio - фиолетовый.
После того, как прочитали факи (и документацию по установке), следующий разумный шаг: загрузить дистрибутив.
Автоматически он определяет какая операционная система.
В моем случае: Windows.
Здесь представлены все популярные операционные системы: macOS, Windows x64, Linux x64.
Нажмите картинку выше, и в новом окне браузера появится картинка с более высоким качеством.
В принципе можно, наверное, скачать, для другого компьютера, а потом установить...
Но мы пойдем простым путем, что он у нас определил, мы то и будем ставить.
Важный момент вот еще какой. Текущая версия 1.61. С которой я сейчас занимаюсь, и на которой я сейчас работаю. У вас будет версия, возможно, более новая. Я обратил внимание на это потому, что прошел несколько курсов, точнее, все курсы, которые были на самой Visual Studio Code. Там очень хорошие курсы. Правда, на английском языке, но очень качественно сделаны. Но есть один небольшой дефект. Они сделаны на базе более ранней версии, поэтому, есть некоторые нестыковки. В плане дизайна внесли изменения. Там она рассказывает, как оно было раньше. А сейчас стало немного по-другому. Но это просто небольшой напряг. Просто, надо это иметь ввиду.
Итак, будем считать, что мы успешно скачали, установили и теперь можно посмотреть, как ее запустить.
После установки, если вы работаете на Windows, запуск осуществляется так:
Запуск после установки отсюда:
c:\Users\USERNAME\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd
Т.е. запускается не EXE файл, а code.cmd, в нем уже прописан запуск EXE файла
USERNAME - это никнейм (логин) под которым вы работаете в Windows
На рабочем столе установится вот эта иконка. Но можно также запускать через code.cmd
Если вы пропишите требуемый путь в переменную path (или там автоматом все прописалось), то можно запускать просто командой code без указания пути.
В результате наша программа Visual Studio Code должна возбудиться к жизни.
Нажмите картинку выше, и в новом окне браузера появится картинка с более высоким качеством.
Знакомство с программой "VS Code": наши первые клики в интерфейсе.
Если окно "Get Started" не вызвалось автоматически, то нажмите последовательно:
Help - Get Started - Walkthroughs
Нажмите картинку выше, и в новом окне браузера появится картинка с более высоким качеством.
Теперь нажимаем "Get Started with VS Code"
Это как раз то, что нужно новичку, чтобы ознакомиться с программой.
Visual Studio Code. Help - Get Started - Walkthroughs. Get Started with VS Code. Browse Color Themes.
Тут надо отметить: если сразу после установки в разделе "Get Started" Walkthroughs представлен отдельным подразделом и имеет в своем составе нужные ссылки:
Get Started with VS Code - Discover the best customizations to make VS Code yours.
Learn the Fundamentals - Jump right into VS Code and get an overview of the must-have features.
Boost your Productivity
Переведем, на всякий случай, на русский:
Начинаем работу с VS-кодом - Откройте для себя лучшие настройки, чтобы сделать "VS Code" вашим любимцем.
Изучаем основы - Переходим прямо в программу "VS Code" и получаем обзор необходимых особенностей(фичей).
Повышаем производительность труда
Так вот, после того, как я немного побродил по этому самому "Walkthroughs", в следующем запуске программы "VS Code" автоматически были произведены некоторые изменения в интерфейсе раздела "Get Started".
Теперь на "Get Started" представлен не подраздел "Walkthroughs", а только ссылка на него с текстом "Open a Walkthrough" в разделе "Start".
См скриншот выше с подробностями.
Впрочем, такие игры с дизайном не должны нас смущать (и не такое бывает), идем дальше.
Нажмите картинку выше, и в новом окне браузера появится картинка с более высоким качеством.
В подразделе "Get Started with VS Code" ("Начинаем работу с VS-кодом") предлагаются следующие темы для изучения.
Choose the look you want
Sync to and from other devices
One shortcut to access everything
Rich support for all your languages
Quickly navigate between your files
Переведем на русский:
Выберите дизайн программы, который вам нравится
Синхронизация с другими устройствами (девайсами)
Горячие комбинации клавиш для быстрого доступа
Расширенная поддержка всех ваших языков программирования
Тренировка для новичков: Расширенная поддержка всех ваших языков программирования.
Rich support for all your languages. Расширенная поддержка всех ваших языков программирования.
Отмечены следующие языки программирования:
JavaScript
Python
Java
Markdown
TypeScript
C/C++
JSON
PowerShell
HTML/CSS
C#
PHP
YAML
Обращаю внимание, что речь идет именно об языках программирования, а не о человеческих языках: русский, английский и т.д.
Хотя, забегая немного вперед, отмечу, что вот эту шкурку (имеется ввиду дизайн, пункты меню) можно на русский язык поставить. Но делать мне этого не хочется, и вам делать не советую. Такая русификация только усложняет изучение. Приходится запоминать не только английские термины, но и русские.
Лучше держаться одного языка, английского, в данном случае. Так будет намного проще.
Но это мы немного отвлеклись. Здесь имеется ввиду поддержка языков программирования.
Как видим, здесь есть практически все популярные языки программирования.
Посмотрим, как это делается.
Нажимаем кнопку: "Browse Language Extensions".
В результате мы попали в раздел "Extensions" с установленным фильтром "@recommended:languages".
Этого же эффекта можно было достичь путем нажатия кнопки "Extensions" (или горячей комбинацией клавиш Ctrl+Shift+X), а затем набрать в фильтре: @recommended:languages.
Здесь список расширений (Extensions), которые касаются языков программирования.
Посмотрим эти расширения (Extensions) немного подробнее.
Нажмем кнопку фильтр (воронка).
Далее, нажимаем кнопку "Installed" (установленные). Получаем список расширений, установленных данным пользователем (т.е. мною).
У меня установлены следующие расширения (Extensions).
В данном списке я указал количество скачиваний, чтобы можно было представить уровень популярности каждого расширения.
Я перед тем как делать этот курс, посмотрел несколько других курсов. И на основании опыта других программеров, своих представлений, установил у себя данные расширения.
Я считаю, этот список - есть минимальный джентельменский набор, который должен иметь каждый.
Я советую вам пройтись по этому списку и повторить все эти установки у себя.
В крайнем случае, любое из этих расширений можно будет потом деинсталлировать или дезактивировать.
А искать эти расширения нужно следующим образом.
Наберите: Auto Close Tag
В моем случае расширение "Auto Close Tag" уже установлено, поэтому здесь отображаются кнопки "Disable" и "Uninstall"
У вас же здесь будет кнопка "Install". Ее и следует нажать для установки.
Подобным же образом установите другие расширения из списка.
Теперь продолжаем обучение в разделе "Get Started" в подразделе "Learn the Fundamentals", который предназначен для чуть более продвинутых пользователей.
Learn the Fundamentals - Jump right into VS Code and get an overview of the must-have features.
Изучаем основы - Переходим прямо в программу "VS Code" и получаем обзор необходимых особенностей(фичей).
В подразделе "Learn the Fundamentals" ("Изучаем основы") предлагаются следующие темы для изучения.
Redefine your editing skills
Convenient built-in terminal
Limitless extensibility
Tune your settings
Lean back and learn
Переведем на русский:
Прокачайте свои навыки редактирования
Удобный встроенный терминал
Безграничная расширяемость
Настройте свои настройки
Откиньтесь назад и учитесь
Теперь, давайте, последовательно пройдем каждую тему.
Изучаем основы: Прокачайте свои навыки редактирования.
Redefine your editing skills. Прокачайте свои навыки редактирования.
"Open Editor Playground" - интересная игрушка, с помощью которой, играя и развлекаясь, можно научиться некоторым новым полезным навыкам работы в редакторе.
Выбор цвета можно производить как стандартно набирая код, так и просто тыкнув в нужный цвет в специальной палитре.
Несколько полезных горячих комбинаций клавиш:
Копирование строки и вставка ее контента вверх или вниз от текущей позиции: Shift+Alt+↑ или Shift+Alt+↓
Перенос строки вверх или вниз: Alt+↑ или Alt+↓
Удаление текущей строки Ctrl+Shift+K
Потренируйтесь с этими и другими горячими комбинациями клавиш в "Open Editor Playground".
Здесь рекомендуется обратить внимание на расширения, установка которых рекомендуется разработчиками "VS Code".
Нужно ли устанавливать эти рекомендуемые расширения?
Это вопрос очень индивидуальный.
Например, если вы переходите с "Notepad++" на "VS Code", то, возможно, вам есть смысл поставить расширение "Notepad++ keymap". В этом случае горячие комбинации клавиш будут соответствовать тем, которые задействованы в "Notepad++", а это, возможно, облегчит переход.
Но надо обратить внимание. Курсы сделаны на основе версии 1.47, сейчас актуальная версия 1.61, могут быть некоторые проблемы с расхождениями.
Курсы на английском языке. Дикция у девушки (Ornella Altunyan, Орнелла Альтунян, технический писатель) хорошая, но все-таки, говорит быстро, возможны трудности с пониманием.