Конфигурация плагина VSCode, удваивающая эффективность разработки (часть 1)

внешний интерфейс Visual Studio Code Atom VIM Sublime Text

Если вы хотите преуспеть, вы должны сначала отточить свой инструмент Редактор, с которым инженеры-программисты имеют дело почти каждый день, может быть редактором. За последние несколько лет среди редакторов, которые я использовал, были EditPlus, UltraEdit, Visual Studio, EClipse, WebStorm, Vim, SublimeText, Atom, VSCode, а те, которые до сих пор часто используются, — этоVSCodeа такжеVim. На самом деле, я установил подключаемый модуль Vim в VSCode и использовал кодирование в ключевом режиме Vim, потому что, поскольку я обнаружил, что повышение эффективности достигается за счет того, что руки не касаются клавиатуры, я старался не касаться мыши как можно больше.

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

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

Конфигурация внешнего вида

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

  • Цвет:Solarized Dark, встроен VSCode, тема используется не менее 5 лет, конфигурация под Vim точно такая же;
  • значок:VSCode Great Icons, настройте разные значки для разных типов файлов, которые очень интуитивно понятны;
  • Шрифт:Fira Code, с момента обнаружения и использованияFira Code, я никогда не смотрел на другие шрифты второй раз.Если шрифты будут более элегантными, особенно обработка математических операторов, вы действительно почувствуете, что пишете стихи при написании кода.Ха-ха, процесс установки Fira Code немного больше сложно, но эффект того стоит;

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

{
  "editor.cursorStyle": "block",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "editor.rulers": [120],
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-great-icons"
}

проверка стиля

Ранее я написал статью об обеспечении стиля кода во время Git-коммитов:«Использование husky и lint-staged для создания сверхгладкого рабочего процесса проверки кода». Если редактор дает обратную связь в режиме реального времени при кодировании, это наиболее эффективно для разработчика.Обязательная проверка при отправке — это только с точки зрения команды, чтобы обеспечить нормативность и согласованность стиля кодирования. Код, который напишет фронтенд-инженер, не что иное, как: HTML, CSS, JavaScript, MarkDown, TypeScript, JSON, очевиден соответствующий инструмент LINT:

  • ESLint: подключаемая архитектура, существует множество наборов правил основного стиля кодирования на выбор, типичныеAirbnb,GoogleПодождите, вы даже можете сохранить свой собственный, не нажимая на стол;
  • StyleLint, инструмент проверки стиля той же архитектуры плагина, но я настраиваю его проверкуreact-nativeсерединаstyled-componentsНа стилизацию компонентов действительно ушло много сил, поэтому могу написать отдельную статью;
  • TSLint: TypeScript не является моим основным языком программирования на данный момент, но он готов рано;
  • MarkdownLint: Если Markdown является недопустимым, это может вызвать исключения парсера в некоторых случаях, потому что Markdown имеет несколько наборов стандартов, и некоторая поддержка синтаксиса между различными стандартами может быть несовместимой;

В дополнение к перечисленным выше инструментам Lint очень полезно иметьEditorConfigПлагины поддерживаются почти всеми основными IDE. Мы можем договориться о методе отступа и формате кодирования файлов для разных членов команды, IDE и платформ с помощью простых файлов конфигурации, чтобы избежать путаницы. Ниже приведены мои часто используемые конфигурации:

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2

С проверкой стиля, естественно, возникнет необходимость форматировать файлы в соответствии с настроенными правилами стиля.Инструменты форматирования были опробованы много раз, и они до сих пор используются следующим образом:

  • Prettier, который на самом деле уже отформатирован кодомСтандарт инструмента, который поддерживает форматирование почти всего внешнего кода и похож на EditorConfig, который поддерживает использование файлов для настройки правил форматирования;
  • Vetur, отформатировать файл .vue, включив в него CSS и JS.Что касается шаблона, то есть HTML части, то официальный мейнтейнер сказал, что лучшей поддержки инструмента нет, и по умолчанию не форматируется;

эффективность кодирования

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

Встроенные умные предложения в VSCode уже очень мощные, но я внес следующие изменения в конфигурацию по умолчанию, чтобы включить умные предложения везде (особенно в комментариях и строках), как в Vim:

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}

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

сегмент кода

Английский вызвалSnippets, основные редакторы на рынке также поддерживают его. Основная идея состоит в том, чтобы извлечь общие шаблоны кода и расширить N строк кода с помощью 2 ~ 3 ключей. Накопление фрагментов кода основано на личных привычках, с одной стороны, и на с другой стороны. Это хороший способ кодирования, накопленный в образовательном сообществе. Если вы считаете, что он вам не подходит, вы можете изменить его (найти существующий плагин и нарисовать совок). Мои часто используемые фрагменты кода плагины являются следующими:

  • HTML Snippets, различные фрагменты HTML-тегов, если вы знакомы с Emmet, вы можете полностью игнорировать это;
  • Javascript (ES6) Code Snippets, обычно используемое объявление класса, объявление модуля ES, импорт модуля CMD и т. д., поддержка не менее 20 сокращений;
  • Javascript Patterns Snippets, распространенные режимы кодирования, такие как IIFE;

автодополнение

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

  • Auto Close Tag, для JSX, Vue, HTML, после открытия тега и ввода</Когда , он может автоматически завершить тег для закрытия;
  • Auto Rename Tag, подходит для JSX, Vue, HTML, при изменении имени тега вы можете изменить соответствующий конечный (начальный) тег при изменении начального (конечного) тега, что поможет вам сократить количество нажатий клавиш на 50%;
  • Path Intellisense, завершение пути к файлу, обеспечивающее интеллектуальное понимание и автозаполнение, когда вы каким-либо образом вводите пути в файловой системе;
  • NPM Intellisense, завершение зависимостей NPM, обеспечивающее интеллектуальное понимание и автозаполнение при импорте любых зависимостей в node_modules;
  • IntelliSense for CSS class names, завершение имени класса CSS, оно автоматически сканирует имя класса CSS во всем проекте и делает интеллектуальные подсказки при вводе имени класса;
  • Emmet, раньше назывался Zen Coding. После того, как я его нашел, я не мог от него оторваться. Он может преобразовать строку селекторов CSS в теги HTML. VSCode имеет встроенный и официальный вводный документ.видеть, все, что вам нужно сделать, это ознакомиться с его грамматикой и часто практиковать ее;

Конечно, если вы также используете VSCode для написания кода на других языках, таких как PHP, просто зайдите на рынок и выполните поиск «PHP Intellisense».

улучшение функции

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

  • Color Highlight, для идентификации цветов в коде, включая различные цветовые форматы;
  • Bracket Pair Colorizer, идентифицируйте различные скобки в коде и помечайте их разными цветами, чтобы вы могли легко сканировать совпадающие скобки. В случае использования большого количества скобок это может уменьшить зрительное давление. Клавиши быстрого доступа редактора просты в использовании. , но в соседних встроенных В случае слишком большого количества наборов несколько бессильна;
  • Project Manager, управление проектами, давайте легко переключать папку проекта в командной панели, конечно, вы также можете напрямую открыть родительскую папку, содержащую несколько проектов, но это может замедлить работу VSCode;

Эпилог

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

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

Какие плагины вы используете? Добро пожаловать, чтобы оставить сообщение для обмена!

Не по теме

Используя конфигурацию VSCode, указанную выше, я записал 3 коротких видеоурока по внешнему интерфейсу. Вы можете увидеть практический эффект от моего VSCode в этих уроках. Если вам интересно, нажмите на ссылку ниже:

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

Категории