Studio code: Download Visual Studio Code — Mac, Linux, Windows

Улучшение Visual Studio Code для новичков / Хабр

VSCode — самый популярный редактор кода среди веб-разработчиков. Вы можете использовать его с нуля, однако со временем его базовых функций станет недостаточно. Рассказываю, как сам докрутил этот редактор под свои потребности.

Статья дорабатывается по вашим замечаниям. Спасибо всем за комментарии.

Содержание

• Вводная часть

  • История появления редактора

  • Особенности

  • Преимущества

  • Почему не VSCode

• Настройки

  • JSON vs UI

  • Синхронизация настроек

  • Сортировка и поиск настроек в JSON

  • Полезные настройки

• Любимые расширения

Вводная часть

История появления редактора

VSCode разрабатывается в Microsoft и унаследовал имя от их тяжеловесного IDE — Visual Studio. Первый релиз был аж в апреле 2015 года. В 2016 году редактор стал доступен для всех желающих.

Особенности

• Сделан с помощью Electron.js, то есть под капотом у него HTML + CSS + JS

• Поддерживает разработку на разных языках: Java, JavaScript, Go, Node.js, Python, C++ и так далее (см. Расширения)

• Имеет ОГРОМНОЕ количество настроек, которыми удобно управлять

• Многие фичи скрыты из графического интерфейса, но их можно найти через Command Pallete (cmd/win + shift + P)

• Возможности редактора могут быть дополнены с помощью расширений

• Удобный и быстрый магазин расширений внутри редактора и через браузер

• Собирает данные и шлёт их в Microsoft, но телеметрию можно отключить в настройках

• В среднем скорость отклика медленнее, чем у нативных конкурентов

Преимущества

• Быстрее, чем типичное приложение на Electron.js

• Сообщество

• Плотная интеграция с Github

• Плотная интеграция с TypeScript

• Open source

• Бесплатный

• Низкий порог входа

• Можно настроить под себя почти что угодно

Настройки

Настройки — это моя любимая часть VSCode. За пять лет я потратил на них десятки часов (если не сотни).

JSON vs UI

У настроек есть два режима просмотра/управления:

• Стандартный просмотр через UI с категориями и поиском

• Просмотр большого JSON со всеми изменёнными настройками

Забавно, что шоткат для настроек cmd/win + , по умолчанию вызывает именно JSON-режим. А для GUI-режима нужно нажать более длинный cmd/win + shift + ,. Наверное, это исторически так сложилось 🤷‍♂️

Синхронизация настроек

VSCode сам научился синхронизировать настройки между устройствами. До этого требовалось расширение и пара гистов на Гитхабе.

Кажется, тут нечего добавить, потому что синхронизация легко настраивается через меню «Шестерёнка» (требует логина через Github).

Сортировка и поиск настроек через JSON

В режиме JSON мы видим только те параметры, которые отличаются от настроек по умолчанию. Если вы открыли VSCode впервые, то в файле будет только {}. Со временем, по мере подстройки редактора, он наполнится — в моём сейчас 370 строк.

Чтобы было удобнее ориентироваться, я использую автосортировку по алфавиту (с помощью расширения JSON-sort) и пользуюсь поиском по ключевым словам в файле.

VSCode сам линтит этот JSON: предупреждает об ошибках, подсказывает имена настроек и делает тусклыми неиспользуемые опции.

Полезные настройки

Некоторые из моих любимых! Их можно просто скопировать себе в JSON с настройками.

Доводка редактора

"editor.acceptSuggestionOnEnter": "off",
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.foldingImportsByDefault": true,
"editor.fontFamily": "'Fira Code', 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.guides.bracketPairs": "active",
"editor.inlineSuggest.enabled": true,
"editor.lineNumbers": "interval",
"editor.linkedEditing": true, // doesn’t work for JSX 
"editor.minimap.enabled": false,
"editor. quickSuggestions": false,
"editor.scrollBeyondLastColumn": 0,
"editor.suggest.preview": true,
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.unicodeHighlight.ambiguousCharacters": false, // useful for russian symbols

Улучшение JS

Эти настройки позволяют делать статическую типизацию в JS без использования TypeScript.

// подсказки типов ⬇️
"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "literals",
"javascript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.variableTypes.enabled": true,
"javascript.updateImportsOnFileMove.enabled": "always",
// ошибки типизации ⬇️
"js/ts.implicitProjectConfig.checkJs": true,

Прочее

// Работа с файлами
"files.autoSave": "onFocusChange",
"files.defaultLanguage": "markdown",
// Доводка терминала
"terminal.integrated. defaultProfile.osx": "zsh",
"terminal.integrated.fontSize": 10,
// Доводка рабочей области
"workbench.colorCustomizations": {
    "tab.activeBackground": "#fff3"
},
"workbench.editor.limit.value": 5,

Расширения

Я часто ищу новые расширения и отключаю бесполезные. Для того чтобы накопить несколько десятков любимых расширений, мне потребовалось 5 лет. Ищи favorite list ниже 😉

Featured

VSCode помимо хорошего поиска и удобных категорий имеет тэг с отборными расширениями, которые меняются примерно раз в месяц. Рекомендую иногда в него заглядывать, чтобы находить свежие и интересные штуки.

Любимые расширения

1. Error Lens

   Улучшает подсветку ошибок, ворнингов и прочей информации

2. Change-case

   Быстрая замена регистра и стиля написания выделенного текста: CONSTANT_CASE, snake_case, etc.

3. Material Icon Theme

   Иконки в стиле Material Design, но главное что их очень много и они гармоничнее прочих. По-моему лучшие.

4. Project Manager

   Лёгкий способ переключать проекты в редакторе

5. Quit Control for VSCode

   Для тех, кто периодически всё проклинает из-за случайно нажатого CMD + Q. Спасительная штука.

6. GitLens — Git supercharged

   Git GUI на стероидах прямо в VSCode. Тот случай, когда 80% проблем легче решить из графического интерфейса, чем в терминале.

7. New Relic CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review

   Единый интерфейс для отправки, ревью и приёма ваших PR и MR в VSCode с удобным интерфейсом. Можно даже не заходить на сайт бесплатного и устаревшего self-hosted GitLab вашей конторы вашего хостинга для Гита

8. Markdown All in One

   Всё, что вам надо для написания Markdown (keyboard shortcuts, table of contents, auto preview and more)

9. Open in browser

   🤷‍♂️

10. Path Intellisense

    Автокомплит для путей до файлов

11. Prettier — Code formatter

    Автоматическое форматирование кода почти без настроек

12. Quokka. js

    JS/TS интерактивная среда исполнения кода прямо в VSCode

13. REST Client

    Как Postman, но в виде файлов в вашем проекте

14. Tabnine AI

    Нейросетевые подсказки кода экономящие вам время

15. Turbo Console Log

    console.log по шоткату с генерацией подписей. Всё.

16. WakaTime

    Штука, которая считает время написания кода, а не просто время открытого тикета или редактора. Есть подробная статистика.

17. Auto Rename Tag

    Автоматическое переименование парных тэгов в HTML и JSX

18. Better Comments

    Улучшенное комментирование кода с помощью аннотаций с предупреждениями, информацией, TODO и многим другим!

19. gitignore

    Позволяет извлекать шаблоны .gitignore из репозитория https://github.com/github/gitignore.

20. ESLint

    Интегрирует ESLint JavaScript в VS Code.

21. Babel JavaScript

    Продвинутая подсветка для новейшего стандарта JS

22. Color Highlight

    Указание цвета с колорпикером рядом с цветовыми кодами.

23. Draw.io Integration

    Draw.io внутри VSCode

24. EditorConfig for VS Code

    Поддержка EditorConfig

25. Git Graph

    Визуализация ветвления в Git

26. GitHub Pull Requests and Issues

    Работа с Github PRs и Issues внутри VSCode

27. GitHub Repositories

    Управление репозиториями на Github через VSCode

28. HTML CSS Support

    Автодополнение CSS

29. Intelli Refactor

    Продвинутые возможности по авто-рефакторингу кода (как у IntelliJ IDEA)

30. IntelliSense for CSS class names in HTML

    Автодополнение названий стилевых классов в HTML

31. LeetCode

    Возможность поиска, проверки и подтверждения задач из LeetCode не выходя из VS Code

33. Live Share

    Совместное редактирование кода в реальном времени

34. npm

    Поддержка NPM для VS Code

36. Sort JSON objects

    Умная сортировка JSON

37. Space Block Jumper

    Для быстрого перемещения по блокам кода

🚀 Если у вас есть свои хитрости и находки, поделитесь в комментариях. Обсудим вместе!

Руководство для начинающих по настройке Visual Studio Code в Windows

Visual Studio Code от Microsoft, также известный как VS Code, является одним из лучших бесплатных приложений для редактирования кода. Приложение является популярным выбором для большинства разработчиков, потому что оно относительно простое в использовании и обладает уникальными функциями, которые делают программирование менее сложным и повторяющимся.

Если вы заинтересованы в проверке VS Code и использовании возможностей и функций, которые он предлагает, вот как заставить его работать на вашем ПК с Windows. Проверять Код Visual Studio против Atom: какой редактор кода вам подходит?

Что отличает VS Code?

Несмотря на постоянный приток первоклассных приложений для редактирования кода, есть несколько основных причин, по которым VS Code остается одним из самых популярных и функциональных вариантов.

Во-первых, Visual Studio Code является бесплатным и многофункциональным, что означает, что он совместим с другими компьютерными платформами, такими как Linux, Ubuntu и macOS. Это позволяет вам плавно переходить с одной операционной системы на другую, не сталкиваясь с какими-либо серьезными проблемами совместимости, за исключением небольших различий на основе ОС.

Еще одним преимуществом использования VS Code является то, что он имеет огромный набор функций, упрощающих написание, просмотр и выполнение кода. Это включает в себя подсветку синтаксиса и автозаполнение. Он также имеет встроенный репозиторий кода и собственный отладчик, который значительно ускоряет процесс устранения неполадок.

Кроме того, поскольку это самый популярный текстовый редактор, многие разработчики приложений с открытым исходным кодом постоянно разрабатывают и обновляют плагины VS Code, что делает его более привлекательным, чем его ближайший конкурент Atom. GitHub сначала разработал Atom, а затем приобрел его Microsoft , что приблизило Atom к Visual Studio Code.

Чтобы сделать вещи еще более интересными, Microsoft недавно объявила, что теперь вы можете начать программировать в своем браузере с помощью Microsoft Visual Studio Online. Это означает, что теперь вы можете писать и запускать код на ходу, а также сохранять свою работу в любой другой системе, подключенной к Интернету, когда ваш персональный компьютер недоступен.

Эта разработка также означает, что члены команды, находящиеся в разных местах, теперь могут совместно работать над проектом и видеть результаты своей работы в режиме реального времени, что делает программирование с помощью VS Code еще более привлекательным. Проверять Лучшие альтернативные приложения для редактирования текста Gedit в Linux.

Как скачать и установить VS Code в Windows

Установка Visual Studio Code проста и легка в выполнении, если вы придерживаетесь следующих шагов:

1. Перейдите на официальный сайт Microsoft Visual Studio Code.

Войти на сайт Код Visual Studio в Интернете и щелкните стрелку раскрывающегося списка рядом с кнопкой . Скачать для Windows. После этого вам будут предложены разные варианты. Нажмите на наиболее подходящий вариант для вашего компьютера, и загрузка начнется автоматически.

Если вы не уверены, какую версию скачать, мы рекомендуем вам проверить Технические характеристики ПК Вы должны решить, какой из них будет идеально подходить для вашей системы. Затем нажмите на версию, которую хотите загрузить, и загрузка начнется автоматически.

2. Запустите мастер установки и выберите папку назначения

После завершения загрузки запустите установщик. Примите лицензию, согласившись с условиями на вашем экране, и коснитесь следующий.

Можно Выберите место назначения Чем найти все файлы, связанные с VS Code, на вашем компьютере. По умолчанию это папка Program Files на локальном диске вашего компьютера. Чтобы изменить место назначения, нажмите «Обзор» и выберите новый каталог.

Обратите внимание, что для Visual Studio Code требуется минимальное пространство для хранения. Таким образом, у вас должно быть достаточно места для установки приложения. Если у вас недостаточно места, удалите некоторые приложения или мультимедийные файлы и очистите корзину, а затем попробуйте перезапустить программу установки.

Повторяйте эту задачу до тех пор, пока не будет достаточно свободного места для завершения установки, затем щелкните следующий.

3. Выберите папку меню «Пуск».

Этот шаг позволяет вам создать папку в меню «Пуск», содержащую ярлык VS Code, чтобы вы могли получить доступ к приложению одним нажатием кнопки Windows после завершения установки.

Вы можете изменить вероятное расположение ярлыка, нажав кнопку Обзор. Выберите место по вашему выбору и нажмите следующий. Если вы решили не создавать ярлык приложения, установите флажок Папка меню «Пуск» не создана.

Сделав свой выбор, нажмите «Далее», чтобы перейти к следующему этапу установки.

4. Определите дополнительные задачи

Это сообщает установщику, должен ли он включать дополнительные функции в приложение.

Мы рекомендуем поставить галочку напротив Создать иконку на рабочем столе Чтобы создать значок на главном экране, чтобы обеспечить быстрый доступ к приложению. Однако снятие этого флажка не повлияет на качество вашей работы или общую функциональность приложения.

После установки других флажков в соответствии с вашими предпочтениями нажмите следующий.

5. Завершите установку

Тяжелая часть позади. Просто откиньтесь на спинку кресла и дождитесь окончания процесса установки, затем нажмите «Готово». Затем запустите приложение, и Microsoft Visual Studio Code должен быть готов к использованию. Проверять Руководство для начинающих по Android Studio для разработки приложений.

Начало работы с VS Code

После успешной установки Visual Studio Code необходимо настроить его. При первом запуске приложения вы увидите стартовую страницу с кодом Visual Studio. Это отправная точка для вашей персонализации, и мы дадим вам несколько полезных советов по настройке.

1. Выберите внешний вид цвета

Как и в любом современном приложении, вы можете настроить VS Code на различные цветовые темы в зависимости от ваших предпочтений. Нажмите «Обзор цветовых тем», чтобы просмотреть различные доступные темы. Это отобразит выпадающее меню; Вы можете использовать клавиши со стрелками на клавиатуре для предварительного просмотра и щелкнуть левой кнопкой мыши, чтобы применить его.

Мы рекомендуем, пытаясь понять, как работать младшим разработчиком, выбрать высококонтрастную цветовую тему, чтобы не перегружаться и не путаться в цветовой схеме.

2. Настройте параметры

Разработчики не торопились, чтобы собрать наиболее часто используемые настройки, чтобы помочь вам воспользоваться преимуществами VS Code. Чем лучше вы становитесь программистом, тем больше вы можете настроить параметры. А пока давайте придерживаться основ.

Щелкните Параметры на второй открытой вкладке в Visual Studio Code. Вы также можете открыть «Настройки», щелкнув нижний значок на вертикальной панели в левой части экрана и щелкнув «Настройки» после открытия меню.

Следуйте за ним, нажав на наиболее используемый , который будет первым элементом вертикального меню слева от меню VS Code. Прокрутите содержимое, отображаемое на экране, и настройте его по своему вкусу.

3. Используйте меню команд

Есть несколько основных сочетаний клавиш Visual Studio Code, которые вам следует изучить. Это повысит вашу эффективность и поможет вам на пути к мастерству.

Некоторые из наиболее полезных из них Shift + Alt + Вверх و Shift + Alt + вниз P , который позволяет копировать и вставлять отдельные строки кода. Вы также можете попробовать Ctrl+Shift+ Отображает панель команд во время программирования.

4. Установите дополнения.

Из-за открытого исходного кода Visual Studio Code разработчики постоянно работают над созданием подключаемых модулей. Плагины имеют широкий спектр применений, некоторые из которых просто украшают форматирование вашего кода.

Напротив, другие параметры имеют более практическое применение, например расширение Python, которое помогает эффективно выполнять отладку, рефакторинг и навигацию по языку программирования Python.

Поэтому мы рекомендуем изучить рынок расширений приложений, чтобы найти расширения, соответствующие вашим интересам. Проверять 13 лучших надстроек кода Visual Studio, которые вы должны попробовать.

Сделайте следующие шаги в Visual Studio Code

Подобно обучению программированию, овладение тонкостями Visual Studio Code может быть достигнуто только путем последовательной практики. Опыт, который вы получите как разработчик, также напрямую повлияет на ваш уровень навыков в среде VS Code.

Поскольку обучение никогда не заканчивается, мы призываем вас быть в курсе новых разработок в экосистеме VS Code. Начиная от новых функций и дополнений к настройкам, они улучшат ваш опыт программирования и повысят вашу эффективность. Теперь вы можете просмотреть Что делать, когда вы боретесь с обучением программированию.

Источник

Кодовый сервер Visual Studio

Редактировать

Visual Studio Code Server — это служба, которую вы можете запустить на удаленной машине разработки, например на настольном ПК или виртуальной машине (ВМ). Это позволяет вам безопасно подключаться к этому удаленному компьютеру из любого места через локальный клиент VS Code без необходимости использования SSH.

Что такое VS Code Server?

В VS Code мы хотим, чтобы пользователи беспрепятственно использовали среды, которые делают их наиболее продуктивными. Расширения удаленной разработки VS Code позволяют работать в подсистеме Windows для Linux (WSL), удаленных компьютерах через SSH и контейнерах разработки непосредственно из VS Code. Эти расширения устанавливают сервер в удаленной среде, позволяя локальному коду VS беспрепятственно взаимодействовать с удаленным исходным кодом и средами выполнения.

Теперь мы предоставляем автономный «VS Code Server», который представляет собой службу, построенную на том же базовом сервере, который используется удаленными расширениями, а также некоторые дополнительные функции, такие как интерактивный интерфейс командной строки и обеспечение безопасного подключения к vscode.

dev.

Архитектура

Мы хотим предоставить единый интерфейс VS Code независимо от того, как вы используете редактор, будь то локальный или удаленный, на рабочем столе или в браузере.

Доступ к VS Code Server встроен в существующий код CLI.

CLI устанавливает туннель между клиентом VS Code и вашим удаленным компьютером. Туннелирование обеспечивает безопасную передачу данных из одной сети в другую.

Работа с VS Code Server включает несколько компонентов:

• VS Code Server: внутренний сервер, обеспечивающий удаленную работу с VS Code.
• Расширение Remote — Tunnels: автоматически загружается в ваш локальный клиент VS Code и облегчает подключение к удаленному компьютеру.

Сценарии

Сервер VS Code позволяет вам использовать VS Code новыми способами, например:

• Разработка на удаленном компьютере, где поддержка SSH может быть ограничена, или вам нужен доступ через Интернет.
• Разработка на компьютере, который не поддерживает установку настольной версии VS Code, например на iPad/планшете или Chromebook.
• Преимущество безопасности на стороне клиента заключается в том, что весь код может выполняться в изолированной программной среде браузера.

Начало работы

Вы можете выбрать один из двух путей для включения туннелирования, которые более подробно описаны в соответствующих документах:

• Запустите команду туннеля в CLI code
• Включить туннелирование через пользовательский интерфейс VS Code

Что стоит попробовать

Лицензирование и другие команды

При первом запуске VS Code Server вам будут предложены условия лицензии. Вы можете просмотреть лицензию для VS Code Server здесь.

 * Сервер кода Visual Studio
*
* Используя программное обеспечение, вы соглашаетесь с
* Условия лицензии Visual Studio Code Server (https://aka. ms/vscode-server-license) и
* Заявление о конфиденциальности Microsoft (https://privacy.microsoft.com/en-US/privacystatement).
 

Вы можете изучить другие команды CLI, запустив code -h , и, в частности, команды туннелирования, запустив code tube -help :

Команды расширения

Как и в случае с CLI, расширение VS Code Remote Tunnels содержит дополнительные команды, которые вы можете изучить, открыв палитру команд ( F1 ) в VS Code и введите

Удаленные туннели . Вы можете узнать больше в документации по удаленным туннелям.

Телеметрия

Если вы хотите отключить телеметрию, вы можете передать --disable-telemetry при запуске VS Code Server: туннель кода --disable-telemetry . В качестве альтернативы, если вы хотите указать начальный уровень телеметрии, например только сбор ошибок, вы можете передать --telemetry-level , за которым следует уровень (например, ошибка ).

Если телеметрия не отключена через интерфейс командной строки, VS Code Server начнет учитывать настройки телеметрии клиента (ваши настройки телеметрии в vscode.dev или на рабочем столе) после успешного подключения.

Общие вопросы

Предназначен ли VS Code Server для доступа нескольких пользователей к одному и тому же удаленному экземпляру?

Нет, экземпляр сервера предназначен для доступа к одному пользователю.

Могу ли я разместить VS Code Server в качестве службы?

Нет, размещение как услуги не разрешено, как указано в лицензии VS Code Server.

Есть ли список конечных точек, которые использует VS Code Server?

Если вы работаете в среде с ограниченным доступом, вам может потребоваться обеспечить доступ VS Code Server к следующим конечным точкам:

• https://code. visualstudio.com/docs/setup/network#_common-hostnames
• https://code.visualstudio.com/docs/remote/ssh#_what-are-the-connectivity-requirements-for-the-vs-code-server-when-it-is-running-on-a-remote -машина-вм

Можно ли использовать расширения удаленной разработки или контейнер разработки с VS Code Server?

Не сейчас.

Существуют ли другие ограничения расширения?

Расширения Pure UI не поддерживаются при использовании веб-экземпляра VS Code, о чем вы можете узнать больше в руководстве по удаленной разработке для авторов расширений.

Существуют ли ограничения браузера?

При работе в браузере необходимо учитывать определенные ограничения и действия по настройке. Подробнее об этом можно прочитать в документации по VS Code для Интернета.

Как поддерживать VS Code Server в актуальном состоянии?

Вы получите уведомление в VS Code при подключении к удаленному компьютеру, если доступно обновление, и сможете выполнить обновление непосредственно через это уведомление.

Я вижу ошибку о хранилище ключей. Что я должен делать?

Для синхронизации настроек требуется аутентификация на сервере синхронизации настроек. Соответствующий секрет сохраняется на сервере. Для этого необходимо настроить связку ключей на сервере. Если связка ключей не настроена, сервер VS Code использует секрет в памяти, хранящийся на сервере. В этом случае секреты сохраняются только в течение всего срока службы сервера.

Где я могу оставить отзыв или сообщить о проблеме?

Если у вас есть какие-либо вопросы или отзывы, отправьте сообщение о проблеме в репозиторий VS Code Remote GitHub.