VSCode — это легкий кроссплатформенный редактор, который благодаря своим превосходным возможностям редактирования, хорошей масштабируемости и настраиваемости стал наиболее часто используемым инструментом для фронтенд-разработки.
У VSCode огромный рынок подключаемых модулей.В процессе начала использования VSCode для разработки внешнего интерфейса многие варианты подключаемых модулей могут затруднить нам выбор. В сочетании с рекомендациями сообщества и рынка подключаемых модулей, а также с вашим собственным использованием, мы поделимся волной подключаемых модулей, которые имеют очевидные преимущества в процессе разработки для вашего ознакомления.
Bracket Pair Colorizer
круглые скобки(), квадратные скобки[]и фигурные скобки{}Это широко используемый оператор в большинстве языков программирования.В javascript, определения функций, условные операторы, массивы, деструктуризация... Круглые скобки используются повсюду. Когда мы пишем или читаем код, трудно сразу увидеть две совпадающие скобки. Это может привести к двум негативным последствиям: 1. Снижается эффективность чтения кода, при чтении необходимо подтверждать, находится ли код в одних и тех же скобках для определения логики выполнения 2. Отсутствие функции lint для завершения длинных фрагменты кода могут привести к отсутствию скобок, выполнение кода неправильное, и реорганизация занимает немного времени.
Bracket Pair ColorizerПлагин обеспечивает подсветку скобок и функции метки соответствия, чтобы помочь нам быстро найти совпадающие скобки.
Auto Complete Tag
В процессе написания кода HTML или JSX, если у нас есть такое требование: ввод<div>автоматически завершается как<div></div>;Буду<div>превратиться в<section>, имя соответствующей метки также меняется, в конечном итоге становясь<section></section>. Хотя иногда могут отображаться незакрытые теги в H5, все теги рекомендуется активно закрывать.Auto Complete TagЭто может помочь нам быстро реализовать эти два требования в процессе кодирования.
Подобные плагины:
ESLint
Чтобы разработать интерфейсный код более стандартизированным способом и избежать некоторого кода, который легко может вызвать проблемы в коде, сообщество ускорило решение lint, и в настоящее время наиболее часто используется ESlint. Обычно ESLint выполняет команды через командную строку, согласно папке.eslintrcа также.eslintignoreПроверьте код в файле, а затем вернитесь в редактор, чтобы изменить код с ошибкой при проверке. Таким образом, разделение процесса обнаружения кода и процесса кодирования в определенной степени повлияет на эффективность.ESLintПлагин распознает конфигурацию под проект, подсказывает прямо в процессе кодирования и может быть настроен на автоматическое исправление ошибок при сохранении файлов.
Подобные плагины:
Prettier
ESLint определяет спецификации на уровне кода, а Prettier определяет спецификации форматирования кода для разных редакторов, чтобы гарантировать согласованность одного и того же проекта после форматирования разными разработчиками. Разница редактора в форматировании кода принесет ненужные проблемы с кодовой комбинацией. Подробное введение в Prettier можно найти по адресуОфициальный сайт красивееК пониманию,Красивый плагинчерез проект.prettierНастраиваем код форматирования.Отправляем этот файл в репозиторий проекта.Редактор, поддерживающий prettier, отформатирует код таким же образом после открытия проекта.
Подобные плагины:
REST Client
В процессе совместной отладки front-end и back-end приложений или тестирования интерфейса Node у нас будет требование запросить интерфейс для проверки возвращаемого результата. Обычно используемые инструменты — Postman и CURL. Функции, предоставляемые Postman, очень полны, но во время разработки необходимо установить дополнительное программное обеспечение, а переключение программного обеспечения в процессе разработки не идеально. CURL — это инструмент командной строки, который поставляется вместе с системой, и он также очень мощный, но лично мне кажется, что ввод команды curl в консоли не очень удобен.REST ClientЭто дает нам возможность быстро запросить интерфейс в окне редактора, и мы можем сохранить запрошенный список API в файле проекта для последующего использования.
GitLens
Gitlens сделал много расширений для функции git VSCode, которая очень мощна. Наиболее привлекательным является его способность быстро отслеживать изменения кода, которые можно быстро обнаружить по размерам проектов, файлов и строк кода. Подсказка при наведении на строку кода может вызвать помехи при кодировании.Лично рекомендуется отключить подсказку о смене строки в процессе написания кода.
Quokka.js
При проверке синтаксиса или некоторых функций javascript/Typescript нам может понадобиться среда, которая может выполняться быстро. В прошлом мы обычно использовали функцию фрагмента, которая поставляется с браузером. При кодировании в браузере эффект подсказки кода будет естественным. быть слабее, а некоторые новые функции поддерживаются не полностью.Quokka.jsПредоставляет редактору функцию быстрого создания площадки js/ts, в редакторе можно быстро писать исполняемые фрагменты кода и проверять некоторые особенности. Quokka.js предоставляет версию для сообщества и версию Pro (платная, недешевая).Версия для сообщества не может повторно добавлять сохраненные файлы в рабочую среду и требует каждый раз создавать новый файл для выполнения. Лично я считаю, что в обычное время достаточно провести некоторую проверку функций.
Подобные плагины:
Snippet
Snippet предоставляет нам предоставленную функцию быстрой вставки фрагмента кода. Например, после установки фрагмента реакции введитеimrcможно быстро сгенерироватьimport React, {Component} from 'react. На рынке плагинов реализации фрагментов можно найти для большинства фреймворков и языков. Поскольку я не всегда могу запомнить аббревиатуры фрагментов кода, я редко использую фрагменты кода.
Рекомендуется несколько хороших плагинов для фрагментов кода:
тема
В процессе разработки наличие темы, которая может доставить вам удовольствие при написании кода, также в определенной степени повысит эффективность программирования и вдохновит вас. Конечно, у разных людей разные предпочтения к зрению, поэтому в конце я поделюсь только своей конфигурацией темы. Два плагина темы, которые я использую сейчас:Material Icon ThemeДобавьте отображение соответствующего значка для типа файла;One Dark ProБолее гибкая тема.
Мы надеемся, что с помощью VSCode наша работа будет выполняться эффективнее и качественнее.
Если у вас есть утечка, то тоже всем приветствую :)