Автоматически форматируя все ваши файлы .html, .css и .js каждый раз, когда вы их сохраняете или фиксируете.
… потому что форматирование кода вручную в 2018 году уже устарело. Вы все еще могли бы это сделать, но почему? ;) Машина будет шустрее и лучше.
Если быть более конкретным, если ваши файлы автоматически форматируются с помощью инструментов IDE или CLI, вы получаете значительные преимущества:
- Ваша кодовая база написана в едином стиле, независимо от того, сколько разработчиков над ней сотрудничает.
- Половина вашего руководства по стилю кода больше не нужна. Зачем изучать табуляции и пробелы, если оно все равно будет автоматически переформатировано? Оставьте стиль кода роботам. Вместо этого сосредоточьтесь на коде.
- Вы будете писать код быстрее. Помните те времена, когда вам приходилось вводить новую строку каждый раз, когда вы хотели вызвать другой метод? Или вам пришлось 10 секунд задумываться о том, хранить ли массив в одну строку или в несколько строк? Забудьте об этом сейчас. IDE сделает это за вас. Чем меньше нажатий клавиш вам понадобится для написания кода, тем больше вы сможете его написать.
- При проверке кода вы можете сосредоточиться на коде, а не на стиле. Избегайте редко эффективных и совершенно неинтересных дискуссий типа «Я думаю, нам следует использовать здесь дополнительные скобки. Сейчас это слишком нечитабельно. ». Наслаждайтесь тем, что у вас есть больше времени и энергии, и, просматривая PR, сосредоточьтесь на самом важном в них: их представленном коде и его логике.
- В целом, это улучшит вашу кодовую базу и поможет избежать ошибок. Потому что, даже если это означает просто наведение порядка в ваших местах, это также означает следующее: ваш код будет намного яснее, и у вас будет больше времени, чтобы сосредоточиться на своем коде, а не на чем-то еще.
Кроме того, настройка всего этого для всей вашей кодовой базы займет у вас от 5 до 15 минут. Почему бы не попробовать?
Как это сделать?
По сути:
- выберите свой форматтер (например, Prettier) и настройте для него общую конфигурацию,
2. сконфигурируйте вашу IDE так, чтобы она автоматически форматировала ваш код каждый раз, когда вы сохраняете файл,
3. (необязательно) отформатируйте существующую кодовую базу, выполнив одну команду CLI,
4. (необязательно) настройте перехватчики git precommit, чтобы нельзя было отправить плохо отформатированный код,
5. (необязательно) настройте перехватчики CI, чтобы он не сработал, если кому-то удастся отправить плохо отформатированный код.
Вот и все! Если вы выполните все вышеперечисленные шаги, ваш код навсегда останется чистым и читабельным.
Чтобы помочь вам с каждым из шагов, я решил разбить каждый из них и описать его на нашем собственном примере, где нам удалось настроить Prettier и HTML Beautifier для всех наших файлов вместе с git и хуками CI.
Шаг 1. Выберите средства форматирования
Многие из текущих IDE уже имеют встроенное автоматическое форматирование (VSCode, Atom, WebStorm). Проблема в том, что очень часто каждый из них имеет свою собственную реализацию и конфигурацию форматера. Если вы не единственный разработчик в своей компании или не работаете с одними и теми же конфигурациями IDE, вам нужно стандартизировать их.
Когда дело доходит до веб-разработки, большинство людей сейчас используют Prettier. Он давно стабилен и имеет прочную поддержку языковых синтаксисов, таких как JS, JSX, TypeScript, JSON, CSS, LESS, SCSS, GraphQL (с большим количеством языков, таких как SQL, Java, PHP, Python, Ruby).
Prettier также поддерживает HTML, но сейчас его поддержка является экспериментальной. Если вы используете такие фреймворки, как Vue или Angular, возможно, вы захотите переключиться на что-нибудь другое. К счастью, есть js-beautify, который без проблем обрабатывает эти альтернативные синтаксисы HTML. (Он также может форматировать JS и CSS, но я предпочитаю способ Prettier, IMO он немного лучше справляется с этим синтаксисом.)
По этим причинам мы решили пойти с ними обоими. Мы используем prettier для всех наших файлов .js, .ts, .css и .less, а js-beautify - для файлов .html Angular.
Шаг 2. Настройте форматеры
Многие люди могут просто использовать настройки по умолчанию, если их не слишком заботит стиль кода.
Однако для нас это было не так. У нас уже был собственный стиль кода. Мы не хотели его менять, так как многие разработчики к этому уже привыкли. Мы действительно хотели, чтобы внедрение средств автоматического форматирования кода не изменило наш существующий стиль написания кода. К счастью, это не было проблемой - и prettier, и js-beautify можно легко настроить, поместив простой .prettierrc или .jsbeautifyrc в каталог вашего проекта.
Например, вот что мы используем:
# ./.jsbeautifyrc
{
"html": {
"brace_style": "collapse",
"indent_char": " ",
"indent_scripts": "normal",
"indent_size": 2,
"wrap_indent": 8,
"wrap_line_length": 80,
"max_preserve_newlines": 1,
"preserve_newlines": true,
"unformatted": ["a", "sub", "sup", "b", "i", "u"]
}
}
# ./.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "avoid"
}
# ./.prettierignore
dist
vendor
utils/scaffolds
Шаг 3. Настройте команду, чтобы сразу переформатировать всю кодовую базу
Во-первых, мы хотели отформатировать всю существующую кодовую базу. Если честно, в большинстве случаев он был плохо отформатирован.
Форматировать его с помощью интерфейса командной строки должно быть так же просто, как запустить npm run format. Было бы полезно иметь эту единственную команду, которая позволяет вам форматировать все ваши файлы сразу, например. после того, как вы скопируете или отредактируете сразу несколько файлов. (Хотя позже мы настроим некоторые перехватчики CI & git precommit, так что, к счастью, нам все равно не придется этого делать.)
Конфигурация может немного отличаться в вашем проекте, в зависимости от того, как у вас настроены пути, но вот как мы сделали это в нашем репо:
npm install --save-dev prettier js-beautify
# ./bin/glob-ls.js
// A small helper that will list all files using `glob` lib
// Usage: `node bin/glob-ls.js 'src/**/*.js'`
const glob = require('glob');
const patterns = process.argv.slice(2);
patterns.forEach(pattern => {
glob(pattern, {}, function(err, files) {
if (err) throw err;
process.stdout.write(files.join('\n') + '\n');
});
});
# ./package.json
{
"scripts": {
"format": "npm run format:prettier && npm run format:html",
"format:prettier": "node_modules/.bin/prettier --config .prettierrc \"src/**/*.{ts,css,less,js}\" --write",
"format:html": "node bin/glob-ls.js 'src/**/*.html' 'build/**/*.html.ejs' | xargs node_modules/.bin/html-beautify -r"
}
}
Вуаля. Теперь приведение в порядок нашего кода - это всего лишь npm run format && git add . && git commit -m 'Reformat all the files'. ;)
Шаг 4. Настройте IDE, чтобы файлы форматировались автоматически.
Теперь у нас чистый код. Но мы же не хотим, чтобы он снова стал уродливым, верно?
Давайте настроим наш редактор кода так, чтобы он автоматически форматировал наш файл каждый раз, когда мы его сохраняем. Благодаря этому нам не нужно беспокоиться о выполнении каких-либо команд интерфейса командной строки.
Способ его настройки будет зависеть от вашей IDE, но в большинстве случаев достаточно просто установить плагин. У Prettier он есть для большинства редакторов, используемых в настоящее время.
Однако это может стать более сложным, если вы используете несколько программ форматирования в одном проекте. Например, поскольку prettier и js-beautify могут форматировать одни и те же файлы, уверяю вас, они будут мешать друг другу. Но заставить их работать вместе - не большая проблема.
Например, мы настроили наши IDE так, что более красивое форматирование только файлов js и css, а js-beautify только файлы html; все они делают это автоматически после сохранения. Мы сделали это для всех VS Code, Atom, WebStorm и VIM. См. Эту суть, если вы хотите увидеть точные инструкции, как это сделать.
Шаг 5. Добавьте ловушку CI, чтобы проверить, правильно ли отформатирован код
Хорошо, у нас есть средства форматирования кода, и, похоже, мы также настроили его в нашей среде IDE, но что, если кто-то злой и случайно каким-то образом фиксирует плохо отформатированный код? Случаются аварии, иногда код может сбиться во время слияния git или новый разработчик мог неправильно настроить свою IDE.
Позвольте этому случаться слишком часто, ничего не предпринимая, и вы закончите тем, что ваша база кода снова будет плохо отформатирована.
Таким образом, мы добавили команду npm run format:test в наш поток CI, которая проверяет наш код всякий раз, когда что-либо новое фиксируется в репозитории git. Благодаря этому, даже если кто-то зафиксирует плохой код в нашем репо, его сборка в конечном итоге станет красной в CI, заставляя его (или кого-то еще) рано или поздно исправить формат кода.
# ./package.json
{
"scripts": {
"format-test": "npm run format-test:prettier && npm run format-test:html",
"format-test:prettier": "node_modules/.bin/prettier --config .prettierrc \"src/**/*.{ts,css,less,js}\" -l"
"format-test:html": "node bin/glob-ls.js 'src/**/*.html' 'build/**/*.html.ejs' | xargs node bin/html-beautify-check.js",
}
}
# ./bin/html-beautify-check.js
# a custom script, that formats the file(s) with html-beautify,
# but instead of changing it, it only errors with 0/1 if it needs to be changed
APPDIR=$(realpath $(dirname $(dirname $0)))
TMPDIR=$(mktemp -d)
cd $APPDIR
for line in $*; do
filepath=$(realpath $line)
file=${filepath/$APPDIR\//}
mkdir -p $TMPDIR/$(dirname $file)
cp $APPDIR/$file $TMPDIR/$file
done
message=$(find $TMPDIR -type f | xargs node_modules/.bin/html-beautify -r | grep -v unchanged || true)
if [[ $message ]]; then
echo "$message" | sed "s#$TMPDIR##g" | sed "s#\.\.\/##g"
rm -rf $TMPDIR
exit 1
fi
rm -rf $TMPDIR
Шаг 6. Добавьте хук git precommit, чтобы проверить, правильно ли отформатирован код
Последнее, но не менее важное улучшение. Вы могли бы сказать: «Значит, вы откажетесь от моего супер-важного пиара только потому, что в нем на 1 место слишком много, даже если код работает идеально?» Вы с ума сошли? ».
Что ж, я уже упоминал причины, по которым для меня важно правильное форматирование кода. Но я также ненавижу CI, которая слишком часто терпит неудачу по глупым причинам, которых можно было бы легко избежать.
Итак, давайте добавим ловушку git precommit, которая будет проверять форматирование вашего кода каждый раз, когда вы пытаетесь что-либо зафиксировать. Он будет работать полностью в фоновом режиме всякий раз, когда вы выполняете git commit, git rebase, git merge или любые другие действия, которые приводят к добавлению / изменению фиксации.
К счастью, кто-то другой уже проделал за нас тяжелую работу. Husky - это классная библиотека для npm, которая позволяет легко добавить команду в любой из обработчиков фиксации git. Lint-staged - это классная библиотека npm, которая позволяет вам запускать команду только для файлов, которые в настоящее время локально размещены в git.
Конфигурация:
npm install --save-dev lint-staged husky@next
# ./package.json
{
"husky": {
"hooks": {
"pre-commit": "node_modules/.bin/lint-staged"
}
},
"lint-staged": {
"src/**/*.html": [
"bin/html-beautify-check"
],
"build/templates/**/*.html.ejs": [
"bin/html-beautify-check"
],
"src/**/*.{ts,css,less,js}": [
"prettier --config .prettierrc -l"
]
}
}
Теперь, когда я что-то фиксирую, я вижу в консоли что-то вроде этого:
Круто, не правда ли?
TL;DR:
- Отформатируйте свой код. Используйте для этого роботов, а не людей.
- Это займет всего несколько минут, чтобы сделать это автоматически.
- Не забудьте также настроить перехватчики CI и git precommit, чтобы код всегда оставался правильно отформатированным.
P.S. Прием на работу! Если вы ищете работу в сфере Elixir / TypeScript, желательно в Познани, Польша, ознакомьтесь с нашими карьерными возможностями. Мы могли бы быть идеальной парой для вас.
