Единый стиль кода: используйте хаски, чтобы унифицировать код всей фронтенд-команды.

спецификация кода

предисловие

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

Установить зависимости

Что мы в конечном итоге надеемсяgitПроверьте стиль перед отправкой и отправьте после форматирования, иначе будет сообщено об ошибке. Выбор стиля кода более популяренprettier, он будет произвольно форматировать код в соответствии с файлом конфигурации.Что касается конкретных правил конфигурации, это хорошо обсудить между партнерами по команде. а такжеhuskyЭто эквивалентно предоставлению нам ряда функций ловушек в процессе отправки git, которые мы будем использовать здесь.pre-commitХук, сначала устанавливаем зависимости:

yarn add husky prettier -D

Настройте правила более красивого форматирования

мы можем использовать.prettierrcфайлы также можно найти вpackage.jsonДобавляйте конфигурации в файлы, но рекомендуется здесь.prettierrcдокумент:

{
  "arrowParens": "always",  //剪头函数参数是否使用（）
  "bracketSpacing": false,   // {foo: xx}还是{ foo: xx }
  "jsxSingleQuote": true,  // jsx是否使用单引号
  "jsxBracketSameLine": false,
  "semi": true,  // 是否每句后都加分号
  "singleQuote": true,  // 是否使用单引号
  "tabWidth": 2,  // tab占用的字符数
  "trailingComma": "es5"
}

Настроить хаски-хук

Здесь используется отдельный файл конфигурации.huskyrc, непосредственно в коде конфигурации

{
  "hooks": {
    "pre-commit": "lint-staged"  // pre-commit，提交前的钩子
  }
}

здесьlint-stagedЕго также необходимо установить отдельно. Это необходимо сделать перед отправкой. Сначала установите зависимости.

yarn add lint-staged -D

конфигурационный файл.lintstagedrcследующим образом:

{
  "src/**/*.js?(x)": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ],
  "src/**/*.{css,less,scss}": [
    "stylelint --fix",
    "git add"
  ]
}

Вероятно, в первую очередь используются документы, соответствующие требованиям.prettierотформатировать, а затем использоватьeslintРемонт, если установленeslintЕсли да, то последний должен представитьgit;

постскриптум

Конечно, если вы хотите отформатировать код локально, вы также можете найти соответствующий редактор в используемом вами редакторе.prettierПлагины здесь не раскрываются. и мы можемpackage.jsonизscriptДобавьте к объекту набор команд для форматирования кода:

"eslint": "prettier --check --write src/**/*.js?(x)"

Ссылаться на

Категории