Внешний осмотр кода и спецификация кода

внешний интерфейс ESLint

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

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

2. Комбинированные навыки

Git Hook + lint-staged + Prettier + ESLint, окончательная реализация будет представлена ​​первой, а конкретные функции и конфигурация каждого модуля будут представлены позже.

2.1 Этапы реализации

  • Готов зафиксировать код
  • git add Добавить в промежуточную область
  • выполнить git-коммит
  • Хук, зарегистрированный хаски в git pre-commit, вызывает lint-staged
  • lint-staged Получить все отправленные файлы и выполнить письменные задачи по очереди (Prettier + ESLint)
  • Если есть ошибка (не проверка ESLINT), задача останавливается, ожидание следующего коммита, при печати сообщения об ошибке
  • Успешно отправлено

2.2 Инсталляционный пакет

npm i --save-dev husky lint-staged prettier

npm i --save-dev eslint babel-eslint eslint-plugin-react

2.3 Конфигурация модуля

2.3.1 .eslintrc

{
  "env": {
    "browser": true,
    "es6": true
  }
  "eslint": "recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "impliedStrict": true
    }
  },
  "plugin: react",
  "rules": {
    "quotes": [
      "error",
      "single"
    ]
  }
}

2.3.2 .prettier.js

module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 个空格缩进
  tabWidth: 4,
  // 不使用缩进符,而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号,而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数,只有一个参数的时候,也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 换行符使用 lf
  endOfLine: 'lf'
}

2.3.3 package.json

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add ."
    ]
  },
  ...
}

2.3.4 Прогон результатов

Jietu20191203-231601.jpg

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

2. Введение и настройка Prettier

2.1 Что такое красивее?

  • Prettier — это мощный инструмент форматирования кода, который полностью объединяет стиль кода вас и ваших коллег (это действительно важно...)
  • В то же время комбинируйте правила ESLint и самостоятельно настраиваемые правила для автоматического форматирования кода.
  • Prettier только унифицирует стиль кода и не будет проверять спецификацию кода, проверка спецификации кода должна быть передана ESLint.

2.2 Необходимость преследующего

  • Простая конфигурация для автоматического формата и унифицированного стиля кода
  • Сократите время на кодирование CR и перестаньте беспокоиться о проблемах с форматированием
  • Избегайте визуальной проверки формата кода и сократите количество отправок кода
  • Избавьтесь от тревоги при ОКР

2.3 Как настроить?

2.3.1 Установить плагин в редакторе

  • В настоящее время разработано использованиеvscodeРедактор, посмотри в расширенииPrettier - Code formatterПлагин можно использовать после установки.Плагины для разных редакторов
  • После установки откройте файл, который нужно отформатировать, и отформатируйте весь файл или отформатируйте выделенный фрагмент кода следующим образом
1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Code

[Ошибка загрузки изображения...(image-4acd90-1575447043750)]

2.3.2 Профиль

  1. Создайте файл правил: создайте его в корневом каталоге.prettierrcфайл (поддерживается формат конфигурации json) или создайте.prettierrc.jsконфигурационный файл

  2. существуетpackage.jsonдокументscriptsДобавьте соответствующий код в

{
  ...
  "scripts": {
    "format": "prettier --write 'src/**/*.{js,jsx,css,less}'",
    ...
  },
  ...
}
  1. Выполнить на консолиnpm run formatдля автоматического форматирования всех файлов в рамках конфигурации

3. Введение и настройка ESLint

3.1 Что такое ESLint?

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

3.2 Необходимость ESLint

  • Своевременное выявление проблем на этапе кодирования
  • Убедитесь, что ваш код соответствует лучшим практикам
  • Единая спецификация написания кода

3.3 Как использовать

3.3.1 Метод конфигурации

  • Примечания по конфигурации: используйте комментарии JavaScript для встраивания информации о конфигурации непосредственно в файл.
  • конфигурационный файл: укажите информацию о конфигурации с помощью файлов JavaScript, JSON или YAML.

3.3.2 Описание файла конфигурации

  1. формат файла
  • JavaScript: использовать.eslintrc.jsи экспортируйте объект, содержащий вашу конфигурацию.
  • YAML: использовать.eslintrc.yamlили.eslintrc.ymlОпределите структуру конфигурации.
  • JSON: для.eslintrc.jsonОпределите структуру конфигурации.
  • использовать.eslintrc, который может быть JSON или YAML.
  • package.json : eslintConfigВ твоемpackage.jsonСоздайте атрибут в файле и определите там свою конфигурацию.
  1. окружающая обстановка :

Среда, в которой сценарий предназначен для работы. Каждая среда поставляется с предопределенным набором глобальных переменных.

"env": {
  "browser": true,
  "node": true
}
  1. глобальная переменная :

Другие глобальные переменные, к которым скрипт обращается во время выполнения.

"globals": {
  "React": true,
  "MtaH5": true,
  "TencentGDT": true
}
  1. Опции парсера :

ESLint позволяет указать параметры языка JavaScript, которые вы хотите поддерживать. По умолчанию для ESLint требуется синтаксис ECMAScript 5. Вы можете переопределить этот параметр, чтобы включить поддержку других версий ECMAScript, а также JSX с помощью параметров парсера.

"parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module", // 设置为`"script"`(默认)或者`"module"`您的代码位于ECMAScript模块中。
  "ecmaFeatures": { // 一个对象,指示您想要使用哪些其他语言功能
    "jsx": true, // 启用JSX
    "impliedStrict": true // 启用全局严格模式
  }
},
  1. плагин

Чтобы настроить плагин в файле конфигурации, используйтеpluginsКлюч, содержащий список имен плагинов. Долженeslint-plugin-Префикс может быть опущен в имени плагина.

"plugins": [
  "react",
  "eslint-plugin-react"
]
  1. расширять

Расширение заключается в прямом использовании правил lint, уже написанных другими,rulesПравила, настроенные в свойствах, настраиваются на основе этого правила.

"extends": [
  "standard"
  "eslint:recommended",
  "plugin:react/recommended"
],

Рекомендуемая расширенная конфигурация:

standardjs,airbnb,eslint-config-alloy

  1. правило :

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

  • "off"или0: закрыть правило
  • "warn"или1: включить правило, использовать ошибки уровня предупреждения (не приведет к выходу из программы)
  • "error"или2: включить правило, использовать ошибку уровня ошибки (при срабатывании программа выйдет)
"rules": {
  "strict": 2,
}

3.3.3 Как обнаружить

Добавьте команду запуска вpackage.jsonизscriptsСкрипт, установите каталог SRC под проверкой файла

{
 ...
  "scripts": {
    "lint": "eslint ./src"
    "lintFix": "eslint ./src --fix"
  },
  ...
}

Выполните следующую команду в консоли:

// 代码检查
npm run lint
// 代码检查并修复
npm run lintFix

В-четвертых, введение и настройка Git Hook.

4.1 Гит хуки

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

4.1.1 pre-commit

  • Хук для запуска до ввода сообщения коммита
  • Представить на экспертизу снимок
  • Если хук завершится с ненулевым значением, Git откажется от коммита.
  • Можно использоватьgit commit --no-verifyчтобы обойти эту ссылку
  • Вы можете использовать этот хук, чтобы проверить, соответствует ли стиль кода

4.1.2 prepare-commit-msg

  • Хук запускается перед запуском редактора сообщений коммита, после создания сообщения по умолчанию.
  • Позволяет редактировать информацию по умолчанию, которую видят коммиттеры

4.1.3 Как настроить

добавить конфигурацию вpackage.json, команда выполнения добавляется вscriptsВ сценарии:

{
  "scripts": {
    "lint": "eslint ./ --cache --ignore-pattern .gitignore",
    "precommit-msg": "echo 'Pre-commit checks...' && exit 0"
  },
  "pre-commit": [ "precommit-msg", "lint" ],
  "devDependencies": {
    "eslint": "^2.12.0",
    "pre-commit": "^1.1.3"
  }
}

4.2 Husky

в нашемpackage.jsonНастройте хаски в , и выполните соответствующую команду на соответствующем этапе git hook. Поэтому нет необходимости утомительно настраивать файлы скриптов для фазы git hook.

{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test"
    }
  }
}

Пятерки,lint-staged

Роль постановочной клейки состоит в том, чтобы проверить только файлы, измененные этим представлением каждый раз, где постановка - это концепция в Git, которая ссылается на область, которая будет представлена, используяgit commit -a, или сначалаgit addпотомgit commit, ваш измененный код будет проходить через область ожидания фиксации.

// package.json
{
  ...
  "scripts": {
    "precommit": "lint-staged", // git commit 执行这个命令,这个命令在调起 lint-staged
  },
  "lint-staged": {   // lint-staged 配置
    "src/**/*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
  ...
}

6. Резюме

Выше были разобраны некоторые пути и методы в процессе проектной практики. Использование методов позволяет повысить качество проекта. Стандартизированный код позволяет в определенной степени уменьшить возникновение проблем. Также улучшается читаемость кода.