Как работать в vs code: Редактор кода Visual Studio Code. Самый подробный гайд по настройке и установке плагинов для начинающих / Хабр

Работа с Git в Visual Studio Code — Блог HTML Academy

Если вы читаете этот текст, то уже, наверное, читали и про работу с Git через консоль, и через GitHub Desktop, но вам не понравилось или показалось неудобно. Это не проблема, ведь есть ещё один способ работать с Гитом.

Вот что о Гите говорит Коля Шабалин:

Да норм тема!

Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.

Следуйте инструкции и всё получится.

Клонируем проект

Перед тем, как начать работу с кодом вашего проекта, необходимо клонировать его из GitHub к себе на компьютер. Слева в боковой панели VS Code выбираем вкладку Explorer. Затем нажимаем кнопку Clone Repository.

Появится строка для ввода команд, в которой ничего не нужно заполнять. Выбираем единственный пункт «Clone from GitHub».

Авторизация на GitHub

Чтобы VS Code получил доступ к вашему репозиторию, нужно пройти авторизацию на GitHub — то есть показать ему, что у вас есть все права для работы с репозиторием.

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

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

Откроется окно браузера. Нажимаем зелёную кнопку Authorize, чтобы продолжить.

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

Статус Success на вкладке в браузере подтвердит, что авторизация прошла успешно. Теперь браузер можно закрыть.

Выбираем проект

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

Папка для проекта

VS Code предложит выбрать папку, в которой вы собираетесь хранить проект. Выберите папку, кнопка Select Repository Location подтвердит выбор, после чего проект будет склонирован.

Начало работы с кодом

Чтобы начать работу, откройте проект кнопкой Open во всплывающем окне. Выбор кнопки Open in New Window создаст новое окно. Это полезно, если у вас уже открыт другой проект, и вы собираетесь работать с несколькими проектами одновременно.

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

Делаем commit

Для начала добавим в проект файл . editorconfig и пропишем внутри правила для редактора VS Code. Чтобы добавить новый или изменённый файл в коммит, выбираем вкладку Git и нажимаем на кнопку «+» рядом с этим файлом.

В текстовое поле вводим сообщение «Добавляет editorconfig», которое подскажет, что делает этот коммит.

Теперь нажимаем комбинацию клавиш Ctrl + Enter или кликаем на галочку над текстовым полем ввода, чтобы записать наш коммит.

Push

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

Отлично! Вы успешно отправили все изменения в форк. Не забудьте перейти в GitHub, чтобы создать пуллреквест и вмёрджить все изменения проекта.

Pull

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

Проект подтянул изменения, можно продолжить работу.

Полезные статьи о Git

• Шпаргалка по Git. Решение основных проблем
• Введение в системы контроля версий
• Как работать с GitHub в большой команде

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

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

• Чем хорош редактор VS Code
• VS Code для разработки на PHP
  • Как устанавливать расширения
  • Какие расширения выбрать для разработки на PHP
  • EditorConfig for VS Code
  • PHP Intelephense
  • PHP Debug
  • PHP CodeSniffer
  • Semicolon Insertion Shortcut
• VS Code для разработки на JavaScript
  • Как устанавливать расширения
  • Какие плагины установить для разработки на JavaScript
  • Babel
  • Стандарты кодирования
  • Автоматическое дополнение
  • Отладка
• Расширения, которые помогут эффективнее работать с Git и читать код
• Итог

Чем хорош редактор VS Code

Visual Studio Code — популярный редактор кода.

• Отладчик кода
• Встроенный терминал
• Удобные инструменты для работы с Git
• Подсветка синтаксиса для множества популярных языков и файловых форматов
• Удобная навигация
• Встроенный предпросмотр Markdown
• Умное автодополнение
• Встроенный пакетный менеджер с большим набором расширений.

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

Разберемся, как устанавливать расширения и какие из них пригодятся в разработке на PHP и JavaScript.

VS Code для разработки на PHP

Как устанавливать расширения

Чтобы установить расширение, зайдите во вкладку «Extensions», введите название нужного пакета в строке поиска, а затем нажмите кнопку «Install».

Получится примерно так:

Какие расширения выбрать для разработки на PHP

EditorConfig for VS Code

EditorConfig — это конфигурационный файл и набор расширений ко многим редакторам кода. Он подхватывает настройки из файла .editorconfig

Расширение автоматически настраивает отступы и перевод строк единообразно для всех разработчиков, которые его используют. Чаще всего PHP-код выполняется на *nix системах, поэтому необходимо использовать стандарт PSR.

Ниже приведем пример файла .editorconfig, который используется в Laravel:

root = true
// Глобальные настройки, которые будут записаны для всех файлов.
[*]
charset = utf-8
// На Unix системах используется lf для перевода строки.
// Это также требование стандарта PSR.
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
// Можно задать индивидуальные настройки как для типов файлов,
// так и отдельных файлов по имени. 
[*.md]
trim_trailing_whitespace = false
[*.{yml,vue,js,html}]
indent_size = 2
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
[lib/**.js]
indent_style = space
indent_size = 2

Читайте также: Почему PHP идеально подходит для веб-разработки: преимущество языка и запуск первого сайта

PHP Intelephense

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

Расширение PHP Intelephense поддерживает автодополнение и анализирует код. Также оно позволяет переходить к месту, где создана функция, класс или переменная с помощью шортката Alt+Click.

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

Extensions → Search @builtin php → PHP Language Features → Disable

PHP Debug

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

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

Чтобы воспользоваться PHP Debug, необходимо:

1. Установить сам Xdebug. Без него расширение работать не будет.
2. Добавить конфигурацию для PHP в разделе Debug. После этого в корне проекта создастся файл .vscode/launch.json с задачами для дебаггера. Файл будет со стандартными параметрами.
3. Добавить настройки в файл конфигурации php — так XDebug будет общаться с нашим дебаггером. Чтобы найти этот файл, в терминале нужно выполнить команду php --ini или запустить веб-сервер с кодом phpinfo().
4. В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким: /etc/php/7.3/cli/conf. d/. В ней нужно создать файл с необходимыми правами (требуются root права):

sudo touch /etc/php/7.3/cli/conf.d/99-local.ini
sudo chmod 777 /etc/php/7.3/cli/conf.d/99-local.ini

Содержимое файла:

xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000 ; Порт, который мы указали в launch.json
xdebug.idekey=code
xdebug.remote_autostart=1

Это настройки для локальной разработки, когда проект создается и запускается на одном компьютере.

PHP CodeSniffer

В языках программирования есть понятие — стиль кодирования. Это набор правил написания кода. Сейчас нас интересуют стандарты PSR-1 и PSR-12: они касаются кодирования и правил оформления.

Программа, которая отвечает за проверку на соответствие стандартам — это линтер. В PHP в качестве линтера используется PHP_CodeSniffer. Для его работы необходимо установить сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение PHP Sniffer.

Проверьте, что линтер установился:

phpcs --version
PHP_CodeSniffer version 3.4.2 **(**stable**)** by Squiz **(**[https://www.squiz.net](https://www.squiz.net/)**)**

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

phpcs --standard**=**PSR12 <dirname**>**

Semicolon Insertion Shortcut

PHP требует разделять инструкции с помощью точки с запятой. Расширение Semicolon Insertion Shortcut добавляет необходимый символ в конец строки с помощью шортката. Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную:

File → Preferences → Keyboard Shortcuts

Введите в строку поиска insert semicolon, чтобы быстро найти нужную комбинацию.

Читайте также: Как включить строгую типизацию в PHP и для чего ее использовать

VS Code для разработки на JavaScript

Как устанавливать расширения

Как мы уже сказали ранее, в VS Code есть встроенный пакетный менеджер. Он нужен для установки и удаления пакетов расширений — плагинов. Для удобной бэкенд- и фронтенд-разработки на JavaScript нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку «Extensions», которая находится в выпадающем меню «View». Потом введите название пакета в строке поиска и нажмите кнопку «Install».

Какие плагины установить для разработки на JavaScript

Babel

В 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, которое будет использовать установленный линтер.

Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

1. Установите Node.js, используя пакетный менеджер вашей операционной системы.
2. Установите ESlint командой npm install -g eslint. Вероятно, вам понадобится использовать sudo.
3. Установите плагины, которые конфигурируют eslint. Без них по умолчанию eslint ничего не проверяет.

npm install -g eslint-config-airbnb-base eslint-plugin-import

1. ESlint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

extends:
  - 'airbnb-base'
env:
 node:
 true browser: true

1. Установите расширение «linter-eslint» в VS Code.

Читайте также: Как учитель на экзамене: зачем разработчику линтер и как он помогает сделать код понятнее

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

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

IntelliSense работает сразу после скачивания, но для настройки деталей нужно создать конфигурационный файл 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.

Читайте также: Как использовать точки останова в своем коде на JavaScript

Расширения, которые помогут эффективнее работать с Git и читать код

• GitLens — в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь приходит GitLens. Например, одна из его полезных фич — git blame на текущей строке.

• Indent Rainbow делает разноцветные отступы в коде и подсвечивает некорректные. Вместо радужных цветов можно установить оттенки серого.

• Settings Sync — плагин, который позволяет синхронизировать настройки редактора между разными компьютерами. В качестве облачного хранилища используется Github Gists. Все настройки можно скачать, указав нужный файл синхронизации.
• Fira Code — моноширинный шрифт, визуальная надстройка для более удобного чтения кода. В нем используют лигатуры, которые объединяют несколько символов в один.

Итог

Мы привели самые популярные и необходимые расширения в Visual Studio Code, которые упростят разработку на PHP JavaScript. Все они — бесплатные и кроссплатформенные.

Если вы захотите ознакомиться с другими расширениями этого редактора, переходите на официальный портал Visual Studio Marketplace. Там есть плагины не только для PHP- и JavaScript-разработки, но и для программирования на Python, C++, C# и на других языках.

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях.

Учебное пособие по кодам VS

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

• Введение
• Должен ли я перейти на VS Code? И почему?
• Начало работы
• Проводник
• Поиск
• Контроль версий
• Отладчик
• Расширения
• Терминал
• Палитра команд
• Темы
• Персонализация
• Варианты конфигурации Nice
• Лучший шрифт для кодирования
• Рабочие пространства
• Редактирование
  • IntelliSense
  • Форматирование кода
  • Ошибки и предупреждения
  • Сочетания клавиш
  • Раскладки клавиатуры
• Фрагменты кода
• Витрина для удлинителей
• Команда CLI VS Code
• Решение проблем с высокой загрузкой ЦП

Введение

С самого начала редакторы были странным зверем. Некоторые люди усиленно защищают свой выбор редактора. В мире Unix у вас есть эти Emacs против vi «войны», и я как бы представляю , почему тратится так много времени на обсуждение преимуществ одного по сравнению с другим.

За последние несколько лет я использовал множество редакторов и IDE. Я помню TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. Разница между IDE и редактором в основном заключается в наборе функций и сложности.

Я предпочитаю редактор IDE, так как он быстрее и меньше мешает.

Последние 12 месяцев я использую VS Code, редактор с открытым исходным кодом от Microsoft, и он быстро стал моим любимым редактором.

Должен ли я перейти на VS Code? И почему?

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

Этот редактор основан на многолетнем опыте редакторов Microsoft.

Код редактора полностью открыт, и за его использование не нужно платить.

Он использует Electron в качестве своей базы, что позволяет ему быть кросс-платформенным и работать на Mac, Windows и Linux. Он создан с использованием Node.js, и вы можете расширить его с помощью JavaScript (что делает его выигрышным для всех нас, разработчиков JavaScript).

Это быстрый , самый быстрый редактор, который я использовал после Sublime Text.

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

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

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

Домашняя страница VS Code — https://code.visualstudio.com/.

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

Процесс установки зависит от платформы, и вы должны к этому привыкнуть.

При первом запуске редактора вы увидите экран приветствия:

Слева находится панель инструментов с 5 иконками. Это дает доступ к:

• File Explorer
• Поиск
• Контроль версий
• Отладчик
• Расширения

Исследователь

Давайте начнем исследование с исследователя (каламбур).

Нажмите кнопку «Открыть папку» на боковой панели или ссылку Открыть папку... на странице приветствия. Оба запускают представление средства выбора файлов.

Выберите одну папку, в которой у вас есть исходный код или даже просто текстовые файлы, и откройте ее.

VS Code покажет содержимое этой папки в вашем представлении:

Справа в пустом представлении показаны некоторые команды для выполнения некоторых быстрых операций и их сочетания клавиш.

Если выбрать файл слева, этот файл откроется на главной панели:

, и если вы начнете редактировать его, обратите внимание, что рядом с именем файла на вкладке и на боковой панели появится точка:

Нажатие CMD+P покажет вам быстрый выбор файлов легко перемещать файлы в больших проектах:

Вы можете скрыть боковую панель, на которой размещен файл, с помощью сочетания клавиш CMD+B .

Примечание. Я использую сочетания клавиш Mac. В большинстве случаев в Windows и Linux вы просто меняете CMT на CTRL, и это работает, но не всегда. Распечатайте справочник сочетаний клавиш.

Поиск

Второй значок на панели инструментов — «Поиск». Щелкнув по нему, вы увидите интерфейс поиска:

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

Для выполнения поиска нажмите введите .

Щелчок по символу ▷ слева включает инструмент поиска и замены.

При нажатии на 3 точки отображается панель, которая позволяет вам просто включить определенные типы файлов и исключить другие файлы:

Управление версиями

Вкладка «Управление версиями» активируется щелчком третьего значка на панели инструментов.

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

Щелчок по первому значку сверху с логотипом Git позволяет нам инициализировать репозиторий Git:

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

Создайте первую фиксацию, написав текстовое сообщение и нажав Cmd-Enter или щелкнув значок ✔︎ вверху.

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

При нажатии на значок с тремя точками открывается множество вариантов взаимодействия с Git:

Отладчик

Четвертый значок на панели инструментов открывает отладчик JavaScript. Это заслуживает отдельной статьи. А пока ознакомьтесь с официальными документами.

Расширения

Пятая иконка приводит нас к расширениям.

Расширения — это одна из ключевых функций VS Code.

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

У меня установлено множество расширений.

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

Вы можете отключить установленное вами расширение и включать его только тогда, когда оно вам нужно.

Вы также можете отключить расширение для определенной рабочей области (мы поговорим о рабочих областях позже). Например, вы не хотите включать расширения JavaScript в проекте Go.

Имеется список рекомендуемых расширений, в который включены все самые популярные инструменты.

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

В качестве примера давайте установим его.

Сначала я проверяю количество просмотров. 1,2 млн, так много! И отзывы положительные (4,5/5). Щелчок по имени расширения открывает подробности справа.

Нажатие зеленой кнопки «Установить» запускает простой процесс установки. Он делает все за вас, и вам просто нужно нажать кнопку «Перезагрузить», чтобы активировать его, что в основном перезагружает окно редактора.

Готово! Давайте проверим это, создав файл уценки с ошибкой, например, пропущенной 9.Атрибут 0061 alt на изображении. Он успешно говорит нам так:

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

Терминал

VS Code имеет встроенный терминал.

Вы можете активировать его из меню View ➤ Integrated Terminal или с помощью «CMD+», и он откроется с вашей оболочкой по умолчанию.

Это очень удобно, потому что в современной веб-разработке у вас почти всегда есть npm или пряжа процесс работает в фоновом режиме.

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

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

Палитра команд — это очень мощный инструмент. Вы включаете его, щелкнув Вид ➤ Палитра команд или используя CMD+SHIFT+P

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

Общие операции, которые я выполняю:

• Расширения: установка расширений
• Предпочтения: Цветовая тема для изменения цветовой темы (иногда я переключаюсь с ночи на день)
• Формат документа , который автоматически форматирует код
• Запустить код , предоставленный Code Runner, и выполнить выделенные строки JavaScript

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

Помните, раньше вы набирали CMD+P для просмотра списка файлов? Это ярлык для определенной функции командной палитры. Есть и другие:

• Ctrl-Shift-Tab показывает активные файлы
• Ctrl-G открывает палитру команд, чтобы вы могли ввести номер строки для перехода к
• CMD+SHIFT+O показывает список символов, найденных в текущем файле

Какие символы означают , зависит от типа файла. В JavaScript это могут быть классы или функции. В Markdown названия разделов.

Темы

Вы можете переключить используемую цветовую тему, нажав CMD-k + CMD-t или вызвав команду Preferences: Color Theme .

Это покажет вам список установленных тем:

вы можете щелкнуть одну или переместить с помощью клавиатуры, и VS Code покажет вам предварительный просмотр. Нажмите Enter, чтобы применить тему:

Темы — это просто расширения. Вы можете установить новые темы, зайдя в менеджер расширений.

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

Моя любимая тема — Ayu, которая обеспечивает отличный стиль для любого времени дня, ночи, утра/вечера и дня.

Индивидуальная настройка

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

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

Вы можете изменить их, выбрав «Настройки» ➤ «Тема значка файла» . Ayu поставляется с собственной темой значков, которая идеально соответствует цветам темы:

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

Перейдите к Preferences ➤ Settings (также доступны через CMD-, ), чтобы увидеть их:

Представление показывает настройки по умолчанию слева для удобства, а измененные настройки справа. Вы можете увидеть название темы и тему значка, которую мы настроили, в workbench.colorTheme и workbench.iconTheme 9.0062 .

Я увеличил масштаб с помощью CMD-+ , и этот параметр также был сохранен в window.zoomLevel , поэтому при следующем запуске VS Code он запоминает мой выбор масштабирования.

Вы можете применить некоторые настройки глобально в Настройки пользователя или относительно рабочей области в Настройки рабочей области .

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

Отличные параметры конфигурации

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

Вы можете открыть файл конфигурации JSON с помощью палитры команд и выбрать Открыть настройки (JSON) .

Некоторые приятные параметры конфигурации, которые я установил в своем коде:

20

Опция	Описание
"editor. minimap.enabled": false	Удалить мини-карту, которая отображается справа от редактора
"explorer.confirmDelete": false	Перестаньте запрашивать подтверждение, когда я хочу удалить файл (у меня есть система управления версиями!)
"explorer.confirmDragAndDrop": false	Отключить подтверждение для перетаскивания
"editor.formatOnSave": true
"editor.formatOnPaste": правда	Автоматически форматировать код, когда я вставляю его в свой код
"files.trimTrailingWhitespace": true	Обрезать пробелы в файлах
"editor.multiCursorModifier": "alt"
"editor.detectIndentation": true	Адаптировать отступ к файлу, полезно при редактировании кода других людей
"editor. quickSuggestionsDelay":

Лучший шрифт для кодинга

Мне нравится Fira Code. Он бесплатный и содержит несколько очень хороших программных лигатур, которые преобразуют общие конструкции, такие как !== и => для более красивых символов:

Включите его, установив шрифт и добавив его в свою конфигурацию:

 "editor.fontFamily": "Fira Code",
"editor.fontLigatures": true` 

Рабочие области

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

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

Текущая открытая папка будет включена в качестве основной папки рабочей области.

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

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

Вы можете просто работать с папками, пока у вас не появится конкретная причина, по которой вам нужно рабочее пространство.

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

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

IntelliSense

При редактировании на одном из поддерживаемых языков (JavaScript, JSON, HTML, CSS, Less, Sass, C# и TypeScript) VS Code имеет IntelliSense, технологию, которая намекает на автозаполнение функций и параметров, как вы их печатаете.

Форматирование кода

Две удобные команды ( Формат документа и Выбор формата ) доступны на палитре команд для автоматического форматирования кода. VS Code по умолчанию поддерживает автоматическое форматирование для HTML, JavaScript, TypeScript и JSON.

Ошибки и предупреждения

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

Это все предупреждения или ошибки. Вы можете попытаться найти их в коде, где вы видите фрагменты, подчеркнутые красным, или вы также можете нажать CMD-Shift-M (или выбрать Вид ➤ Проблемы )

Горячие клавиши

Я показал вам много сочетаний клавиш до сих пор.

Запоминать их все становится сложно, но они помогают повысить производительность. Я предлагаю распечатать официальную шпаргалку по ярлыкам для Mac, Linux и Windows.

Раскладки клавиш

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

Команда VS Code предоставляет готовые раскладки для самых популярных редакторов: vim, Sublime Text, Atom, IntelliJ, Eclipse и других. Они доступны в виде плагинов. Открыв меню «Настройки » ➤ «Расширения раскладок ».

Фрагменты кода

Фрагменты очень классные.

Для каждого языка, на котором вы разрабатываете, есть расширения, предоставляющие готовые фрагменты для использования.

Для JavaScript/React одним из популярных является VS Code ES7 React/Redux/React-Native/JS snippets

Просто введите rfe , нажмите TAB, и это появится в вашем редакторе: константа $1 = реквизит => { вернуть

 "files.exclude": {
    "/.git": правда,
    "/.DS_Store": правда,
    "/node_modules": правда,
    "/node_modules/": правда
  },
  "поиск.исключить": {
    "/node_modules": правда
  },
  "files.watcherExclude": {
    "/node_modules/": правда
  },