Vs code что это

Code editing. Redefined.

By using VS Code, you agree to its license and privacy statement.

Meet IntelliSense.

Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.

Print statement debugging is a thing of the past.

Debug code right from the editor. Launch or attach to your running apps and debug with break points, call stacks, and an interactive console.

Git commands built-in.

Working with Git and other SCM providers has never been easier. Review diffs, stage files, and make commits right from the editor. Push and pull from any hosted SCM service.

Extensible and customizable.

Want even more features? Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won’t slow down your editor. Learn more about extensions.

Deploy with confidence and ease

With Microsoft Azure you can deploy and host your React, Angular, Vue, Node, Python (and more!) sites, store and query relational and document based data, and scale with serverless computing, all with ease, all from within VS Code.

VS Code for

Windows Windows 8, 10, 11

.deb Debian, Ubuntu .rpm Red Hat, Fedora, SUSE

Mac macOS 10.11+

Want new features sooner?

Use vscode.dev for quick edits online!

GitHub, Azure Repos, and local files.

License and Privacy Terms

By downloading and using Visual Studio Code, you agree to the license terms and privacy statement. VS Code automatically sends telemetry data and crash dumps to help us improve the product. If you would prefer not to have this data sent please go see How to Disable Crash Reporting to learn how to disable it.

Visual Studio Code

Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.

Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет VS Code, и рассмотрим некоторые функции, которые могут вам пригодиться. Поэтому пост заинтересует и тех, кто не знаком с этим редактором, и активных пользователей, которые найдут полезное для себя.

VS Code

Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:

• Скорость. Часто возникает ситуация, когда нужно поправить пару файлов в проекте или посмотреть, как что-то реализовано. В такой ситуации открывать тяжеловесную IDE совсем не хочется. Время запуска VS Code сопоставимо с другими редакторами кода.
• Кастомизация. При разработке программ можно повысить свою продуктивность, настроив редактор под себя. Создавайте сниппеты, меняйте комбинации клавиш и создавайте новые, измените внешний вид редактора. VS Code предоставляет большие возможности для кастомизации и сегодня мы посмотрим на них подробно.
• Поддержка различных языков. VS Code понимает более 30 языков программирования. Под этим я имею ввиду выделение разными цветами методов, локальных переменных и так далее. Кроме того, из коробки полностью поддерживаются распространенные языки для веб-разработки: JavaScript, TypeScript, HTML, CSS. Для них работают все фичи, которые нужны при полноценной разработке: подсветка ошибок, подсказки по их исправлению, IntelliSense, навигация по коду, отладка, рефакторинг. Однако, это не значит, что остальные языки обделены. Перейдем к следующему пункту.
• Расширяемость. В VS Code богатая коллекция плагинов. С их помощью можно не только включить поддержку любых языков программирования, но и значительно повысить свою производительность.
• IntelliSense. Все предыдущие пункты не новы для других редакторов кода, но, как уже было сказано, VS Code – не просто редактор кода. Он предоставляет возможности, которые свойственны IDE, и IntelliSense одна из них. Этим термином называется умный автокомплит. Например, во время ввода он может подсказать, какие методы и свойства есть у объекта.
• Отладка. Еще одна стандартная фича IDE. Обходы методов, Call Stack, просмотр состояний локальных объектов, точки останова, в том числе и условные – все это есть.

Внешний вид

В нужной директории введите в терминал code . и увидите подобную картину:

Слева находятся пять блоков. Посмотрим, за что отвечает каждый из них.

• Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
• Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F . При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
• Source Control. Встроенная поддержка git и других систем контроля версий.
• Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
• Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:

В центральной части редактора вкладки с открытыми файлами. Несохраненные также помечаются кружком. При запуске VS Code открывается вкладка Welcome. Начать изучение редактора советую с нее. Открыть ее всегда можно через меню Help. Еще один способ изучить возможности VS Code – нажать CTRL + SHIFT + P . Так вы откроете Command Palette, где перечислены все команды редактора. Рядом с названием команды указывается комбинация клавиш, которая ей соответствует.

В нижней части – несколько других полезных вкладок. В Problems перечислены все ошибки и предупреждения от VS Code. Во время отладки можно смотреть значения локальных объектов в разделе Debug Console, а результаты выполнения во вкладке Output. В VS Code есть встроенный терминал, который открывается в корневой директории. По кнопке “плюс” можно добавлять терминалы, например, чтобы выполнять команды в разных директориях внутри проекта. По умолчанию для Windows в VS Code используется Powershell терминал, но это можно изменить. Займемся этим в следующем разделе.

Кастомизация

В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.

Изменение темы

Выберете цветовую гамму, которая нравится вам больше. В дефолтном варианте у редактора темная тема. Для смены нажмите CTRL + K, CTRL + T . Если набора из 14 стандартных тем будет недостаточно, введите в разделе с плагинами category:themes и выберете подходящую для вас.

Изменение настроек

Все дефолтные настройки VS Code перечислены в формате JSON. Чтобы переопределить их для себя, нужно создать файл settings.json и перечислить настройки, которые вы хотите изменить. Для этого нажмите CTRL + , . Слева перечислены все стандартные настройки и описание того, зачем они нужны. Справа – две вкладки: для пользовательских настроек и для настроек конкретного workspace. Для изменения дефолтного значения просто кликните на значок карандаша справа от настройки.

Рассмотрим некоторые настройки, которые могут вам пригодиться:

• Настройки редактирования.
  • Размер шрифта. «editor.fontSize»: 14
  • Размер таба. «editor.tabSize»: 4
  • Шрифт. «editor.fontFamily»: «Consolas, ‘Courier New’, monospace»
  • Перенос слов. «editor.wordWrap»: «on»

  Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.

  • Автосохранение. «files.autoSave»: «on»
  • Задержка при автосохранении. «files.autoSaveDelay»: 5000

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

  • Размер шрифта. «terminal.integrated.fontSize»: 14
  • Выбор терминала. «terminal.integrated.shell.windows»: «C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe»
  • Тип курсора. «terminal.integrated.cursorStyle»: «line»

  Все настройки, связанные с терминалом, находятся в разделе Integrated Terminal. Например, вы можете изменить отображение курсора с блока на линию.

  Создание задач

  Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:

  Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks . В открывшемся файле tasks.json создадим кастомную задачу.

  Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File ) и добавим нужные комбинации клавиш.

  Также задачи часто используются для автоматизации сборки кода и прогона тестов.

  Создание сниппетов

  Сниппетом называется фрагмент кода, который можно многократно использовать. Для этого нужно ввести ключевое слово, и он будет вставлен в текст программы. Создадим простой сниппет, который генерирует цикл for для языка C#. В Command Palette введите Preferences. Open User Snippets и выберите нужный язык программирования. Так выглядит сниппет для цикла for:

  

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

  Полезные комбинации клавиш

  Если вы уже привыкли к горячим клавишам в других редакторах или IDE и не хотите из-за этого переходить на VS Code, то вы можете подключить знакомые настройки, просто установив нужный плагин.

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

  • Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
  • Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.

  

  • Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
  • Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
  • Комментирование строки ( CTRL + / ).

  Команды выше работают и для нескольких строк.

  • Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
  • Выделение строки ( CTRL + I ).
  • Выделение слова ( CTRL + D ).
  • Множественный курсор. ( ALT + CLICK ).

  Заключение

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

  Intro to VS Code

  The most important tool for developers is that which lets us author code: the development environment. At Rithm School, we think it’s essential for all of our students to be on the same page as our instructors in using the same development environment. Thus, we are going to recommend using Visual Studio Code for our current and future students. Here’s why.

  IDEs vs. Text Editors

  First, let’s establish some context. For developers of many languages, standard practice dictates the use of an IDE (Integrated Development Environment). IDEs are generally heavyweight, fully-featured code editors that include things like build/compiler setup, debuggers, code analysis tools, and more. Examples of IDEs include Eclipse, Visual Studio, and XCode.

  By contrast, web developers have traditionally utilized text editors, which are very lightweight by comparison and have historically not shipped with many features. There exist IDEs for web dev (the most popular of which is probably WebStorm by JetBrains), but text editors such as Notepad++, Vim, Emacs, Sublime Text, and VS Code are still dominant.

  Why VS Code?

  What makes VS Code special? Microsoft’s Visual Studio Code is a text editor with powerful IDE-like features. Side note: VS Code is a totally separate product from Visual Studio the IDE.

  In terms of what is available right now, it seems like VS Code is a “best of both worlds” option between IDEs and Text Editors. Here are some more reasons why we’re using VS Code:

  • VS Code is simple to download and install on any OS.
  • It is completely free.
  • It is non-opinionated and open source, with non-proprietary standards.
  • You can bring your favorite keybindings from Sublime, Vim, etc. with you.
  • It’s easy to customize and has many useful extensions.
  • It has powerful IDE-like features including a built-in debugger and terminal.

  Getting Started

  For the purposes of this post, we’re going to assume the reader is using Mac/OSX for development, and thus the keyboard shortcuts will be OSX. If you’re following along on Windows or Linux, fear not; many of the commands are the same if you substitute the command key (⌘) for the control key, but here are the key binding reference docs just in case.

  1. If you haven’t already, download VS Code and install it by dragging it into the Applications folder.
  2. Open VS Code, and type command(⌘) + shift + p .
  3. Start typing the word “shell”.
  4. Select Install 'code' command in PATH . This will enable you to open VS Code from any terminal window by typing code . You can also pass an argument, such as the current folder ( . ), to open it with VS Code: code .

  Core Features

  IntelliSense

  Simply put, VS Code is excellent at code completion. By default, it will read special comments called document strings to guide you about function arguments and variable types on the fly. For JavaScript, VS Code utilizes the JS Doc standard out of the box.

  VS Code will also look into imported software modules (such as node_modules when developing in Node.js) and give you information about function argument types and descriptions. It also remembers what types variables are and guides you through available methods, etc.

  As an example, open up a new JavaScript file (make sure you’ve saved it as .js). Type the following: var a = [] . On a new line, type a. , then watch what VS Code prompts you with:

  For more information on IntelliSense including how to customize it, click here.

  Emmet and Snippets

  VS Code has Emmet abbreviations built in.

  Emmet uses CSS-selector syntax to generate chunks of HTML in any .html file. Emmet abbreviations also work in any stylesheet ( .css file). It will tab-complete and automatically place the cursor in any additional attribute values that need to be added, which you can tab through.

  Check out the Emmet section of our curriculum here or the emmet cheat-sheet here for reference. Also check out VS Code’s Emmet docs.

  You can also look into creating your own VS Code snippets. The syntax is very similar to other editor’s snippets, like Sublime. Or you could always download other people’s snippets!

  Terminal

  VS Code has a built-in terminal which, by default, is exactly the same as whatever your default terminal is (e.g. zsh, bash, etc.). The normal node and python commands, etc. work normally, and things like Virtual Environments will also apply. You can have multiple nested terminal sessions open as well.

  You can open the VS Code terminal with control(^) + backtick(`) , or simply click on the bottom left of the screen.

  Git Integration

  VS Code also automatically tracks source control changes for any project that is a valid git repository. Modified files will show up with an M next to them, while untracked (new) files will get a U . The colors will change depending on the git status.

  You can even stage, commit, and push from the source control view ( control(^) + shift + g ):

  Additionally, visual git merge conflict resolution is now built-in, so managing merge conflicts has never been easier. Files with conflicts will show up with a C next to them.

  Debugger

  The built-in VS Code Debugger for Node.js is very powerful, and it can be expanded with the popular Chrome Debugger extension. However, this requires a server to be running and is outside the scope of this blog post (perhaps in the future we can have a blog post about Debugging in VS Code ��).

  That said, if you are still interested, check out articles for debugging Node here and for React here. And here is the full reference for Node debugging.

  Command Palette & Code Navigation

  Command Palette

  Menu => View => Command Palette…

  Shortcut: command(⌘) + shift + p

  In VS Code, there is single bar at the top which lets you enter editor commands by keyword, such as settings . You can then select from the list that will appear, e.g. Preferences: Open User Settings .

  Using the command palette is the fastest way to configure VS Code and manage workspace (project) settings.

  However, take note of the > at the beginning of the bar. Changing this character makes the bar behave differently, enabling fast "Go To Commands", listed below.

  Go To File

  Shortcut: command(⌘) + p

  No character at the beginning of the bar lets you quickly search and go to files. The files are sorted by recently opened.

  Go To Line

  Shortcut: control(^) + g

  : at the beginning of the bar lets you jump to a specific line in the current file.

  Go To Symbol in File

  Menu => Go => Go To Symbol in File…

  Shortcut: command(⌘) + shift + o

  @ at the beginning of the bar is a symbol search in the current file. Examples of symbols are variables, functions, classes, React components, etc.

  Adding : after the @ will group symbols by category, e.g. @: will show all the variables grouped together separated by functions and classes, etc.

  Go To Symbol in Workspace

  Menu => Go => Go To Symbol in Workspace…

  Shortcut: command(⌘) + t

  # at the beginning of the bar is an extremely powerful tool — search for symbols across the entire project. This can give you insights regarding all the files that a specific function is used, for example, like a more precise global search.

  The above gif shows searching for the User class, which is a model that gets imported in many places.

  Go To Definition

  Menu => Go => Go To Definition

  Shortcut: command(⌘) + click

  A fantastic feature of VS Code is the ability to look up where functions or classes are originally declared/defined. You can do this simply by holding down the command key and clicking on a function invocation just as you would click a hyperlink.

  Note that depending on the project configuration and extensions you have installed, you may have to click where the import or require statements are in the file. But when it works, it saves you a lot of time.

  In the above gif, the original file open is server/handlers/user.js and clicking on the ensureCorrectUser function invocation takes us to where it was declared: server/helpers/ensureCorrectUser.js .

  You can also “Go To Definition” by right clicking on the code.

  Find & Replace

  VS Code has standard text editor find and replace with special options for case sensitivity, whole word match, and regular expressions.

  Tip: You can quickly reuse a previous search term by using option(⌥) + down arrow(↓) and option(⌥) + up arrow(↑) to navigate through your search term history.

  Find in Current File

  Shortcut: command(⌘) + f

  Replace in Current File

  Shortcut: command(⌘) + option(⌥) + f

  Global Find Across all Files

  Menu => Edit => Find in Files

  Shortcut: command(⌘) + shift + f

  The above screenshot shows a global search of next() with a regex matching anything in between the parentheses.

  Global Replace Across all Files

  Menu => Edit => Replace in Files

  Shortcut: command(⌘) + shift + h

  How to Configure User Settings

  You will almost always want to customize your editor to fit your own user settings. To get to user settings use the shortcut command(⌘) + , . Alternatively, if you don't care to learn another shortcut, you can quickly access it via the command palette ( command(⌘) + shift + p , then type in user ).

  User settings will apply to your editor for every workspace (project). They are in JSON format, and you simply copy settings from the default panel (on the left) and append them in the user panel (on the right), thus overriding the defaults with your choices.

  As a shortcut, on the default panel (left), if you hover on the left edge where the line numbers would appear, a little pencil ✏️ appears. You can click the pencil ✏️ to automatically copy over the setting into your user settings.

  You may also have noticed the second tab called “Workspace Settings”. If you are working on a project with other devs using VS Code, you can apply custom settings to the workspace which will add a .vscode folder to your workspace/project/repository. If you check this folder into git, other team members' VS Code editors will automatically read from this file.

  My Top Five Keyboard Shortcuts

  1. Open the command palette with command(⌘) + shift + p which can get you pretty much anything you want. It is especially useful when you forget other shortcuts.
  2. Select other instances of a selected word with command(⌘) + d . Tip: You can also presscommand(⌘) + uif you want to undo the last selection (e.g. "oops I highlighted too many").
  3. Move lines or entire code blocks up and down by placing your cursor or making a selection and holding option key(⌥) while pressing up arrow(↑) or down arrow(↓)
  4. Add multiple cursors by holding command(⌘) + option key(⌥) and either: (a) pressing up arrow(↑) or down arrow(↓) to add a cursor to the same place on multiple lines or (b) clicking anywhere to add cursors wherever you click.
  5. Open the integrated terminal with control(^) + backtick(`)

  My Top 5 Extensions for Rithm Students

  . This extension brings prettier ( npm install —global prettier ) to VS Code. Combine this with the "editor.formatOnSave": true setting in your VS Code User settings for best results, in my opinion. adds ESLint ( npm install —global eslint ) support for all JS files. gives you the ability to right click on .html files in the file explorer (left) and open them in your default browser. lets you execute code on the fly via a large “play” button on the top right. Great for solving repl.it problems! . This extension allows to you reference .editorconfig files, which are a great standardfor collaborating on teams for basic editor setup (e.g. "set .js files to use 2 spaces for tab indentation").

  Awesome Features

  Peek Editor

  In VS Code, you can peek into other files without changing your current view or opening a new tab or window! The peek view is also its own mini-editor, inside which you can edit other files.

  You can select a symbol (function, class, variable, object, etc.) in a file and right click (i.e. two finger press or ctrl + click) on it and select “peek definition”.

  The default shortcut is option(⌥) + f12 , which is a bit clunky for a shortcut, so I would suggest "right clicking".

  A similar function is Find All References , which attempts to locate every instance of the selected thing.

  Note that your mileage may vary with these advanced features. You may need to configure of your project to have it work for larger projects.

  Refactor Into a Function

  If you select a few lines of logic statements in your code, you might see a lightbulb �� pop up on the left. If you click this lightbulb ��, it can automatically refactor your code into a new (scope-aware) function! This can be super helpful to keep your code organized.

  Type Checking Anywhere

  VS Code has native support for TypeScript. In any normal JS file, you can write this special comment at the top of the file to enable built-in TypeScript type check linting: // @ts-check .

  This is free type checking that won’t affect your production code at all!

  Fun / Extras

  Font with Ligatures

  You may have noticed in the above screenshots/gifs that my font has ligatures, meaning that triple equals (===) and other operators look different in my editor. I use a font called Fira Code, and it’s awesome! It has instructions on how to install in VS Code here.

  See how the => and === become their own symbols!

  Zen Mode

  VS Code has a built-in “Zen Mode” which hides most of the UI aside from the code. Use this feature when you want to focus intently on the act of coding itself ��. The shortcut is command(⌘) + k followed by z (two separate gestures).

  Visual Studio Code – редактор кода для Linux, OS X и Windows

  За свою долгую историю существования Microsoft выпустил немало инструментов разработки. Но так уж сложилось что на слуху у всех только лишь Visual Studio – большая и мощная IDE «комбайн» предназначенная для всего и вся. Развивается этот продукт уже более двух десятков лет и вобрал в себя самые разные функции. Многим этот инструментарий нравится и иногда даже задавали вопрос – будет ли перенесен Visual Studio на другие платформы. На что чаще всего получали ответ нет. Наверное, понятно почему, в целом такое портирование будет дорогим и неоправданно сложным, уж очень много всего в этой IDE завязано на Windows.

  И вот, этой весной для многих неожиданностью было то что Microsoft представил новый продукт под названием Visual Studio Code, да еще и работающий сразу на трех платформах, Linux, OS X и Windows. Не замахиваясь на все функции полноценной IDE, внутри Microsoft решили переосмыслить подход, по которому строится основной инструментарий программиста и начали с самого главного – редактора кода. Visual Studio Code это именно редактор, но при этом обладающий функциями IDE, полагающийся на расширения.

  

  Уже сейчас вы можете использовать Visual Studio Code для создания веб-проектов ASP.NET 5 или Node.js (в чем-то даже удобнее чем в «взрослой» Visual Studio), использовать различные языки, такие как JavaScript, TypeScript, C#, работать с пакетными менеджерами npm, скаффолдингом yeoman и даже осуществлять отладку. Плюсом ко всему будет отличный «интеллисенс», поддержка сниппетов кода, рефакторинг, навигация, многооконность, поддержка git и многое другое.

  Установка Visual Studio Code

  Mac OS X

  Linux

  Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте на него ссылку

  Windows

  Дополнительные инструменты

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

  — гибкий фреймворк создания современных веб-приложений – платформа для создания масштабируемых сетевых приложений – система контроля версий – инструмент «скаффолдинга» примерно тоже самое что и File | New Project в VS — yeoman генератор для ASP.NET 5 приложений, выполните npm install -g generator-aspnet для установки — yeoman генератор для быстрого создания AngularJS приложений, выполните npm install -g generator-hottowel для установки – фреймворк для Node приложений, использует «движок» шаблонов Jade – инструментарий создания «тасков» для выполнения сопутствующих сборке проекта задач – фреймворк создания модульных тестов на JavaScript/Node – клиентский пакетный менеджер – язык TypeScript, добавляет модульность, классы и прочие приятные вещи в ваш JavaScript код – определения TypeScript для популярных JavaScript библиотек, включают поддержку IntelliSense вVS Code

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

  Чтобы попробовать в деле VS Code, проще всего создать веб-проект Node. Для этого установите Node на свой компьютер (ссылка выше) и выполните следующие команды:

  В текущем каталоге будет создан проект, который можно будет открыть в Visual Studio Code. Для того чтобы проверить, что все работает как надо, выполните команду npm start и запустите браузер по адресу http://localhost:3000.
  После всех этих действий просто запустите VS Code в папке с проектом

  Если вы хотите попробовать возможности VS Code на примере ASP.NET 5 то можете воспользоваться инструкцией по адресу https://code.visualstudio.com/Docs/ASPnet5.

  Базовые возможности Visual Studio Code

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

  Файлы, папки, и проекты

  VS Code работает с файлами и папками в которых находятся проекты. В простейшем случае вы можете открыть файл на редактирование просто выполнив команду ./code index.html. Более интересным случаем является открытие папки. VS Code сам определяет тип проекта в зависимости от содержимого папки. Например, если в папке находятся файлы package.json, project.json, tsconfig.json или файлы .sln и .proj для Visual Studio ASP.NET 5.0 то VS Code включает много новых функций которые обеспечивают IntelliSence, подсказки, навигацию по коду, выполнение команд и многое другое.

  Расположение основных элементов

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

  1. Редактор, основной блок в котором осуществляется изменение содержимого открытого файла
  2. Сайдбар, с помощью которого можно увидеть различные представления файлов проекта
  3. Статусбар, показывающий текущий статус различных операций
  4. Вьюбар, позволяющий переключаться между режимами сайдбара и индицирующий с помощью иконок различную информацию, например количество исходящих git изменений

  

  Редактор VS Code может открыть для редактирования на экране до трех файлов одновременно, располагая их друг за другом справа. Открыть дополнительные редакторы можно различными способами:
  Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе
  Ctrl+\ для того чтобы разделить активный текущий редактор на два
  Open to the Side в контекстном меню файла в обозревателе

  Палитра команд

  Самым главным инструментом взаимодействия с редактором в VS Code является палитра команд. Вызвать ее можно через клавиатуру, нажав на комбинацию Ctrl+Shift+P. Множество команд перечисленных в палитре тоже привязаны к клавишам.

  

  Введите в строку команды знак вопроса? и тогда вы получите перечень команд которые работают в текущем контексте:

  

  Некоторые часто используемые команды:

  • Ctrl+P навигация к файлу или символу по набранной строке
  • Ctrl+Tab циклично открывает последние отредактированные файлы
  • Ctrl+Shift+P выводит список команд редактора
  • Ctrl+Shift+O навигация к некоторому символу в файле
  • Ctrl+G навигация к строке в файле
  • Ctrl+Tab выводит список всех файлов которые были открыты от момента запуска VS Code, удерживайте Ctrl и нажимайте Tab до тех пор пока не выберите нужный файл
  • Alt+Left и Alt+Right навигация по ранее редактированным файлам и строкам назад и вперед

  Обозреватель

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

  

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

  

  Автосохранение

  По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.

  Поиск

  Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.

  

  Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.

  

  Возможности редактора

  Подсказки IntelliSence

  Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.

  Подсказки параметров

  Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.
  

  Сниппеты кода

  VS Code поддерживает аббревиатуры Emmet. Вы можете использовать их при редактировании файлов HTML, Razor, CSS, Less, Sass, XML или Jade. Основной перечень аббревиатур можно посмотреть по адресу http://docs.emmet.io/cheat-sheet/.

  Переход к определению символа

  Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.
  

  Переход к методу или переменной

  Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.
  

  Для языков C# и TypeScript вы можете использовать комбинацию Ctrl+T и набрать нужный метод или переменную, при этом будет осуществлен поиск по всем файлам в проекте.
  

  Просмотр определения символа

  Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
  В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:
  

  Переименование методов и переменных

  Нажав F2 вы можете изменить имя метода или переменной. Стандартная операция рефакторинга, но пока она поддерживается только для языков C# и TypeScript.

  

  Отладка

  В VS Code входит отладчик. Его возможности пока ограничены, и работают не на всех платформах. Тем не менее, вы можете использовать отладчик для языков JavaScript и TypeScript на всех платформах, а для C# и F# на платформах OS X и Linux.

  

  Для того чтобы запустить отладку проекта Node, достаточно нажать на иконку бага в Activity Bar. После генерации файла launch.json запустится отладчик. Для проектов Node VS Code автоматически определяет каталог ./bin/www.
  

  Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.
  

  Отладчик позволяет просматривать значения текущих переменных:
  

  Более подробно о возможностях отладчика можно почитать по адресу https://code.visualstudio.com/Docs/debugging в том числе о том как сконфигурировать Mono для отладки C# и F# кода на платформах OS X и Linux.

  Контроль версий

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

  

  Конфликты

  VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий:
  

  Читать:

  Как сложить элементы массива js