Если вы раньше или сейчас работали в компании любого размера, вам приходилось сталкиваться с трудностями при работе с несовместимыми стилями кода. Я работал в компании, у которой есть интерфейсный код, основанный на платформе Rails. В то время было очень сложно иметь инструменты соглашения о коде для внешнего интерфейса. Таким образом, всякий раз, когда кто-то отправляет запрос на проверку, другие инженеры должны прокомментировать каждую проблему с соглашением о коде. Очевидно, что эти комментарии вызвали некоторые затруднения, поскольку они вообще не влияют на производительность, это просто предпочтение стиля, и иногда это не может быть согласовано со всей командой инженеров. В этой ситуации некоторые инженеры игнорируют комментарий и объединяют свой запрос на извлечение, не применяя его, и это может стать критической проблемой коммуникации.
К счастью, команда архитекторов решила перейти на платформу node.js для внешнего интерфейса, и мы смогли внедрить инструменты соглашения о коде для всего кода JavaScript. Затем, интегрированный с инструментом CI, jenkins, для запуска lint-тестирования всякий раз, когда создается новый запрос на вытягивание.
Я хотел бы поделиться тем, как настроить инструмент линтера для базового приложения кода JavaScript и как интегрировать Travis CI для ваших личных проектов на Github.
Настроить репозиторий
На данный момент Eslint является самым популярным инструментом для анализа кода JavaScript, поэтому я представлю его для проверки соглашения о коде JavaScript. Давайте настроим репозиторий для этого примера.
После того, как вы создали репозиторий, давайте клонируем его на ваш локальный компьютер.
$ git clone [email protected]:minsooshin/codeConventionTooling.git $ cd codeConventionTooling
Установить пакеты
В этом примере нам понадобятся некоторые модули для запуска нашего приложения.
$ yarn init # or npm init $ yarn add --dev babel-core $ yarn add --dev babel-preset-es2015 $ yarn add --dev eslint
Я добавляю один за другим, чтобы показать, какие пакеты нужны, вы можете сделать это с помощью одной строки команды. После установки пакетов ваш файл package.json будет выглядеть так.
{
"name": "codeConventionTooling",
"version": "0.0.1",
"description": "code convention tooling example",
"main": "index.js",
"repository": "[email protected]:minsooshin/codeConventionTooling.git",
"author": "Mason Shin <[email protected]>",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"eslint": "^3.19.0",
"eslint-config-airbnb-base": "^11.2.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-plugin-import": "^2.2.0"
}
}
Установить конфигурацию Babel
Чтобы использовать синтаксис ES6, давайте создадим файл .babelrc в корневом каталоге проекта. Затем добавьте эти строки.
{
"presets": ["es2015"]
}
Инициировать Эслинта
Теперь мы можем настроить нашу конфигурацию Eslint с установленным пакетом. Запустите эту команду на своем терминале.
$ ./node_modules/.bin/eslint --init
Это подскажет вам этот вопрос.
? How would you like to configure ESLint? ❯ Answer questions about your style Use a popular style guide Inspect your JavaScript file(s)
Выберите Use a popular style guide, тогда следующий вопрос будет таким.
? Which style guide do you want to follow? (Use arrow keys) ❯ Google Airbnb Standard
Я использую Airbnb в большинстве случаев. Итак, я выберу Airbnb, затем следующий.
? Do you use React? (y/N)
Если вы создаете приложение React, введите y, но в этом примере я наберу N, так как я не создаю приложение React. Затем вы увидите последний вопрос.
? What format do you want your config file to be in? (Use arrow keys) ❯ JavaScript YAML JSON
Я использую формат JavaScript для eslintrc, поэтому он сгенерирует для меня файл .eslintrc.js.
NPM-скрипты
Как вы знаете, нам нужно настроить сценарии npm для выполнения ожидаемого поведения в файле package.json. Откройте файл package.json и добавьте свойство "scripts" над "devDependencies".
"scripts": {
"eslint": "./node_modules/.bin/eslint src --ext .js"
},
Получив это в файле package.json, вы можете проверить файлы JavaScript в каталоге src с помощью команды yarn run eslint. Если вы используете npm, используйте npm вместо yarn.
Пример кода
Я создам файл JavaScript, который экспортирует простые функции, возвращающие входной массив с дубликатами или нет.
// src/containsDuplicate.js
/**
* @param {number[]} nums
* @return {boolean}
*/
export default function containsDuplicate (nums) {
const seen = new Set()
for (let i = 0; i < nums.length; i++) {
if (seen.has(nums[i])) {
return true
} else {
seen.add(nums[i])
}
}
return false
}
После того, как вы сохранили этот файл, давайте выполним команду для проверки кода.
$ yarn run eslint
Вы получите этот результат от команды.
yarn run v0.24.4 $ ./node_modules/.bin/eslint src --ext .js /Users/mshin/Workspace/github/codeConventionTooling/src/containsDuplicate.js 5:42 error Unexpected space before function parentheses space-before-function-paren 6:25 error Missing semicolon semi 7:36 error Unary operator '++' used no-plusplus 9:18 error Missing semicolon semi 10:12 error Unnecessary 'else' after 'return' no-else-return 11:24 error Missing semicolon semi 14:15 error Missing semicolon semi ✖ 7 problems (7 errors, 0 warnings)
Каждая ошибка имеет название ошибки, поэтому вы можете узнать, для чего эта ошибка, на веб-сайте Eslint.
Если вы не хотите иметь правило, основанное на Airbnb, вы можете отключить его, добавив отключение правила в файл .eslintrc.js. Например, я обычно не использую точку с запятой (;) в конце строки, поэтому добавлю ее в свой .eslintrc.js. Причина, по которой я не использую точку с запятой в своем коде, заключается в том, что при компиляции производственного пакета точка с запятой может быть добавлена автоматически.
'rules': {
'semi': [2, 'never'] // this is equivalent to 'semi': ['error', 'never']
}
Давайте еще раз попробуем нашу команду для проверки кода. Теперь мы получим это.
yarn run v0.24.4 $ ./node_modules/.bin/eslint src --ext .js /Users/mshin/Workspace/github/codeConventionTooling/src/containsDuplicate.js 5:42 error Unexpected space before function parentheses space-before-function-paren 7:36 error Unary operator '++' used no-plusplus 10:12 error Unnecessary 'else' after 'return' no-else-return ✖ 3 problems (3 errors, 0 warnings)
Итак, все проблемы с точкой с запятой исчезли. Уууу!! Давайте посмотрим на проблему no-plusplus. Этот унарный оператор ++ используется в цикле for, и это довольно распространенное использование, поэтому я не хотел бы менять свой код из-за этой ошибки. Я добавлю эту строку в .eslintrc.js на основании инструкции страницы правил no-plusplus.
"no-plusplus": [2, { "allowForLoopAfterthoughts": true }]
Если вы хотите сохранить правило по умолчанию и игнорировать только файл, вы можете отключить правило для конкретной ошибки.
/* eslint-disable no-plusplus */
for (let i = 0; i < nums.length; i++) {
/* eslint-enable */
Исправим еще две ошибки в коде, не обновляя правила.
Наконец, мы получаем этот результат от нашей проверки.
yarn run v0.24.4 $ ./node_modules/.bin/eslint src --ext .js ✨ Done in 0.68s.
И окончательный наш файл containsDuplicate.js выглядит так:
export default function containsDuplicate(nums) {
const seen = new Set()
for (let i = 0; i < nums.length; i++) {
if (seen.has(nums[i])) {
return true
}
seen.add(nums[i])
}
return false
}
Как это просто!!! Давайте зафиксируем изменения, чтобы перейти к интеграции Travis CI.
Трэвис Си
Github поддерживает интеграцию с Travis CI только для общедоступных репозиториев. Таким образом, ваш репозиторий должен быть общедоступным, чтобы использовать Travis CI бесплатно. Перед интеграцией зарегистрируйте Travis CI с помощью своего Github здесь.
После входа в Travis CI вы увидите это меню на экране.
Нажмите на значок +, после чего отобразятся все ваши репозитории Github. Затем нажмите кнопку Sync accountв правом верхнем углу содержимого и включите репозиторий codeConventionTooling для ЭК. Я добавлю значок Travis CI в свой репозиторий, чтобы легче было видеть статус eslint.
Перейдите к конфигурации Travis CI репозитория, щелкнув значок шестеренки рядом с именем репозитория. Щелкните значок значка, после чего откроется диалоговое окно. Пожалуйста, выберите любой формат. Я обычно использую формат уценки.
Скопируйте содержимое в текстовую область, затем вставьте его в свой README.md.
Далее нам нужно добавить файл для интеграции Travis CI с нашим репозиторием. Создайте файл с именем .travis.yml и добавьте эти строки.
language: node_js node_js: - "6" script: - npm run eslint
Вот оно! Как только вы зафиксируете свое изменение, вы увидите, что Travis CI активирован. И если проверка кода прошла успешно, ваша фиксация будет отмечена зеленой галочкой рядом с сообщением фиксации.
Наконец, вы можете увидеть пропускной значок Travis CI.
