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

Хорошо, поехали…

Код ВС

  • это бесплатный редактор кода, переопределенный и оптимизированный для создания и отладки современных веб-приложений и облачных приложений.
  • он легкий, но мощный, работает на вашем рабочем столе и доступен для Windows, macOS и Linux.
  • он поставляется со встроенной поддержкой javascript, typescript и NodeJS и имеет богатую экосистему расширений для более чем дюжины других языков (среди прочих C#, C++, Java, Python, PHP, Go, Dart).

Установка — это так же просто, как загрузить с сайта кода Visual Studio, и вы начнете работу в считанные минуты.
Кросс-платформенность — работает на macOS, windows и linux
Ежемесячные обновления — наслаждайтесь новыми функциями и исправлениями ошибок каждый месяц с новыми выпусками. Вы можете включить автоматическое обновление, если хотите.
Инсайдерская сборка — если вы хотите использовать ту же версию, которую ежедневно использует команда разработчиков vs-code, вы можете установить инсайдерскую сборку из сайт.
Портативный — VS Code поддерживает портативный режим. Данные, созданные и поддерживаемые VS Code, живут рядом с собой и могут перемещаться в разных средах, например, с помощью USB-накопителя.

Расширения

Итак, это основная тема этого поста.

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

Торговая площадка

  • Вы можете найти все расширения для семейства визуальных студий здесь, на маркетплейсе.
  • Вы также можете установить их из редактора vscode. Просто используйте команду ctrl+shift+X для Windows или shift+command+X для macOS.

Давайте теперь посмотрим на мои любимые расширения…

Темы

  • Хотя VSCode поставляется с несколькими готовыми вариантами тем, мне нравится настраивать свои собственные.

База 16 → Темный океан

Это моя любимая тема. На самом деле я предпочитаю темную тему для своей IDE (при этом)

Dark Ocean — это коллекция светлых и темных тем с хорошо сбалансированным сочетанием теплых и холодных цветов средней контрастности.

Инструменты и языки

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

ESLint

Он интегрирует javascript ESLint в VSCode.
Для тех, кто плохо знаком с ESLint, это подключаемый линтер javascript. Он статически анализирует ваш код, чтобы быстро находить проблемы.
Вам потребуется установить ESLint локально или глобально. Вы можете сделать это npm install eslint в рабочей области или npm install -g eslint для глобальной установки.
Я не буду углубляться в eslint и что он может, вы можете прочитать все об этом здесь.
Для тех, кто любит избыточность и намеренно усложнив себе жизнь, вы также можете установить расширение TSLint для линтинга машинописного текста.

  • Однако в этом нет необходимости, так как ESLint поддерживает машинописный текст и будет автоматически использовать/читать ваши tsconfig.json правила.

Украсить

Украшайте, распаковывайте или деобфусцируйте javascript, HTML или делайте JSON читабельным.
Это расширение просто украшает ваш код.
VSCode использует js-beautify внутри, но у него нет возможности изменять код. стиль, который вы хотите использовать. Это расширение позволяет запускать js-beautify в VSCode.

как обычно, вы можете прочитать и поэкспериментировать с js-beautify здесь

Автоматически закрывающийся тег

Повысьте продуктивность написания кода с помощью дополнений кода AI, которые автоматически добавляют закрывающий тег HTML/XML.
Это расширение

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

Лучшие комментарии

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

  • Оповещения
  • Запросы
  • Todos
  • Основные моменты

Совет. При работе с отзывчивым, флаттером Android Studio читает ваши комментарии и упрощает навигацию по кодовой базе на терминале

Радужные скобки

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

Я нашел это особенно полезным при отладке.

Фрагменты синтаксиса

Фрагменты кода ES7 React/Redux/GraphQL/React-Native

Проще говоря, фрагменты больше похожи на ярлыки синтаксиса.
Это расширение предоставляет фрагменты для реакции, редукции, реактивного натива и graphql в javascript и typescript с синтаксисом es7.
предоставляет ярлыки синтаксиса для этих языков/расширений файлов.

  • javascript(.js)
  • реакция JavaScript (.jsx)
  • машинопись (.ts)
  • машинописный текст реагировать (.tsx)

примеры сниппетов:
imp -> import moduleName from 'module'
ime -> import * as alias from 'module'
fre -> arrayName.forEach(element => {})
sto -> setTimeout(() => {}, delayTime)

React 17 также поддерживается. Просто добавьте к фрагменту префикс _ (подчеркивание), например,
_rmc -› создаст запоминающийся компонент реакции.

Фрагменты кода Javascript (ES6)

это расширение содержит фрагменты кода для javascript в синтаксисе ES6 для vscode javascript и typescript
предоставляет сокращения синтаксиса для этих языков/расширений файлов

  • javascript(.js)
  • реакция JavaScript (.jsx)
  • машинопись (.ts)
  • машинописный текст реагировать (.tsx)
  • HTML (.html)
  • Вью (.vue)

Реагировать на нативные инструменты

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

  • настроил среду разработки React Native
  • открыть корневую папку вашего собственного проекта в VSCode. С помощью этого расширения вы можете запускать такие команды, как:
  • запустить эмулятор Android
  • Запустите эмулятор Android
  • Запустите симулятор iOS
  • Запустить выставку
  • Запустить, остановить или перезапустить упаковщик
  • Перезагрузить приложение
  • Запустить или остановить логкарту
  • Запустить или остановить сетевой инспектор и многое другое…

Флаттер

Когда я не создаю мобильные приложения с помощью React Native, я предпочитаю использовать Flutter (его младшую, более крутую сестру).
Это расширение добавляет поддержку эффективного редактирования, рефакторинга, запуска и перезагрузки мобильных приложений Flutter, а также поддержку языковых фрагментов Dart. слишком.

Как обычно, для этого расширения потребуется установка среды разработки flutter, языковое расширение dart и открытый проект flutter.

Git вещи

GitLens — Git с наддувом

Это расширение с открытым исходным кодом для VSCode, созданное, разработанное и поддерживаемое Эриком Амодио.
Оно поможет вам лучше понять код.
Просто посмотрите, кто, почему и когда была изменена строка или блок кода.< br /> Вернитесь в историю, чтобы увидеть, как развивался код.
Он мощный, богатый и легко настраиваемый.
Основные функции включают в себя:

  • навигация по ревизиям — (назад и вперед) по истории
  • текущая строка виновата — аннотация в конце строки, показывающая (при наведении) фиксацию и автора последнего изменения.
  • представления боковой панели — коммиты, репозитории, история файлов, история строк, ветки, пульты, тайники и просмотр участников.
  • интерактивный редактор ребаз
  • богатый удаленный провайдер — интеграция с вашим git-провайдером; Github, Gitlab, Gitea, Bitbucket, Azure DevOps для связи задач и запросов на вытягивание.

Виноват

Если вы просто хотите знать, кто виноват в изменениях в коде и не хотите весь остальной удивительный функционал GitLens, то используйте это расширение.

Я использую и gitlens, и git fault.

gitignore

Мне нравится это расширение.
Это расширение позволяет извлекать .gitignore шаблонов из репозитория Github gitignore.

Интеллисенс

Intellisense — это общий термин для различных функций редактирования кода, включая завершение кода, информацию о параметрах, краткую информацию и списки участников.
VSCode intellisense предоставляется для Javascript, Typescript, JSON, HTML, CSS, SCSS и Less из коробки.
Функции Intellisense поддерживаются языковой службой. Язык обеспечивает интеллектуальное завершение кода на основе языковой семантики и анализа вашего исходного кода. Если языковая служба знает возможные варианты завершения, предложения IntelliSense будут появляться по мере ввода. Если вы продолжаете вводить символы, список элементов (переменных, методов и т. д.) фильтруется и включает только элементы, содержащие введенные вами символы. Нажатие Tab или Enter вставит выбранный элемент.

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

нпм интеллисенс

Это расширение автоматически дополняет модули npm в операторах импорта.
По умолчанию NPM Intellisense сканирует только установленные зависимости.
Вы можете установить scanDevDependencies на true, чтобы он также сканировал devDependencies.

{
  "npm-intellisense.scanDevDependencies": true,
}

Интеллектуальный путь

Это расширение автоматически дополняет имена файлов.
Path intellisense по умолчанию удаляет расширение файла, если оператор является оператором импорта.

Пиланс

Это расширение обеспечивает быструю и многофункциональную языковую поддержку Python.
Оно работает вместе с Python в VSCode и работает на основе инструмента Microsoft для проверки статических типов; Пирайт.

Интересный факт: имя Пиланс — это небольшая ода Монти Пайтону Ланселоту, который был первым рыцарем, ответившим на вопрос смотрителя моста в Святом Граале

Pylance предоставляет несколько замечательных функций:

  • Строки документации
  • Подпись
  • Предложения по параметрам
  • Завершение кода
  • Авто Импорт
  • Совместимость с ноутбуками Jupyter
  • Семантическая подсветка

Шутка

Тестируйте как профессионал с этой поддержкой IntelliSense для Facebook Jest.
Особенности включают в себя:

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

HTML, CSS, уценка

Живой сервер

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

  • Живой сервер быстрой разработки с перезагрузкой браузера в реальном времени
  • Запустите или остановите сервер одним щелчком мыши в строке состояния.
  • настраиваемый номер порта, корень сервера, браузер по умолчанию
  • поддержка любого браузера
  • удаленное подключение через WLAN (можно проверить с помощью мобильного телефона)
  • использовать предпочтительное имя хоста
  • Поддержка SVG
  • поддержка https
  • CORS включен
  • поддерживается многокорневая рабочая область

Улучшенный предварительный просмотр уценки

Если вы ведете блоги с уценкой или даже используете уценку на Гэтсби, это расширение для вас.
Markdown Preview Enhanced — это расширение, которое предоставляет вам множество полезных функций, таких как:

  • автоматическая синхронизация прокрутки,
  • математический набор,
  • Русалка,
  • ЗаводUML,
  • пандок,
  • экспорт PDF,
  • фрагмент кода,
  • автор презентаций и др.

Поддержка HTML CSS

Естественно, поддержка фрагментов emmet встроена прямо в vscode.

Если единственный Эммет, которого вы знаете, — это потрясающий актер из телесериала «Перепутали при рождении», которого играет талантливый Шон Берди; тогда это не тот Эммет, о котором мы говорим. Я говорю об Emmet — наборе подключаемых модулей для текстовых редакторов, позволяющих с высокой скоростью кодировать и редактировать HTML, XML, XSLT и другие форматы структурированного кода с помощью помощника по работе с содержимым.

Сокращения Emmet и расширения фрагментов включены по умолчанию в html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less, etc.
Однако я заметил, что иногда это не работает должным образом, поэтому я использую это расширение.
Это расширение предоставляет такие функции, как:

  • Завершение атрибутов HTML id и class
  • поддержка связанных и встроенных таблиц стилей
  • поддержка наследования шаблонов — замечательно, когда вы делаете ejs шаблонов
  • проверять селекторы css по запросу

Цветовое выделение

Это расширение выделяет и стилизует CSS или веб-цвета в вашем редакторе.

Радужный CSV-файл

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

  • выделить столбцы в файлах, разделенных запятой (.csv), табуляцией (.tsv), точкой с запятой и вертикальной чертой, разными цветами.
  • предоставить информацию о столбце при наведении
  • CSVLint — автоматическая проверка целостности CSV-файлов.
  • редактирование столбца с несколькими курсорами — стиль супергероя
  • Выровнять столбцы с пробелами и сжать (обрезать пробелы)
  • Запускайте запросы на SQL-подобном языке — в стиле мстителей.

Сасс

Sass: Syntatally Awesome Style Sheets — прикольное имя для питомца, да?
Это расширение обеспечивает подсветку синтаксиса с отступом, автозаполнение и средство форматирования.

Средство просмотра SVG

Это расширение позволяет вам просматривать SVG в вашем vscode.
Но это еще не все:
Вы можете экспортировать SVG в PNG (даже с явным размером), конвертировать SVG в схему URI и копировать в буфер обмена среди других функций.

Компоненты в стиле vscode

Это расширение использует грамматику CSS, созданную поверх языковых scss и language-css, чтобы обеспечить подсветку синтаксиса и поддержку intellisense для стилизованных компонентов.

vscode-значки

Если вы хотите легко различать файлы в вашем проекте с помощью значков, то вы можете установить это расширение.

И сейчас…

Действительно крутой

Громовой клиент

Это мое любимое расширение из всех.

Это расширение предоставляет клиент Rest API для vscode и Http-клиент на основе графического интерфейса.
Проверьте это :)

ВакаВремя

Wakatime предоставляет метрики, аналитические данные и отслеживание времени, автоматически генерируемые на основе вашей деятельности по написанию кода.
Чтобы использовать его, вам необходимо зарегистрироваться в wakatime, чтобы получить свой собственный уникальный ключ API, который вы вводите при установке этого расширения.
> Мне нравится это расширение, потому что каждое утро понедельника я получаю подробный отчет о моей деятельности по программированию за прошедшую неделю. Проверьте это

понимаете, я использую только vscode.

Дополнительно

  • Шрифты — я использую Fira Code и Operator Mono. посмотрите это видео от
    FeStack о том, как установить эти шрифты
  • vscode-shortcuts — еще раз проверьте мой другой пост, чтобы узнать о некоторых сочетаниях клавиш.

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