Как выбрать язык программирования в visual studio code

Как настроить Visual Studio Code для C, C++, Java, Python

Visual Studio Code — популярный редактор кода, бесплатный и с открытым исходным кодом. Но я уверен: каждый из нас, кто пытался настроить Visual Studio Code для разработки приложений на C++, Java или Python, прошел через стадию: “О Боже! Почему нельзя как-нибудь попроще?” Я сам пробовал настроить VS Code пару раз и в итоге закончил тем, что использовал CodeBlocks. 🙁

Прочитав много документации, посмотрев ряд роликов на YouTube и потратив несколько дней на саму настройку VS Code, я пишу эту статью, чтобы все это не пришлось проделывать уже вам!

Сегодня я покажу, как настроить среду разработки для спортивного программирования на C++, Java и Python в VS Code с нуля. Мы также посмотрим, какие расширения больше всего пригодятся, чтобы начать работу с VS Code. В конечном счете, ваша среда разработки будет выглядеть примерно так:

1. Устанавливаем Visual Studio Code

Скачайте последнюю версию Visual Studio Code с официального сайта. Рекомендуется загрузить системный установщик (System Installer), но если у вас нет прав администратора, то пользовательский установщик (User Installer) тоже подойдет. Выполните все обычные шаги по установке и обязательно проставьте все следующие чекбоксы:

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

2. Настраиваем расширения

Ниже приведен список расширений, которые нам понадобятся для правильной настройки VS Code. Откройте VS Code и перейдите на панель расширений (Ctrl + Shift + X), которая находится на левой панели инструментов, и начните загружать друг за другом следующие расширения:

от Microsoft — [Важно] Для корректной работы этого расширения нам понадобится установленный и добавленный в PATH компилятор MinGW. Если у вас его нет, следуйте этому руководству. от austin. от Microsoft — вам нужно будет настроить Python для работы этого расширения. Загрузите и установите последнюю версию отсюда. от Microsoft — [Важно] Перед установкой убедитесь, что в вашей системе настроены Java 8 JDK и JRE и указаны все необходимые переменные среды для Java. Если нет, посмотрите это видео о том, как настроить Java на вашем компьютере. от Jun Han — мы будем использовать это расширение для запуска всех наших программ. Для этого необходимо выполнить некоторые шаги по настройке. Мы увидим эти шаги в следующих разделах.

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

• (Необязательно) Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем. Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений.

Чтобы выбрать тему, нажмите Ctrl + Shift + P. Откроется палитра команд. Осуществите поиск по слову “theme” и выберите опцию Color Theme. Чтобы настроить иконки, можете выбрать опцию File Icon Theme.

Расширения для тех, кто интересуется FrontEnd-фреймворками для веб-разработки, такими как Angular и React:

• (Необязательно) Angular Language Service от Angular.
• (Необязательно) Angular Snippets от John Papa.
• (Необязательно) ES7 React / Redux / GraphQL / React-Native snippets от dsznajder.
• (Необязательно) React Native Tools от Microsoft.
• (Необязательно) Live Server от Ritwick Dey.

3. Настраиваем внешний вид редактора

Итак, мы уже установили VS Code и несколько расширений. Теперь мы готовы настраивать среду разработки. Я создал шаблон для спортивного программирования в VS Code и загрузил его в свой профиль на Github.

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

Пройдитесь по файлам main.cpp, Main.java и main.py и посмотрите на записанный в них образец кода. По сути, шаблонный код, предоставленный в образцах для каждого из этих трех языков, принимает входящие данные из файла input.txt и обеспечивает вывод в файл output.txt. Для каждой программистской задачи, которую вы хотите решить, просто создайте копию этого шаблона и напишите свой код в функции solve().

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

Set language for syntax highlighting in Visual Studio Code

I have a textfile (.txt) with CSS in it and want to get syntax hightlighting. You can open the command palette with ctrl + shift + p . But there you can not set syntax like in Sublime.

Is there any other way to get the CSS coloring in from my textfile?

9 Answers 9

In the very right bottom corner, left to the smiley there was the icon saying «Plain Text». When you click it, the menu with all languages appears where you can choose your desired language.

Press Ctrl + K M and then type in (or click) the language you want.

Alternatively, to access it from the command palette, look for «Change Language Mode» as seen below:

Another reason why people might struggle to get Syntax Highlighting working is because they don’t have the appropriate syntax package installed. While some default syntax packages come pre-installed (like Swift, C, JS, CSS), others may not be available.

To solve this you can Cmd + Shift + P → «install Extensions» and look for the language you want to add, say «Scala».

Find the suitable Syntax package, install it and reload. This will pick up the correct syntax for your files with the predefined extension, i.e. .scala in this case.

On top of that you might want VS Code to treat all files with certain custom extensions as your preferred language of choice. Let’s say you want to highlight all *.es files as JavaScript, then just open «User Settings» ( Cmd + Shift + P → «User Settings») and configure your custom files association like so:

Syntax Highlighting for custom file extension

Any custom file extension can be associated with standard syntax highlighting with custom files association in User Settings as follows.

Note that this will be a permanent setting. In order to set for the current session alone, type in the preferred language in Select Language Mode box (without changing file association settings)

Installing new Syntax Package

If the required syntax package is not available by default, you can add them via the Extension Marketplace ( Ctrl+Shift+X ) and search for the language package.

You can further reproduce the above steps to map the file extensions with the new syntax package.

To permanently set the language syntax:
open settings.json file

• format all txt files with javascript formatting

• format all unsaved files ( untitled-1 etc) to javascript :

Note that for "Untitled" editor (" Untitled-1 ", " Untitled-2 "), you now can set the language in the settings.

The previous setting was:

This will not always work anymore, because with VSCode 1.42 (Q1 2020) will change the title of those untitled editors.
The title will now be the first line of the document for the editor title, along the generic name as part of the description.
It won’t start anymore with " untitled- "

Regarding the associated language for those "Untitled" editors:

By default, untitled files do not have a specific language mode configured.

VS Code has a setting, files.defaultLanguage , to configure a default language for untitled files.

With this release, the setting can take a new value that will dynamically use the language mode of the currently active editor instead of a fixed default.

In addition, when you copy and paste text into an untitled editor, VS Code will now automatically change the language mode of the untitled editor if the text was copied from a VS Code editor:

In March 2021 (possible for VSCode 1.55), issue 118455 "Automatic language classification for Untitled files" and PR 119325 are studying some kind of automatic language detection for untitled files.

And if you forget, with VSCode 1.56, Apr. 2021:

Untitled editors hint

We have noticed that many new users are not aware that a language has to be set in order to get full VS Code language support.

To help with this problem, we have introduced a hint for untitled editors to help users set the correct language mode.
The untitled hint might not be helpful to advanced users, so it goes away immediately as you start typing or you can select don’t show to never display the hint again.

With VScode 1.60 (Aug. 2021):

Automatic language detection

• Grab an example from online and paste it in an untitled editor Language detection of untitled files

• "Pipe into code" language detection (showing off detection of extension-less files) Language detection of extension-less files

• Auto detect option in Notebooks language picker Language detection of Notebooks

VSCode 1.65 (Feb. 2022) comes with:

Improved automatic language detection

When the new setting workbench.editor.historyBasedLanguageDetection is enabled, untitled editors will use an improved automatic language detection algorithm that factors in your editor history and the contents of the current workspace to provide detection results with much less input text required than before.

Below is an example of using this across JavaScript, TypeScript, Markdown, PHP, and C++ (many more languages are supported):

Theme: GitHub Light + HC Customizations

VSCode 1.70 (July 2022) will propose (issue 152920, PR 153872)

Provide a command to create a new untitled file with a specific language set

Allow to specify language id in command to create a new untitled file

The registerCommandAndKeybindingRule allows for "New Untitled File args" to add the language ID if known.

Как пользоваться Visual Studio Code

Visual Studio Code — это среда разработки от компании Microsoft, созданная совсем недавно с использованием новых технологий (например Node.js). В отличие от полного пакета Visual Studio, эта среда представляет собой текстовый редактор с возможностью подключения огромного количества плагинов. Она предназначена для разработки на различных языках программирования и для разных платформ. Поддерживаются не только Windows, но и Linux, а также MacOS.

По умолчанию среда — это всего лишь очень продвинутый текстовый редактор. Поэтому для полноценной работы её предстоит настроить. В этой статье я расскажу, как пользоваться Visual Studio Code и как настроить полноценное окружение для веб-разработки. А если быть более точным — для беэкнд разработки. Поговорим про внешний вид, русификацию и, конечно же, полезные расширения.

Как пользоваться Visual Studio Code

В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.

1. Интерфейс Visual Studio Code

Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:

Именно этими участками вы будете пользоваться во время работы с VS Code:

1. Главное меню программы — можно использовать для доступа к настройкам, открытия проектов и папок и многого другого;
2. Левая панель — эта панель есть только в VS Code, она позволяет переключаться между просмотром дерева каталогов, поиском, отладкой и окном установки дополнений. Сюда же некоторые расширения добавляют свои меню, например Docker, Git и расширение для управления проектами.
3. Проводник — по умолчанию здесь отображается дерево каталогов, но тут же вы обнаружите настройки отладки или доступные для установки расширения, если выбран соответствующий пункт на боковой панели.
4. Рабочая область — здесь выполняется редактирование файла.
5. Мини карта — позволяет быстро ориентироваться по открытому исходнику.
6. Нижняя панель — здесь отображается вывод программы при выполнении, консоль самой Visual Code, а также здесь есть встроенный терминал.
7. Статус бар — отображается общая информация о состоянии программы.

2. Русификация Visual Studio Code

По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:

Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:

Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.

3. Внешний вид

Одна из важных вещей для среды разработки — её внешний вид и тема оформления. Чтобы изменить тему оформления, надо нажать сочетание Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:

Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:

Скачать новые темы можно с официального сайта Visual Studio Code. Здесь же можно настроить тему иконок.

4. Управление проектами

Очень часто бывает, что приходится переключаться между несколькими проектами во время работы. По умолчанию в VS Code для этого надо открывать рабочую папку проекта через меню. Но есть выход. Это расширение Project Manager. С его помощью вы можете сохранять проекты и переключаться между ними в один клик. Установите Project Manager как было описано выше, затем кликните на боковой панели по значку с папкой.

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

После этого вы сможете очень просто управлять своими проектами.

5. Авто-форматирование кода

Один из самых важных моментов в работе с кодом — это его однообразие. Приводить код к одному виду вручную не всегда удобно — для этого и были придуманы различные расширения. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Установите их через меню установки дополнений, а затем используйте сочетание клавиш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того чтобы выполнять выравнивание кода Visual Studio Code.

6. Автодополнение

Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP Intellisense, CSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.

7. Управление Vim

Я привык к редактору Vim и хочу использовать его стиль везде, даже в Visual Studio Code. Если вы тоже хотите, для нас с вами есть расширение Vim, которое переносит все сочетания клавиш и режимы работы Vim в редактор Visual Studio. После его установки вы сможете перемещаться по файлу кнопками h, j, k, l , использовать Esc и сохранять файл командой :w.

8. Отладка кода

В Visual Code есть интерфейс, с помощью которого выполняется отладка кода, но прежде, чем вы его сможете использовать для PHP, его придётся настроить. Для отладки кода на PHP используется отладчик Xdebug, поэтому необходимо установить дополнение PHP Debug. Далее кликните по треугольнику со значком жука на боковой панели. Если вы раньше ничего не отлаживали в этом проекте, то программа предложит вам создать файл launch.json. Кликните по этой ссылке. В открывшемся списке выберите PHP:

В полученном файле надо обратить внимание только на поле port. Он должен быть такой же, как и значение переменной xdebug.remote_port в php.ini. У меня это 9008. Сохраните изменения и нажмите зелёный треугольник для начала отладки.

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

Последний шаг: надо открыть отлаживаемую страницу в браузере, но при этом для Chrome надо использовать расширение Xdebug Helper, которое включает необходимый флаг и сообщает Xdebug, что этот код надо отлаживать. Для этого надо выбрать режим Debug в расширении:

Затем Xdebug подключается к VS Code по выбранному нами порту и передаёт туда всю необходимую информацию. Только после этого вы сможете смотреть переменные и выполнять код пошагово:

9. Терминал

В завершении поговорим о чём-то более простом. Одно из преимуществ VS Code перед другими редакторами — это встроенный терминал, который позволяет выполнять команды в системной оболочке Linux или в выбранной оболочке Windows. Если терминал ещё не открыт, вы можете сделать это с помощью Ctrl+Shift+P или из меню Терминал -> Создать терминал:

10. Использование Git

Ещё одна очень полезная возможность в Visual Studio Code — это интеграция с Git. Она работает по умолчанию, и вам даже не надо ничего дополнительно устанавливать. Достаточно только, чтобы в директории с проектом уже был инициализирован Git-репозиторий. Все новые или изменённые файлы будут подсвечены в проводнике.

Кроме того, вы можете делать фиксацию изменений (коммиты) и отправлять изменения на сервер прямо в графическом интерфейсе. Сначала надо добавить файлы в коммит: кликните по значку разветвления на боковой панели. Здесь отображаются все изменённые файлы. Нажмите + напротив файлов, которые надо добавить:

Для того чтобы зафиксировать изменения, наберите пояснение к комиту в текстовой строке, затем нажмите Ctrl+Enter или галочку над текстовым полем:

Теперь осталось отправить изменения в репозиторий, для этого используйте кнопку в статус-баре со значком обновления. Смотрите на предыдущем снимке.

Выводы

В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть «из коробки». А какой средой разработки пользуетесь вы? Напишите в комментариях!

Programming Languages

In Visual Studio Code, we have support for almost every major programming language. Several ship in the box, for example, JavaScript, TypeScript, CSS, and HTML but more rich language extensions can be found in the VS Code Marketplace.

Here are eight of the most popular language extensions:

Go to the Marketplace or use the integrated Extensions view and search for your desired programming language to find snippets, code completion/IntelliSense providers, linters, debuggers, and more.

Note: If you want to change the display language of VS Code (for example, to Chinese), see the Display Language topic.

Language specific documentation

Click on any linked item to get an overview of how to use VS Code in the context of that language. Most language extensions also contain a summary of their core features in their README.

Language features in VS Code

The richness of support varies across the different languages and their extensions:

• Syntax highlighting and bracket matching
• Smart completions (IntelliSense, Artificial Intelligence with GitHub Copilot)
• Linting and corrections
• Code navigation (Go to Definition, Find All References)
• Debugging
• Refactoring

Enhance completions with AI

In VS Code, you can enhance your coding with artificial intelligence (AI), such as suggestions for lines of code or entire functions, fast documentation creation, and help creating code-related artifacts like tests.

GitHub Copilot is an AI-powered code completion tool that helps you write code faster and smarter. You can use the GitHub Copilot extension in VS Code to generate code, or to learn from the code it generates.

You can learn more about how to get started with Copilot in the Copilot documentation.

Change the language for the selected file

In VS Code, we default the language support for a file based on its filename extension. However, at times you may want to change language modes, to do this click on the language indicator — which is located on the right hand of the Status Bar. This will bring up the Select Language Mode dropdown where you can select another language for the current file.

Tip: You can get the same dropdown by running the Change Language Mode command ( ⌘K M (Windows, Linux Ctrl+K M ) ).

Language identifier

VS Code associates a language mode with a specific language identifier so that various VS Code features can be enabled based on the current language mode.

A language identifier is often (but not always) the lowercased programming language name. Note that casing matters for exact identifier matching (‘Markdown’ != ‘markdown’). Unknown language files have the language identifier plaintext .

You can see the list of currently installed languages and their identifiers in the Change Language Mode ( ⌘K M (Windows, Linux Ctrl+K M ) ) dropdown.

You can find a list of known identifiers in the language identifier reference.

Add a file extension to a language

You can add new file extensions to an existing language with the files.associations setting.

For example, the setting below adds the .myphp file extension to the php language identifier:

IntelliSense ( ⌃Space (Windows, Linux Ctrl+Space ) ) will show you the available language identifiers.

Next steps

Now you know that VS Code has support for the languages you care about. Read on.

— Peek and Go to Definition and more — This is where VS Code really shines

Common questions

Can I contribute my own language service?

Yes you can! Check out the example language server in the VS Code Extension API documentation.

What if I don’t want to create a full language service, can I reuse existing TextMate bundles?

Yes, you can also add support for your favorite language through TextMate colorizers. See the Syntax Highlight Guide in the Extension API section to learn how to integrate TextMate .tmLanguage syntax files into VS Code.

Can I map additional file extensions to a language?

Yes, with the files.associations setting you can map file extensions to an existing language either globally or per workspace.

Here is an example that will associate more file extensions to the PHP language:

You can also configure full file paths to languages if needed. The following example associates all files in a folder somefolder to PHP:

Note that the pattern is a glob pattern that will match on the full path of the file if it contains a / and will match on the file name otherwise.