Как часто вы выполняете одно и то же задание каждый день? Я готов поспорить, что больше, чем вы думаете. Выполнение простых действий, таких как создание свойств, наблюдателей(watchers) или новых методов, выполняется снова и снова при создании приложения.

Эти маленькие вроде бы действия образуют продолжительный отрезок времени. Наша цель — делать как можно больше с как можно меньшим количеством действий.

Редактор кода

Эффективность начинается с вашего набора инструментов. Если у вас есть дерьмовые инструменты, делать простые вещи будет сложнее. Иногда инструменты, которые у нас есть, просто нужно отряхнуть, а иногда нам нужно попробовать что-то новое. Помните, работать умнее, а не больше.

Visual Studio Code -? загрузить

Несмотря на то, что доступно много редакторов кода, я сосредоточусь на использовании возможностей редактора от Microsoft VS Code. Он имеет встроенную поддержку Typescript, а также очень большое сообщество моддинга расширений. Воспользуйтесь ссылкой для скачивания и выберите свою операционную систему.

После завершения установки запустите vscode. Теперь вы готовы продолжить установку расширения.

Расширения/плагины

Ниже приведен список рекомендуемых расширений. Их цель — улучшить ваше время разработки с помощью vscode, их так же легко установить, нажать просто Install на странице расширения.

Это также можно сделать из интерфейса VS Code, щелкнув View> Extensions в верхней панели. Откроется панель расширения.

Settings Sync ?—? установить

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

Vetur?—?? установить

При работе в Vue нет недостатка в полезных расширениях, которые вы можете подключить. Из всех расширений vetur является обязательным условием. Он поможет вам с подсветкой синтаксиса, snippets, intellisense, отладкой и многим другим.

Auto Close Tag?— установить

Автоматически добавляет закрывающий тег HTML / XML, так же, как Visual Studio IDE или Sublime Text.

Auto Import?—? установить

Автоматически находит, анализирует и обеспечивает выполнение и завершение кода для всех доступных импортов. Работает с Typescript и TSX.

Auto Rename Tag?—? установить

Автоматическое переименование парного тега HTML / XML, как в Visual Studio IDE.

Bracket Pair Colorizer?— установить

Это расширение позволяет идентифицировать соответствующие скобки с помощью цветов. Пользователь может определить, какие символы соответствуют и какие цвета использовать.

ESLint?—?установить

Интегрирует ESLint в VS Code. Если вы не знакомы с ESLint, вы можете ознакомиться с документацией.

GitLens — установить

GitLens расширяет возможности Git, встроенные в Visual Studio Code. Он помогает вам с легкостью визуализировать авторство кода с помощью аннотаций Git-blame, легко перемещаться и изучать репозитории Git, получать ценные сведения с помощью мощных команд сравнения и многое другое.

VS Live Share —?установить

Если вы когда-либо работали удаленно, вы понимаете, насколько сложна отладка с другими разработчиками. Visual Studio Live Share позволяет совместно редактировать и отлаживать с другими в режиме реального времени.

Темы

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

Material Theme ?— установить

Работа в Material Design каждый день сделала меня неравнодушным к широко популярной Material Theme. У этого есть мягкие цвета и глаза не текут смотря на код в течение многих часов подряд. Он поставляется с вариациями 8 тем и большими настройками опций .

Theme Icon Theme ?— установить

В то время как Material Theme имеет возможность пользовательской настройки значков ваших папок, в Material Icon Theme есть больше опций и пользовательских вариантов для многих новых типов файлов, таких как новый vue-cli-3 vue.config.js .

шрифты

Другой важный аспект нашей разработки — это шрифты редактора.

FiraCode ?— установить

Очень хорошо сделанный моно-шрифт с открытым исходным кодом и бесплатно!

FiraFlott ?— установить

шрифт, который объединяет шрифт Mono из FiraCode (также есть жирный шрифт Bold), включая Font-Ligatures с FlottFlott в качестве курсивного шрифта.

OperatorMono ?— установить

Один из единственных платных шрифтов, которые я бы порекомендовал. Очень чистый с отличным курсивом.

Чтобы изменить шрифт, перейдите в File > Preferences > Settings и введите в строку поиска font .

Дополнительные советы

Хотя плагины, такие как vetur, уже содержат некоторые удобные snippets, такие как scaffold, все еще есть возможности для улучшения.

Snippets ?— установить

Уменьшите количество повторяющихся задач, превратив их в snippets. Мне нравится сокращать свойства Vue, такие как data, computed и т. д.

Commitizen ?— установить

Если вы следуете semver, вы должны это поставить, commitizen берет на себя предположение о написании сообщений коммита и позволяет автоматизировать такие вещи, как написание комментария к релизу.

Git aliases? ?— установить

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

Заключение

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

В следующей статье я научу вас, как использовать новые инструменты и как их использовать, используя стандарты кодирования, непрерывную интеграцию, тестирование и многое другое.