Настройка visual studio code – Настройка редактора кода Visual Studio Code — Код

Содержание

Настройка редактора Visual Studio Code для разработки на PHP / Microsoft corporate blog / Habr

Всем привет!

Пора перейти от слов к действиям и познакомиться с Visual Studio Code поближе. В этом посте представлена поэтапная настройка VS Code для разработки на PHP.

Если кратко, то мы поговорим о том как:

Скачать и установить Visual Studio Code.
Настройть статистический анализ кода на PHP в параметрах пользователя.
Скачать и установить расширение PHP Debug с портала Visual Studio Marketplace.
Настройть расширение PHP Debug для использования XDebug.

Скачайте и установите Visual Studio Code

Visual Studio Code — бесплатный кроссплатформенный, легковесный редактор кода от Microsoft. Пока он будет загружаться (в нем всего 42 мегабайта), рассмотрим подробнее каждое из этих свойств:

Бесплатный: да, VS Code полностью бесплатен, никаких приписок мелким шрифтом.
Кроссплатформенный: доступны версии VS Code для Windows, Linux и OS X.

Легковесный: VS Code, в отличие от Visual Studio, — не полнофункциональная среда IDE, а редактор кода. Он поддерживает ряд мощных функций, характерных для IDE, например, IntelliSense, отладку и интеграцию с системой управления исходным кодом Git.

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

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

Если вы откроете файл с расширением .php, Code поймет, что это файл на языке PHP. Тип файла можно изменить и вручную: щелкните кнопку Language Mode в правом нижнем углу окна редактора или последовательно нажмите клавиши Ctrl+K и M.

Встроенные функции работы с PHP

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

Когда вы начнете набирать код в файле PHP, то заметите автоматическое срабатывание цветового выделения синтаксиса, определения парных скобок и функции IntelliSense.

Настройка статического анализа PHP

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

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

Откройте пользовательские настройки с помощью панели команд: нажмите F1, введите «user» и нажмите Enter.

Откроется два документа JSON. В документе слева содержатся настройки по умолчанию, в документе справа — пользовательские настройки. В пользовательских настройках можно переопределить настройки по умолчанию. Чтобы включить статический анализ кода PHP, необходимо изменить значения трех параметров.

Чтобы настроить путь к исполняемому файлу PHP, укажите его в файле пользовательских настроек:

После этого функция проверки будет включена для всех файлов PHP. Некорректный код PHP будет подчеркнут красным (в примере ниже пропущена точка с запятой).

Настройка отладки

Расширение PHP Debug (спасибо Феликсу Беккеру!) добавляет в VS Code поддержку отладчика XDebug. Установите расширение через панель команд VS Code: нажмите F1, введите «install ext», нажмите Enter, введите «PHP Debug» и вновь нажмите Enter. После установки расширения может потребоваться перезапуск VS Code.

Обратите внимание: это расширение использует отладчик XDebug. Поэтому для его работы необходимо установить XDebug. Скачать XDebug можно здесь (для Windows выбирайте 32-разрядную non-thread-safe версию).
Затем внесите в файл php.ini следующие настройки. Я установил XDebug в подкаталог ext установочной папки PHP. Если вы выбрали для XDebug другой каталог установки, убедитесь, что параметр zend_extension содержит правильное значение.

Убедитесь, что корневой раздел веб-сервера соответствует вашему проекту. Тогда при каждом запросе файла PHP XDebug будет предпринимать попытку подключения к порту 9000 для отладки.
Чтобы начать отладку, откройте вкладку Debugging в VS Code.

Щелкните значок шестеренки, чтобы сформировать файл launch.json, который позволит VS Code начать сеанс отладки XDebug.

Чтобы начать отладку, нажмите F5 или щелкните зеленую стрелку на вкладке Debugging. Чтобы задать точку останова в исходном коде, выберите строку и нажмите F9.

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

Заключение

Visual Studio Code обладает отличной встроенной поддержкой PHP, а расширение PHP Debug добавляет возможность отладки кода на PHP. Все эти инструменты являются бесплатными и кроссплатформенными.

На портале Visual Studio Marketplace доступны и другие расширения для работы с PHP.

Полезные ссылки

habr.com

Настройка Visual Studio Code? — Toster.ru

самые основные:
Auto Close Tag — авто закрытие тегов
Auto Rename Tag — переименование парных тегов
Beautify — разжатие кода (из minify в стандартный вид)
highlight-mathing-tag — подсвечивание парных тегов (нужно настроить в конфиге, чтобы поярче было)
html snippets — сниппеты как в сублайме
insert <br> tag — вставка тега новой строки через шифт+enter
PHP Debug — деббагер для php (нужно настраивать)
Debugger for Chrome — JS дебаггер
vscode-icons — иконки для VSC
minify — сжатие кода
css auto prefix — автопрефиксы

Insert Numbers — полезное расширения для вставки чисел определенного формата во множество мест с инкрементом
================
ещё некоторые, которые я добавил и пользуюсь:
apache Conf (для подсветки .htaccess)
AutoFileName — дополнение пути (например для «requere» в node.js)
Bookmarks — делать закладки в коде
Bracket Pair Colorizer — подсвечивать парные скобки (квадратные, фигурные, прямоугольные, круглые) очень удобно
gitignore — добавляет .gitignore файл под проект (node.js, docker, yii2, laravel и т.д.)
GitLens — Git supercharged — показывает гит-коммиты в коде (и автора коммита, удобно в командной разработке)
HTML Class Suggestions
Live Server — открывает браузер, где в режиме «онлайн» видишь изменения в html
Markdown Preview Enhanced — тоже самое, что и Live Server, но только для страниц с markdown разметкой
Material Icon Theme — для красоты VSC)
Monokai Dark Soda — моя любимая тема разработки
MySQL Syntax — для подсветки синтаксиса sql

PHP Intellisense —
Quick gitignore — добавляет файл/директорию в gitgnore
Regex Previewer — помогает в регуляркой
SQL Server (mssql) — для работы с sql server
SVG Viewer — просматривать SVG картинки
Todo Tree — делать заметки, удобно
Remote FS — для удаленного подключения по FTP (удобно, если несколько серверов), пример конфига:

{ 
    "remotefs.remote": {"site": {
        "scheme": "ftp",
        "host": "1************01",
        "username": "ad**********ain",
        "password": "Lv************xF",
        "rootPath": "/"
      },
      "site2": {
        "scheme": "ftp",
        "host": "17**********1",
        "username": "a*****************m",
        "password": "************O",
        "rootPath": "/"
      },
      "moy-yandex": {
        "scheme": "ftp",
        "host": "a***********u",
        "username": "a***************mone",
        "password": "1***************W",
        "rootPath": "/"
      }
  }

UPD
Есть ещё хорошее приложение: Gremlins. Он подсвечивает невидимые символы в коде. Но его нужно немного «допилить», чтобы показывал невидимый символ юникод u+feff (образуется часто, когда кодировка страницы UTF-8 with BOM)
собственной как допилить я сам же описываю в своем вопросе: тут

что касается сннипетов для php: бывает такое, что они не срабатывают и тут две причины: пользователь достаточно быстро жмет TAB (VSC не успевает ещё понять, что пользователь закончил ввод) и когда достаточно долго работаешь в VSC без перезагрузки последнего.

ИМХО: рано или поздно эта проблема решиться. VSC стремительно развивается и такая проблема будет решена (до этого чтобы быстрее было — лучше написать сюда об этом)
Согласен с Artem , с тем, что Brackets имеет некоторые вещи лучше и оптимизированнее, чем VSC, и я для Front-end чаще работаю в Brackets (в большей части из-за возможности видеть online изменения тут же в браузере). Но главный минус Brackets от VSC — при большой кол-во плагинов он очень-очень тупит, также мне не нравится работа Brackets-ftp.

Послесловие:
VSC ещё учится и становится лучше. Рано или поздно он обгонит и Sublime, Atom и другие IDE — это вопрос времени, потому что: 1) он open source 2) финансирует и ведет разработку Microsoft 3) бесплатен!!! и последнее камень в огород всем крупным IDE

toster.ru

Настройка редактора Visual Studio Code для разработки на PHP

Дата публикации: 07.04.2016

Если кратко, то мы поговорим о том как:

Скачать и установить Visual Studio Code.
Настройть статистический анализ кода на PHP в параметрах пользователя.
Скачать и установить расширение PHP Debug с портала Visual Studio Marketplace.

Настройть расширение PHP Debug для использования XDebug.

Скачайте и установите Visual Studio Code

Бесплатный: да, VS Code полностью бесплатен, никаких приписок мелким шрифтом.
Кроссплатформенный: доступны версии VS Code для Windows, Linux и OS X.
Легковесный: VS Code, в отличие от Visual Studio, — не полнофункциональная среда IDE, а редактор кода. Он поддерживает ряд мощных функций, характерных для IDE, например, IntelliSense, отладку и интеграцию с системой управления исходным кодом Git.

Встроенные функции работы с PHP

Настройка статического анализа PHP

Откройте пользовательские настройки с помощью панели команд: нажмите F1, введите «user» и нажмите Enter.

Чтобы настроить путь к исполняемому файлу PHP, укажите его в файле пользовательских настроек:

Настройка отладки

Затем внесите в файл php.ini следующие настройки. Я установил XDebug в подкаталог ext установочной папки PHP. Если вы выбрали для XDebug другой каталог установки, убедитесь, что параметр zend_extension содержит правильное значение.

Чтобы начать отладку, откройте вкладку Debugging в VS Code.

Щелкните значок шестеренки, чтобы сформировать файл launch.json, который позволит VS Code начать сеанс отладки XDebug.

Заключение

На портале Visual Studio Marketplace доступны и другие расширения для работы с PHP.

Автор статьи: Мария Горелкина

msdn.microsoft.com

Используем VS Code для Веб-разработки / Habr

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.
В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного ~~пот~~помучаться и установить два расширения:

JS is JSX overwrite
ESLint

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

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

{
  "ecmaFeatures": {
    "jsx": true
  }
}

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

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

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

{
  "stylelint.enable": true
}

Dart — популярный в среде AngularJS язык программирования
Flow — плагин для flowtype, статического тайп-чекера от facebook для JavaScript’а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript.
Handlebars — поддержка шаблонов handlebars
HTMLLint — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь htmlhint.com
Smarty — старый добрый шаблонизатор для PHP
Stylus —еще один плагин для Stylus, если по какой-то причине не понравился stylelint
Swig —шаблонизатор для javascript, используется, например, в проекте Mean.JS
Twig — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах.
XML Tools —полезный для XML/XSLT разработчиков набор плагинов

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Align

Форматирует выделение

Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Подсвечивает HTML-цвета

Dash

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Kit

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Ссылка

Seti

Ссылка

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

[
{ "key": "tab",                 "command": "editor.action.indentLines",
                                "when": "editorTextFocus" },
{ "key": "shift+tab",           "command": "editor.action.outdentLines",
                                "when": "editorTextFocus" }
]

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.
Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

habr.com

Как настроить VS Code для разработки на JavaScript – Hexlet Guides

Создание удобного рабочего окружения.

Содержание

Babel и ES6
Стандарты кодирования
Автоматическое дополнение
1. jsconfig.json
Отладка

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

отладчик кода
встроенный терминал
удобные инструменты для работы с Git
подсветка синтаксиса для множества популярных языков и файловых форматов
удобная навигация
встроенный предпросмотр Markdown
умное автодополнение
встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку “Extensions”, введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

{
  "version": "2.0.0",
  "type": "shell",
  "tasks": [
      {
          "label": "watch",
          "command": "${workspaceRoot}/node_modules/.bin/babel src --out-dir dist -w --source-maps",
          "group": "build",
          "isBackground": true
      }
  ]
}

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B(macOS) запустит сборку.

Подробнее о tasks можно узнать на сайте VS Code.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

Установите Node.js используя пакетный менеджер вашей операционной системы.
Установите eslint командой npm install -g eslint. Вероятно, вам понадобится использовать sudo.
Установите плагины, которые конфигурируют eslint. Без них (по умолчанию) eslint ничего не проверяет.
```
 npm install -g eslint-config-airbnb-base eslint-plugin-import
```
eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:
```
 extends:
   - 'airbnb-base'
 env:
   node: true
   browser: true
```
Установите расширение “linter-eslint” в VS Code.

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json.

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json, то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

Для отладки бэкенд-кода достаточно встроенных возможностей. Для отладки фронтенд-кода нужно установить плагин для соответствующего браузера:

Подробнее об отладке можно узнать на сайте VS Code.

Рахим Давлеткалиев

guides.hexlet.io

Настройка vs code

Разберём, как установить и настроить новый редактор кода vs code.

Заходим на официальный сайт программы код вс и скачиваем установщик.

Программа работает под windows, mac os и linux.

После загрузки нас перекинет на страницу с документацией.

Вернёмся к программе vs code и запустим её.

Содержание статьи

Плагины для vs code

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

Вручную установить можно из панели управления выбрать пункт меню расширения.

В поле ввода пишем слово russian.

Найдутся плагины для языка, устанавливаем языковой пакет.

All autocomplete плагин помогает сразу писать класс в css, не вспоминая как он был в html.

Autoprefixer помогает расставлять префиксы в css.

Beautify. Если код поехал, стал не упорядочен, то мы запускаем плагин Beautify и он расставляет всё по правилам.

Bootstrap v4 snippets. Готовые участки кода от четвертой версии Bootstrap.

Помогает быстро вставить кнопку, форму или прогресс бар через поиск сниппета.

Eslint. Позволяет проверять правильно ли написан javascript код.

8 GitHub.

Live Sass compiler. Компилирует внутри программы вс код файлы стилей.

Sass.

Twig расширение даёт подсветку кода при работе с шаблонами open cart.

12 GistExtension. Эта функция позволяет использовать свои Gist.

Заходим или регистрируемся на сайт GistGithub.

Внутри мы создаём свои кусочки кодов, которые могут понадобиться.

В вс коде зажимаем клавишу F1 выбираем gist open block, и мы увидим все наши кусочки кода, которые можем добавить в наш проект.

Не терять время их искать.

Также когда мы написали новый код, который может быть, понадобиться в будущем, то сохраняем его в интернет через create new block.

Проверяем, появился ли он на сайте GitHub.

Настройка параметров vs code

Слева редактора будет панель ActivityBar, она даёт доступ к отладке и к установке расширений.

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

Ctrl b открыть панель, повторное нажатие закрыть.
Клавишей ctrf+shift+f вызываем панель поиска.

Для настройки редактора перейдём в файл settings и видим выпадающее меню параметров, нажимаем на этот пункт.

Поменяем несколько параметров, которые улучшают работу в редакторе вс код.

В верхней части в поле поиска пишем:

StatusBar параметр, который отвечает за отображение нижней полоски редактора. Отключаем его visible в положение false.
MenuBar отображает строку меню. Делаем этот параметр выпадающим toogle при нажатии горячей клавишей alt.
ActivityBar параметр убирает боковое меню. Отключили все меню.
Minimap отображает в редакторе кода маленькую копию странички с кодом. Помогает быстрее искать нужные строки, если длинный код.
DefaultLanguage параметр, который задаёт тип новому документу при создании ctrl+n. В поле этого параметра напишем значение html.
FontSize размер шрифта, как в html, выставим 16.
TabeSize выставим два, по умолчанию 4.
DetectIndentation полоски отображения расстояний между Tabs в коде. Мы используем препроцессор sass, поэтому для понимания, на каком уровне находится стиль блока используем их.
InsertSpaces отвечает за жёсткую или мягкую табуляцию. Делаем, чтобы вместо пробелов вставлялись tab. Отключаем параметр и проверяем, что пропали пробелы внутри одного Tab.
Folding отключает сворачивание и разворачивание кода.
GlyfMargin отображает поля глифа в редакторе вс кода. Это поле используется для debug отладки javascript, python, c и других языков программирования. Можно это поле отключить.
SmoothScrolling делает плавное перемещение курсора мыши в редакторе кода vs code.

Emme для вс кода

Emmet встроенный плагин работает вначале как подсказка структуры, которая будет. Как можно быстро верстать плагином emmet читать тут.

Клавишей Tab разворачивается код.

Терминал в вс коде

Консоль кода очень удобна.

Вызываем её через меню терминал, создать Terminal.

Пишем команду gulp и изнутри запускается окно с нашим проектом. Нет лишнего действия, когда нужно переходить в консоль.

В параметре пользователя Terminal.integrated можно поменять консоль на другую.

Тему для цветовой схемы также можно менять в настройках.

По умолчанию, стоит лучшая тема с цветами.

Как проверить встроенный live reloader? В нижней части экрана есть кнопка Go live нажимаем её и сразу открывается окно браузера.

Переходим на новый редактор кода vs code и делаем настройки под себя.

sdelatlending.ru

Visual Studio Code | Калина Алексей

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

Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет 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. Например, вы можете изменить отображение курсора с блока на линию.
Специфичные для языка. Настройки для кода также можно ограничивать конкретными языками. Для этого нужно перед настройкой указать идентификатор языка в квадратных скобках: "[csharp]": { "editor.wordWrap": "off" }. Идентификаторы можно посмотреть в списке всех языков (CTRL + K, M).

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

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

jekyll build
jekyll serve

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

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "jekyll",
            "type": "shell",
            "command": "jekyll build \r\n jekyll serve"
        }
    ]
}

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

[
    {
        "key": "f5",
        "command": "workbench.action.tasks.runTask",
        "args": "jekyll"
    },
    {
        "key": "shift+f5",
        "command": "workbench.action.tasks.terminate"
    }
]

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

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

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

{
    "Loop For": {
        "prefix": "for",
        "body": ["for (int ${1:i} = 0; ${1:i} < ${2:UPPER}; ${1:i}++)",
    	    "{",
    	    "\t",
    	    "}"
        ],
        "description": "loop 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.

Written on February 17th, 2018 by Alexey Kalina

Feel free to share!

alexeykalina.github.io

Настройка visual studio code – Настройка редактора кода Visual Studio Code — Код — это поэзия

Настройка редактора Visual Studio Code для разработки на PHP / Microsoft corporate blog / Habr

Скачайте и установите Visual Studio Code

Встроенные функции работы с PHP

Настройка статического анализа PHP

Настройка отладки

Заключение

Полезные ссылки

Настройка Visual Studio Code? — Toster.ru

Настройка редактора Visual Studio Code для разработки на PHP

Настройка статического анализа PHP

Настройка отладки

Используем VS Code для Веб-разработки / Habr

Stable vs Insiders

Align

Beautify

Bookmarks

Color Highlighter

Dash

Debugger for Chrome

ECMAScript Quotes Transformer

Editor Config for VSCode

ftp-sync

Project Manager

Runner

Base16 Ocean

Material-theme

Seti

Как настроить VS Code для разработки на JavaScript – Hexlet Guides

Создание удобного рабочего окружения.

Содержание

Babel и ES6

Стандарты кодирования

Автоматическое дополнение

jsconfig.json

Отладка

Настройка vs code

Плагины для vs code

Настройка параметров vs code

Emme для вс кода

Терминал в вс коде

Visual Studio Code | Калина Алексей

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

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

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

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

Добавить комментарий Отменить ответ