Как быстро внедрить спецификации кода в фронтенд-команде

В этой статье рассказывается о том, как быстро разрабатывать и реализовывать спецификации кода в команде фронтенда!!!
галантереи, возьми этосклад

1. Предпосылки

В сентябре сменилась новая кафедра.Кафедра долго не создавалась.На тот момент не было统一的代码规范(В некоторых проектах используются спецификации, в некоторых нет, и нет единого закрытия)

Структура стека технологий командыVue,React,Taro,Nuxt,использоватьTypescript, он относительно сложен, и в будущем он может расширить другие технологические стеки при объединении с отделом.0-1实现了一套通用的代码规范

Он используется в группе уже несколько месяцев, и весь процесс относительно гладкий и快速, у меня есть время, чтобы поделиться этим недавно ~

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

2. Зачем нужна спецификация кода

Не скажу... Все знают~

Если ты не очень хорошо знаешь,показать путь

3. Определите объем спецификации

В первую очередь, для синхронизации с супервайзером команде нужна единая спецификация, я считаю, что супервайзер тоже ждет, пока кто-то это сделает

коллекция первый шаг团队的技术栈情况,Конечно规范要包括的范围

Разделите спецификацию на три частиESLint,StyleLint,CommitLint, в сочетании с реальным положением команды анализируется следующим образом

• ESLint: для единой командыTypeScript, фреймворк используетVue,React,Taro,а такжеNuxt
• StyleLint: для единой командыLess
• CommitLint: спецификация фиксации кода git

Конечно, также необходимо учитывать стек технологий, который команда может расширить в будущем, чтобы обеспечить гарантированную реализацию.可扩展性

4. Изучите план внедрения в отрасли

Следующие 3 варианта являются общими

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

   Полагаться на людей, чтобы убедиться, что спецификации кода существуют不可靠, а необходимость ручного просмотра кода не стандартизирована,效率低

2. Напрямую использовать существующие зрелые спецификации в отрасли, такие как css с использованием официально рекомендованных спецификаций StyleLint stylelint-config-standard, stylelint-order, JavaScript с использованием рекомендованных спецификаций ESLint eslint:recommended и т. д.

   а) Спецификации с открытым исходным кодом часто не отвечают потребностям команды,可拓展性差; b) Спецификации, предоставляемые отраслью, являются независимыми (stylelint предоставляет только спецификации кода css, ESLint предоставляет только спецификации JavaScript), да零散的, существуют проблемы высокой стоимости и ненадежности инициализации или обновления спецификации (каждый проект требует нескольких шагов ручной работы)

3. Основанный на StyleLint, ESLint для разработки пакета спецификации команды npm, используйте команду для разработки библиотеки спецификации

   а) Это решение решает проблему плохой масштабируемости, но проблема (б) во втором пункте все еще существует

5. Наши технические решения

Общая техническая идея заключается в следующем, обеспечивая три основных пакета@jd/stylelint-config-selling,@jd/eslint-config-selling,@jd/commitlint-config-sellingудовлетворить соответственноStyleLint,ESLint,CommitLint

1. @jd/stylelint-config-sellingВключая css, less, sass (пока не используется командой)
2. @jd/eslint-config-sellingВключая Vue, React, Taro, Next, nuxt (еще не используется командой)..., а также включает плагины или парсеры ESLint, которые могут быть расширены, чтобы потребовать настройки в будущем.
3. @jd/commitlint-config-sellingУнифицированное использование git

Up предоставляет простой инструмент командной строки, интерактивный初始化init,или更新updateТехнические характеристики

несколько ключевых моментов

1. Единый пакет управления с lerna

lernaЭто инструмент управления для управления проектами JavaScript, содержащих несколько пакетов. Он широко используется в отрасли. Если вы этого не знаете, вы можете найти информацию самостоятельно.
Структура проекта следующая

2. Все зависимости трех базовых пакетов установлены как производственные зависимости.

Как показано ниже, пакет@jd/eslint-config-sellingЗависимости написаны в производственных зависимостях, а не в зависимостях разработки
пожалуйста, объясни:Зависимости разработки и зависимости производства

• 开发依赖: Когда бизнес работает с不会下载Разрабатывайте пакеты в зависимостях, общих спецификациях в отрасли, таких какstandard,airbnbпрописаны в зависимостях разработки
  • Минусы: бизнес-инжиниринг, кроме установки@jd/eslint-config-sellingКроме того, вам необходимо самостоятельно установить пакет предварительной зависимости, напримерeslint, Установите соответствующие пакеты предварительной зависимости в соответствии с выбранной вами структурой.Например, необходимо установить используемый Vue.eslint-plugin-vue... Стоимость использования, высокие затраты на обновление обслуживания
  • Преимущества: устанавливайте пакеты по запросу, и во время разработки не будут устанавливаться избыточные пакеты (пакеты, связанные с Lint, являются зависимостями разработки в бизнес-проектах, поэтому они будут влиять только на разработку).
• 生产依赖: При использовании в бизнес-инжиниринге会下载эти жуки
  • Плюсы: установить@jd/eslint-config-sellingПосле этого на пакет pre-dependency можно не обращать внимания
  • Недостаток: загрузка во время разработки@jd/eslint-config-sellingВсе пакеты, написанные в производственных зависимостях, даже если некоторые из них не используются, например, вы используете React, но установленыeslint-plugin-vue

3. Предоставьте простую командную строку

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

нет, руководствоПромежуточные и продвинутые основы интерфейса: как спроектировать и реализовать строительные леса

В группе пока нет каркаса шаблона проекта, если он будет в будущем, нам нужно интегрировать в него спецификационную часть.

Шестой, самый важный момент

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

Итак, после того, как техническое решение определено, соответствующие спецификации показаны ниже, мы в группе分工去制定, например, несколько человек делают styleLint, несколько человек делают Vue...

потом拉会评审, дорабатываются нормы, принятые всеми единодушноНаконец-то с открытым исходным кодом维护升级, В процессе использования, если у вас возникнут проблемы с несоответствующими спецификациями, отправьте вопрос, и все обсудят и определят, нужно ли вам менять спецификации.

напиши в конце

Вышеизложенный опыт нашей команды в реализации спецификаций внешнего интерфейса ~

Если вам интересно, вы можете посмотретьрепозиторий github

Эта статья была впервые опубликована вgithub/blog, прошу обратить внимание, продолжайте записывать оригинальные, хорошие статьи~