Навыки управления проектами, которые должен знать каждый руководитель фронтенд-команды

внешний интерфейс
Навыки управления проектами, которые должен знать каждый руководитель фронтенд-команды

Информация о наборе команды

nuggets.capable/post/702030…

задний план

При добросовестном перемещении кирпича я столкнулся с распространенной проблемой:

Tslint, настроенный в процессе CI проекта, автоматически запускается после моего git push кода, содержащего ошибки, самое ненавистное, что он был заблокирован. Безжалостно перехватывается tsLint.

Возникает дилемма

В это время мойДилеммаПоявившийся:

  • tsLint подсказывает, что проблема со стилем кода! требуется доработка
  • Конфигурации локального vscode и eslint не совпадают, и в проекте нет подходящих .prettierrc или .eslintrc, настроенных локально.
  • Узел времени переделки чуть позже

стоять перед выбором

На самом деле, я могу иметь3 варианта:

  1. Локальное восстановление: временно закройте более красивый инструмент локального vscode и измените стиль кода файла на месте, пока проверка не будет пройдена;
  2. Настройте локальные инструменты: потратьте некоторое время, чтобы настроить локальные более красивые инструменты, и конфигурация соответствует требованиям tslint;
  3. Настройте инструменты группы: настройте инструменты автоматического форматирования, чтобы стиль кода автоматически оптимизировался при каждой отправке проекта.

После рассмотрения планируется оптимизация в командный инструмент, который удобно пропускать существующий tslint, и может помочь всем стандартизировать lint;

Я думаю, что преимущества этой схемы заключаются в следующем.

  1. Потенциальные проблемы со стилем кода могут быть обнаружены во время коммита git, нет необходимости переделывать после нажатия
  2. автоматический формат
  3. Доступная конфигурация

Думать с точки зрения команды

  1. Гарантированный автономный режим: он может гарантировать, что стиль кода команды будет автономным, а стиль кода гарантированно будет единообразным на минимальном уровне. (Используя схему управления стилем расширенного кода, предоставляемую eslint, или напрямую используя существующую библиотеку стилей)
  2. Локализация: Проектирование конфигурации, npm install может предложить собственное решение для управления проектами.
  3. msg более практичен: выравнивает критерии фиксации с лучшей семантикой каждый раз, когда делается фиксация. Пусть в проекте будет больше значимых сообщений

Вот посмотрите на используемые инструменты:

Список инструментов:

  • husky
  • lint-staged
  • eslint
  • commitlint

Сначала добавьте в проект a.js для последующего тестирования;

let a=1;
let b=2;

хаски использование

Здесь используется версия 4.2.5 хаски.

npm i husky@4.2.5 -D

Настройте информацию в package.json

{
  "name": "projectName",
  "description": "",
	"husky": {
    "hooks": {
      "pre-commit": "echo 111",
    }
  }
}

При попытке git commit -am 'husy test' на этом этапе вы можете увидеть, что консоль команд имеет вывод 111;

Указывает, что хаски успешно зарегистрировал git hooks!


lint-staged

Установка инструмента, инструмент может обрабатывать регулярно выбранные файлы.

Например, у меня во всех присланных файлах разные операции lint для css и js, которые можно отличить по *.js или *.css

yarn add lint-staged -D

Добавьте конфигурацию в файл package.json

{
	"lint-staged": {
    "*.js": "echo 222"
  }
}

Попробуйте добавить новый файл a.js, выполните git commit -am 'lint-staged',

image.pngВывод хука перед фиксацией и операция на js были успешными;

eslint

Этот шаг очень прост.

yarn add eslint -D

Повторите инициализацию eslint

eslint --init

image.png

Измените наш package.json на этом этапе.

{
  "name": "autolint-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "lint": "eslint --fix"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.32.0",
    "husky": "4.2.5",
    "lint-staged": "^11.2.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "npm run lint"
  }
}

Запустите commit, чтобы отправить команду, вы можете видеть, что соответствующее место в файле a.js будет предложено eslint;

Установите стиль кода airbnb

Установить:

npx install-peerdeps --dev eslint-config-airbnb-base

Конфигурация .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "airbnb-base",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};

На этом этапе при отправке может выполняться автоматическое форматирование eslint~

Добавить инструмент спецификации фиксации

Установить:

yarn add  @commitlint/config-conventional @commitlint/cli -D

Локальный файл конфигурации commitlint.config.js

module.exports = { extends: ['@commitlint/config-conventional'] };

Отправьте после установки и обнаружите, что на данный момент отправка отклонена;

image.pngПоскольку отправка должна соответствовать спецификации ответа;

Канонический адрес:Уууу, эта лошадь plus.com/package/@co…

воплощать в жизнь

git commit -am 'feat:  new commit for new commit lint'

На данный момент завершен регулируемый проект;