Обновлено в феврале 2020 г.
Мой пост The Ultimate Atom Editor Setup (+ for JS / React) довольно популярен, но не так давно я перешел на VSCode.
Почему? Скорость, стабильность и TypeScript.
В целом я очень доволен переходом. Как и в случае с Atom, для меня в готовом редакторе есть много недостающих функций. Однако он покрывается расширениями.
Я разделил этот список на специальные расширения Утилиты и HTML / CSS / JS / React, отсортированные в алфавитном порядке.
Утилиты
Раскраска пара скобок
Это расширение позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие символы должны соответствовать и какие цвета использовать.
"изменить регистр"
Обертка вокруг node-change-case для Visual Studio Code. Быстро изменить регистр текущего выделения или текущего слова.
Проверка орфографии кода
Базовая проверка орфографии, которая хорошо работает с кодом camelCase.
Цель этого средства проверки орфографии - помочь в обнаружении распространенных орфографических ошибок, сохраняя при этом низкое количество ложных срабатываний.
DuplicateSelection
Это расширение обеспечивает дублирование выделенного текста в стиле Sublime - оно дублирует его в строке, а не в новой строке, как поведение VSCode по умолчанию.
EditorConfig для VS Code
Добавляет поддержку EditorConfig и .editorconfig в VSCode.
Файловые утилиты
Удобный способ создания, копирования, перемещения, переименования и удаления файлов и каталогов.
Я настроил горячие клавиши в проводнике, например r для переименования и d для дублирования.
Файлы-иконки
Иконки для конкретных файлов в VSCode для улучшения визуального поиска.
Найти похожие файлы
Находит файлы, связанные с текущим файлом, на основе определенных пользователем правил конфигурации. Я использую его для поиска файлов спецификаций / тестов на основе исходных файлов.
FiraCode
Моноширинный шрифт с программными лигатурами.
tl; dr - конвертирует !==, => и т. Д. В красивые символы.
Инструкции VSCode.
GitLens - Git с наддувом
Расширьте возможности Git, встроенные в код Visual Studio - визуализируйте авторство кода с первого взгляда с помощью аннотаций Git виноват и линзы кода, плавно перемещайтесь и исследуйте репозитории Git, получайте ценную информацию с помощью мощных команд сравнения и многое другое
Отступ-радуга
Это расширение раскрашивает отступ перед текстом, чередуя четыре разных цвета на каждом шаге. Кому-то это может пригодиться при написании кода для Nim или Python.
Макросы
автоматизировать повторяющиеся действия с помощью настраиваемых макросов.
VSCode не имеет встроенного способа открыть файловый менеджер и сосредоточиться на текущем файле, это две разные команды. Это расширение позволяет комбинировать набор команд, поэтому я подключил для этого cmd+shift+r. См. Инструкции здесь.
Все в одном уценке
Все, что вам нужно для написания Markdown (сочетания клавиш, оглавление, автоматический просмотр и многое другое).
Тема значка материала
Иконки файлов, вдохновленные Material-UI, альтернатива значкам файлов.
Многострочные хитрости
Включите поведение Alt + L (выделение строки) и Alt + Shift + L (выделение с несколькими курсорами) в VSCode. Еще одна функция, которую мне очень не хватало в Sublime.
Комментарии к гнезду
Если ваш код содержит комментарий, и вы хотите добавить новый комментарий, чтобы временно отключить блок или часть кода, первый экземпляр закрывающего тега комментария --> или */ завершит весь комментарий.
Это расширение преобразует уже существующие комментарии в безопасные символы, позволяя создать новый блок-комментарий, включающий исходный комментарий. Он также меняет эффект, раскомментируя один и тот же блок кода.
Открытый поиск
Добавляет несколько команд для открытия текущего файла или проекта в Finder.
Открыть-в-гитхабе
Откройте текущий проект или файл на github.com.
Путь Intellisense
Плагин Visual Studio Code, который автоматически заполняет имена файлов.
"Руководитель проекта"
Легко переключаться между проектами
SaveBackup
Файл резервной копии при сохранении. Спасатель жизни.
Чувствительная замена (VSCode теперь поддерживает эту функцию!)
Заменить выборки при сохранении наблюдений.
Синхронизация настроек
Синхронизируйте настройки, фрагменты, темы, значки файлов, запуск, привязки клавиш, рабочие области и расширения на нескольких машинах с помощью GitHub Gist.
Переключить цитаты
Переключить цикл " - ›' -› `
Транспонировать
Transpose - это расширение VSCode для транспонирования / замены выделенных фрагментов или символов.
Уникальные линии
Сохраняйте уникальные строки текста и удаляйте дубликаты из текущего выделения. Также включает команду для перемешивания выбранных в данный момент строк.
Visual Studio IntelliCode
Расширение Visual Studio IntelliCode предоставляет возможности разработки с помощью ИИ для разработчиков Python, TypeScript / JavaScript и Java в Visual Studio Code, с аналитическими данными, основанными на понимании контекста вашего кода в сочетании с машинным обучением.
HTML / CSS / JS / специальные расширения для React
Автоматическое переименование тега
Автоматически переименовывать парный тег HTML / XML.
ES7 React / Redux / GraphQL / React-Native фрагменты
Это расширение предоставляет вам фрагменты JavaScript и React / Redux в ES7 с функциями плагина Babel для VS Code.
Множество полезных фрагментов! Особенности:
import {} from '' где курсор начинается с пути. const [foo, setFoo] = useState(null)с правильным верхним регистром после set.
ESLint
Интегрирует ESLint в VS Code.
Eslint-disable-snippets
Включает фрагменты для игнорирования; блок, текущая строка или следующая строка.
Подобрать
Позволяет извлекать код машинописного текста и javascript в отдельный модуль, а также извлекать JSX в новые компоненты
Htmltagwrap
Переносит выбранный код в HTML-теги. Функция, которую мне очень не хватало в TextMate.
Утилиты консоли javascript
Помогите вставить и удалить операторы console. (*).
Фрагменты шуток
Фрагменты кода для тестирования фреймворка Jest.
Npm Intellisense
Плагин Visual Studio Code, который автоматически заполняет модули npm в операторах импорта.
Prettier - Средство форматирования кода
Пакет VS Code для форматирования вашего JavaScript / TypeScript / CSS с помощью Prettier.
Рефактор React
Это простое расширение обеспечивает действия по рефакторингу кода для разработчиков React.
Восстановите ваш разросшийся JSX, не беспокоясь о данных. Это расширение сделает за вас грязную работу, не нарушая ваш код.
Конвертер строки шаблона
Преобразование кавычек Javascript / Typescript в обратные кавычки, когда ${ был введен в строку
Версия объектива
Моя тема
Дракула Чиновник
Моя любимая тема на все времена.
Есть еще? Напишите в комментариях!
Нравится?
Нажмите кнопку хлопка 👏👏🏻👏🏼👏🏽👏🏾👏🏿 (столько раз, сколько хотите!).
Подпишитесь на меня в Twitter - @elado и ознакомьтесь с другими моими сообщениями об инструментах повышения производительности:
