Эти инструменты помогут тебе написать чистый код.
Учимся писать хороший код, но вы не знаете, с чего начать... Пройдитесь по руководствам по стилю, таким как Руководство по стилю Javascript для Airbnb ... Пытаясь написать код с лучшими практиками...
Удаление мертвого кода? Поиск неиспользуемых переменных в кодовой базе? Пытаетесь найти проблемные шаблоны в вашем коде? Мол, он возвращается или нет?
Что-нибудь из этого кажется знакомым?
Так много всего, чтобы учиться и делать все одновременно, это так беспокойно.
Вы руководитель группы, управляющий разнообразной командой? У вас есть новые разработчики в команде? Вы беспокоитесь, что они напишут код, не соответствующий стандартам? Занимает ли весь ваш день в обзорах кода, где обзор больше посвящен стандартам кода, а не фактической реализации логики?
Я был там и делал это, и это так утомительно и беспокойно.
Давайте пообещаем больше никогда не беспокоиться о том, как должен выглядеть код, или о том, как вся ваша команда будет писать код определенным образом, который выровнен и правильно отформатирован.
В этом уроке, если вы застряли, здесь находится хранилище кода. Запросы на извлечение приветствуются, если у вас есть предложения по улучшению.
Это руководство больше ориентировано на приложения React, но то же самое можно применить к любому веб-проекту.
Также редактор, который я использую для этого урока - VS Code. Он принадлежит Microsoft, и с тех пор, как они были в открытом коде, я был в ❤ этой компании (хотя было время, когда я не был).
Повестка
- Prettier
- ESLint
- Автоматизация форматирование и копирование при сохранении
- Husky
- Lint-staged
- With Husky and Lint-staged Combined
- EditorConfig
Давайте начнём с Prettier
Что такое Prettier?
Prettier - это самоуверенный кодировщик кода. Он форматирует код для вас определенным образом.
Этот GIF в значительной степени объясняет это:
Зачем нам это нужно?
- Очищает существующую базу кода: в одной командной строке. Представьте себе очистку базы кода с помощью более 20000 строк кода.
- Легко принимать: Prettier использует наименее противоречивый стиль кодирования при форматировании кода. Так как это открытый исходный код, многие люди работали над его повторением, исправляя некоторые крайние случаи и совершенствуя опыт.
- Написание кода: люди не понимают, что они тратят много времени на форматирование кода и тратят впустую свою умственную энергию. Позвольте Преттиеру справиться с этим, пока вы сосредоточитесь на основной бизнес-логике. Что касается меня, Преттье увеличил мою эффективность на 10%.
- Помощь начинающим разработчикам: если вы новый разработчик, работающий бок о бок с замечательными инженерами и хотите выглядеть круто, пишите чистый код, будьте умны! Используйте красивее.
Как мне это настроить?
Создайте папку с именем app и внутри этого типа папки в командной строке:
npm init -y
Это создаст package.json файл для вас внутри app папке.
Теперь я собираюсь использовать yarn на протяжении всего этого урока, но вы можете использовать npm также.
Давайте установим нашу первую зависимость:
yarn add --dev prettier
Это установит зависимость dev в вашем package.json который будет выглядеть так:
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description":
"A react boiler plate",
"main": "src/index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": { "prettier": "prettier --write src/**/*.js"
},
"devDependencies": {
"prettier": "^1.14.3"
}
}
Я расскажу через секунду, что это “prettier”: “prettier — write src/**/*.js” делает, но сначала давайте создадим src/ папка внутри нашего app папки. И внутри src/ папка позволяет создать файл с именем index.js - ты можешь называть это как хочешь.
В index.js файл, вставьте этот код как есть:
let person = {
name: "Yoda",
designation: 'Jedi Master '
};
function trainJedi (jediWarrion) {
if (jediWarrion.name === 'Yoda') {
console.log('No need! already trained');
}
console.log(`Training ${jediWarrion.name} complete`)
}
trainJedi(person)
trainJedi({ name: 'Adeel',
designation: 'padawan'
});
Так что до сих пор у нас есть src/app/index.js файл с некрасивым кодом, написанным на нем.
Есть 3 вещи, которые мы можем сделать с этим:
- Сделайте отступ и отформатируйте этот код вручную
- Используйте автоматизированный инструмент
- Пусть дела идут и идут дальше (Пожалуйста, не выбирайте эту опцию)
Я собираюсь пойти на второй вариант. Итак, теперь у нас есть установленная зависимость и сценарий Prettier, написанный на нашем package.json.
Давайте создадим prettier.config.js файл в нашем корне app папку, и добавьте в нее несколько более симпатичных правил:
module.exports = {
printWidth: 100,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
jsxBracketSameLine: false,
tabWidth: 2,
semi: true,
};
printWidth обеспечит, чтобы ваш код не превышал 100 символов.
singleQuote преобразует все ваши двойные кавычки в одинарные кавычки.
Подробнее читайте в Руководстве по стилю Airbnb JavaScript здесь. Это руководство - моя книга для написания хорошего кода и впечатления моих коллег.
trailingComma will ensure there is a dangling comma at the end of last object property. Nik Graf explains this in such a cool way here.
bracketSpacing печатает пробелы между литералами объекта:
If bracketSpacing is true - Example: { foo: bar }
If bracketSpacing is false - Example: {foo: bar}
jsxBracketSameLine поставит > многострочного элемента JSX в последней строке:
// true example
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
// false example
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
tabWidth указывает количество пробелов на уровень отступа.
semi если true, напечатает ; в конце заявления.
Вот список всех опций, которые вы можете дать Prettier.
Теперь, когда мы настроили конфигурацию, давайте поговорим об этом сценарии:
“prettier”: “prettier — write src/**/*.js”
В приведенном выше сценарии я бегу prettier и сказать это, чтобы найти все .js файлы в моем src/ папке. --write флаг говорит prettier сохранить отформатированные файлы при прохождении каждого файла и обнаружении любых аномалий в формировании кода.
Давайте запустим этот скрипт в вашем терминале:
yarn prettier
Вот что происходит с моим кодом, когда я его запускаю:
Если вы застряли, не стесняйтесь взглянуть на хранилище для этого.
Это в значительной степени завершает нашу более симпатичную дискуссию. Давайте поговорим о линтерах.
ESLint
Что такое кодовый линтер?
Зачем нам нужен один для JavaScript?
Поскольку JavaScript является динамическим и слабо типизированным языком, он подвержен ошибкам разработчика. Без выгоды процесса компиляции, .js файлы обычно выполняются для того, чтобы найти синтаксис или другие ошибки.
Инструменты Linting, такие как ESLint, позволяют разработчикам находить проблемы с их кодом JavaScript, не выполняя его.
Что делает ESLint таким особенным?
Хороший вопрос! Все в ESLint является подключаемым. Вы можете добавлять правила во время выполнения - для использования не нужно связывать правила и средство форматирования. Каждое добавляемое вами правило будет автономным, любое правило может быть включено или выключено. Каждое правило может быть установлено как предупреждение или ошибка. Ваш выбор.
Используя ESLint, вы получаете полную настройку внешнего вида руководства по стилю.
Сейчас есть 2 популярных руководства по стилю:
- Руководство по стилю Google JavaScript
- Airbnb Руководство по стилю JavaScript
Лично я использовал руководство по стилю Airbnb. Это было рекомендовано мне моим инженером в моей последней фирме, когда я только начинал свою профессиональную карьеру, и это был самый ценный актив в моем распоряжении.
Это руководство по стилю активно поддерживается - посмотрите репозиторий GitHub. В этом уроке я буду использовать наборы правил, вдохновленные Руководством по стилю Airbnb. Итак, начнем.
Давайте сначала обновим наш package.json файл:
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description": "A react boiler plate",
"main": "src/index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"lint": "eslint --debug src/",
"lint:write": "eslint --debug src/ --fix",
"prettier": "prettier --write src/**/*.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.(js|jsx)": ["npm run lint:write", "git add"]
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-jest-enzyme": "^6.0.2",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.18.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.9.1",
"husky": "^1.1.2",
"lint-staged": "^7.3.0",
"prettier": "^1.14.3"
}
}
Прежде чем перейти к настройке, я твердо верю, что люди должны знать, что входит в их зависимость. Итак, давайте поговорим о том, что делает каждый из этих пакетов, и затем мы можем двигаться дальше с настройками.
babel-eslint: этот пакет позволяет легко использовать пух на всех бэби-бэлах. Вам не обязательно нужен этот плагин, если вы не используете Flow или экспериментальные функции, которые еще не поддерживаются ESLint.
eslint: это основной инструмент, необходимый для написания кода.
eslint-config-airbnb: этот пакет предоставляет всю конфигурацию ESLint Airbnb в виде расширяемой общей конфигурации, которую вы можете изменить.
eslint-plugin-babel: eslint плагин компаньон дляbabel-eslint.
babel-eslint делает большую работу по адаптации eslint для использования с Бабелем.
eslint-plugin-import: Этот плагин предназначен для поддержки линтинга ES2015+ (ES6+) import/export syntax, и предотвратить проблемы с неправильным написанием путей к файлам и именами импорта.
eslint-plugin-jsx-a11y: нахождение правил для правил доступности для элементов JSX. Потому что доступность важна!
eslint-plugin-prettier: Это помогает ESLint слаженно работать с Prettier. Поэтому, когда Преттье форматирует код, он делает это с учетом наших правил ESLint.
eslint-plugin-react: Реагирующие правила ESLint.
Теперь в этом руководстве мало говорится о модульном тестировании для Jest / Enzyme. Но если вы используете его, давайте добавим и правила для них:
eslint-config-jest-enzyme: Это помогает с глобальными переменными, специфичными для React и Enzyme. Этот конфиг lint позволяет ESLint знать об этих глобалах, а не предупреждать о них - как утверждения it и describe.
eslint-plugin-jest: Плагин ESLint для Jest.
husky: Подробнее об этом позже, когда в разделе автоматизации.
lint-staged: Подробнее об этом позже, когда в разделе автоматизации.
Теперь, когда у нас есть базовое понимание, давайте начнем;
Создать .eslintrc.js файл в корне app/ папке:
module.exports = {
env: {
es6: true,
browser: true,
node: true,
},
extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],
plugins: [
'babel',
'import',
'jsx-a11y',
'react',
'prettier',
],
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
rules: {
'linebreak-style': 'off', // Don't play nicely with Windows.
'arrow-parens': 'off', // Incompatible with prettier
'object-curly-newline': 'off', // Incompatible with prettier
'no-mixed-operators': 'off', // Incompatible with prettier
'arrow-body-style': 'off', // Not our taste?
'function-paren-newline': 'off', // Incompatible with prettier
'no-plusplus': 'off',
'space-before-function-paren': 0, // Incompatible with prettier
'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases
'no-console': 'error', // airbnb is using warn
'no-alert': 'error', // airbnb is using warn
'no-param-reassign': 'off', // Not our taste?
"radix": "off", // parseInt, parseFloat radix turned off. Not my taste.
'react/require-default-props': 'off', // airbnb use error
'react/forbid-prop-types': 'off', // airbnb use error
'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
'prefer-destructuring': 'off',
'react/no-find-dom-node': 'off', // I don't know
'react/no-did-mount-set-state': 'off',
'react/no-unused-prop-types': 'off', // Is still buggy
'react/jsx-one-expression-per-line': 'off',
"jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
"jsx-a11y/label-has-for": [2, {
"required": {
"every": ["id"]
}
}], // for nested label htmlFor error
'prettier/prettier': ['error'],
},
};
Также добавьте .eslintignore файл в корне app/ директории:
/.git /.vscode node_modules
Давайте начнем с обсуждения того, что .eslintrc.js файл делает.
Давайте разберемся с этим:
module.exports = {
env:{},
extends: {},
plugin: {},
parser: {},
parserOptions: {},
rules: {},
};
env: Среда определяет глобальные переменные, которые предопределены. Доступные среды - в нашем случае это es6, browser и node. es6 включит все функции ECMAScript 6, кроме модулей (это автоматически устанавливает ecmaVersion опция парсера до 6).browser добавит все глобальные переменные браузера, такие как Windows. node добавит глобальные переменные узла и область видимости узла, такую какglobal.
- Вы можете прочитать больше об указании сред.
extends: Массив строк - каждая дополнительная конфигурация расширяет предыдущие конфигурации.
- Прямо сейчас мы используем правила airbnb которые распространяются на шутку, а затем распространяются на jest-enzyme.
- plugins: Плагины - это в основном правила, которые мы хотим использовать. Прямо сейчас мы используем babel, import, jsx-a11y, react, prettier, все что я объяснил выше.
- parser: По умолчанию ESLint использует Espree, но так как мы используем babel, По умолчанию ESLint использует Espree, но так как мы используем
- parserOptions: Когда мы меняем парсер по умолчанию для Espree в babel-eslint, нам нужно уточнить parserOptions — требуется. В опциях говорю ESLint, что ecmaVersion собирается выпустить версию 6. Поскольку мы пишем наш код в EcmaScript module и не script мы указываем sourceType как module. Поскольку мы используем React, который вводит JSX, в ecmaFeatures Я передаю ему опцию jsx и установить его true.
- rules: Это та часть, которая мне больше всего нравится в ESLint, настройка. Все правила, которые мы расширили и добавили с помощью наших плагинов, мы можем изменить или переопределить. rules это место, где вы это делаете. Я уже положил комментарии в Суть против каждого правила и для вашего понимания.
Теперь, когда все прояснилось, давайте поговорим о .eslintignore
.eslintignore берет список путей, которые мы хотим, чтобы ESLint не линтировал. Здесь я указываю только три:
- /.git Я не хочу, чтобы мои файлы, связанные с Git, были помечены.
- /.vscode Поскольку я использую VS Code, этот редактор поставляется с собственной конфигурацией, которую вы можете установить для каждого проекта. Я не хочу, чтобы мои настройки были помечены. Я использую VS Code, потому что он легкий и с открытым исходным кодом.
- node_modules Я не хочу, чтобы у меня зависели зависимости. Поэтому я добавил это в список.
Теперь, когда мы закончили с этим, давайте поговорим о недавно добавленных скриптах к нашему package.json
"lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix"
- $ yarn lint запустив эту команду, она пройдет через все ваши файлы в src/ и даст вам подробный журнал в каждом файле, где он находит ошибки, которые вы можете затем ввести вручную и исправить их.
- $ yarn lint:write выполнив команду, она сделает то же, что и команда, описанная выше. Единственное добавление состоит в том, что, если он может исправить любые ошибки, которые он видит, он исправит их и попытается удалить как можно больше запаха кода из вашего кода.
Если вы застряли, не стесняйтесь взглянуть на хранилище для этого.
Это было немного беспокойно, и если вы следили за этим до сих пор:
Давайте автоматизировать немного больше
Пока у нас есть prettier и eslint настройка, но каждый раз, когда мы должны запустить скрипт. Давайте сделаем что-нибудь с этим.
- Формат и код Lint при попадании ctrl+s в вашем редакторе.
- Каждый раз, когда вы фиксируете свой код, автоматически выполняйте предварительную команду, которая связывает и форматирует ваш код.
Формат и код Lint при сохранении
Для этого вам нужно использовать такой редактор, как VS Code:
- Установите плагин под названием расширение ESLint. Скачать здесь или зажмите ctrl+shift+x в вашем редакторе кода VS. Это откроет модуль расширений. Там, тип поиска eslint. Появится список плагинов. Установите один по Dirk Baeumer. Как только это будет установлено, нажмите reload кнопка, чтобы перезапустить ваш редактор.
Как только у вас установлен этот плагин, в вашем корне app/ папка создать папку под названием .vscode/ — (точка) важна в имени файла.
Внутри папки создайте settings.json файл как ниже:
{
"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
}
- editor.formatOnSave Я установил значение false здесь, потому что я не хочу, чтобы конфигурация редактора по умолчанию для формата файла конфликтовала с ESLint и Prettier.
- eslint.autoFixOnSave Я установил значение true здесь, потому что я хочу, чтобы установленный плагин работал каждый раз, когда я нажимаю сохранить. Поскольку ESLint сконфигурирован с конфигурациями Prettier, каждый раз, когда вы нажимаете save он отформатирует и скопирует ваш код.
Также важно отметить, что при запуске сценария yarn lint:write теперь он будет обрабатывать ваш код на одном ходу.
Только представьте, если вы передали кодовую базу из 20 тысяч строк кода для аудита и улучшения. Теперь представьте, что делаете это вручную. Улучшение неизвестного кода. Теперь представьте, что делаете это одной командой. Ручной подход может занять 30 дней ... в то время как автоматический подход займет у вас 30 секунд.
Таким образом, сценарии настроены, и каждый раз, когда вы нажимаете save редактор сделает магию за этот конкретный файл. Но не все в вашей команде выберут VS Code, и это нормально. Так что давайте автоматизировать немного больше.
Husky
Что такое husky?
Husky в основном позволяет тебе Git Hook. Это означает, что вы можете выполнять некоторые определенные действия, когда вы собираетесь совершить или когда вы собираетесь отправить код в ветку.
Все, что вам нужно сделать, это установить Husky:
yarn add --dev husky
и в вашем package.json файл добавить фрагмент:
"husky": {
"hooks": {
"pre-commit": "YOUR_COMMAND_HERE",
"pre-push": "YOUR_COMMAND_HERE"
}
},
Поэтому каждый раз, когда вы фиксируете или нажимаете, он выполняет определенный сценарий или команду - например, запускает тестовые сценарии или форматирует ваш код.
Lint-staged
Что такоеLint-staged?
Lint-staged помогает запускать линтеры для поэтапных файлов, чтобы плохой код не передавался в вашу ветку.
Почему Lint-staged?
Линтирование имеет больше смысла при запуске перед фиксацией вашего кода. Тем самым вы можете гарантировать отсутствие ошибок в хранилище и применить стиль кода. Но запуск процесса очистки во всем проекте идет медленно, и результаты размещения могут быть неактуальными. В конечном итоге вы хотите только скопировать файлы, которые будут зафиксированы.
Этот проект содержит скрипт, который будет запускать произвольные задачи оболочки со списком промежуточных файлов в качестве аргумента, отфильтрованного по указанному шаблону глобуса.
Все, что вам нужно, это установить Lint-staged:
yarn add --dev lint-staged
тогда в вашем package.json файл добавить это:
"lint-staged": {
"*.(js|jsx)": ["npm run lint:write", "git add"]
},
Что эта команда будет делать, это запустить lint:write команда, а затем добавить его в области подготовки. Эта команда будет запущена только для .js & .jsx файлы, но вы можете сделать то же самое для других файлов, если хотите.
С Husky и Lint-staged в сочетании
Каждый раз, когда вы фиксируете свой код, перед его фиксацией он запускает скрипт lint-staged который будет работать npm run lint:write который будет задерживать и форматировать ваш код - затем добавить его в область подготовки и затем зафиксировать. Круто, верно?!
Ваш финал package.json файл должен выглядеть следующим образом. Это тот же фрагмент, которым я поделился выше:
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description": "A react boiler plate",
"main": "src/index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"lint": "eslint --debug src/",
"lint:write": "eslint --debug src/ --fix",
"prettier": "prettier --write src/**/*.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.(js|jsx)": ["npm run lint:write", "git add"]
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-jest-enzyme": "^6.0.2",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.18.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.9.1",
"husky": "^1.1.2",
"lint-staged": "^7.3.0",
"prettier": "^1.14.3"
}
}
Теперь каждый раз, когда вы делаете это:
$ git add . $ git commit -m "some descriptive message here"
Он будет обрабатывать и форматировать ваш код на основе всех правил, указанных в.eslintrc.js файл. Благодаря этому вы можете быть уверены, что ни один плохой код никогда не будет запущен в производство.
С этим разделом завершено, теперь у вас есть prettier, eslint и husky интегрированы в вашу кодовую базу.
Давайте поговорим о EditorConfig
Сначала создайте .editorconfig файл в корне app/ папку, и в этом файле вставьте код ниже:
# EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100
Так что же такое EditorConfig?
Так что не все будут использовать VS Code - и вы не можете его применять, и не должны. Чтобы все были на одной странице с точки зрения значений по умолчанию, таких как tab space или line ending должно быть, мы используем .editorconfig. Это на самом деле помогает применять некоторые определенные наборы правил.
Вот список всех редакторов, которые поддерживают EditorConfig. Список редакторов включает в себя веб-шторм, код приложения, Atom, затмение, emacs, bbedit и многие другие.
Вышеуказанная конфигурация сделает следующее:
- обрезать замыкающие пробелы из .md & .js файлы
- установить стиль отступа на space вместо tab
- размер отступа от 2
- конец строки будет lf что все, независимо от их ОС, имеют один и тот же конец строки.
- в конце файла должна быть новая строка
- и максимальная длина строки должна быть 100 символов
Со всей этой конфигурацией, сделанной и на месте, вы теперь готовы. Если вы хотите увидеть исходный код, вот он.
Также приветствуются запросы на извлечение, если вы чувствуете, что можете улучшить что-либо в этом хранилище.