Я собирался написать эту статью о том, как я настраиваю свою любимую 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 — еще раз проверьте мой другой пост, чтобы узнать о некоторых сочетаниях клавиш.
Надеюсь, вам понравился этот длинный пост. Мне понравилось писать это. В редких случаях, когда я обнаруживаю/создаю новое классное расширение, я включу его сюда в будущем.