redux-course-ru-v2
Search…
ESLint и Prettier
Кратко о библиотеках:
ESLint
Линтер - это помощник по части "здоровья" кода. Вы определяете список правил и в дальнейшем, при настроенном плагине в вашем редакторе, он как Microsoft Word "проферка орфографии" проверяет все, что вы написали.
Например, определили переменную, но нигде не используете? Сработает правило: no-unused-vars (долой неиспользуемые переменные) и переменная будет подчеркнута.
no-unused-vars-eslint
Когда вы видите "подчеркивание", и после наведения видите в скобочках название правила - не нужно бежать гуглить. Нужно идти на сайт eslint.org и там в "поиск" вставлять текст ошибки, будет быстрее.
eslint-org-rule-search
Prettier
Преттир - это помощник по части оформления кода. Можно писать с пробелами перед именем свойства, кавычками, запятыми в последней строке и тд тп - преттир, настроенный на сохранение или на пре-коммит хук - "перетрясет" ваши файлы и оформит их в соответствии с настройками, которых у него минимум. Это сделано специально, ибо чем меньше настроек, тем меньше конфигураций - когда-нибудь, спор "табы vs пробелы" уйдет в небытие, но кто выиграет?)
Одна из работ "преттира" - форматировать длинные строки.
Было:
too-long-string
Стало:
too-long-string-after-prettier
Я думаю преимущества очевидны, поэтому давайте настроим необходимые ускорители повседневной разработки.
Настройка
Линтер встроен в create-react-app, но для работы в связке с Prettier, а так же для подсветки кода во время написания в VS Code нужна небольшая донастройка.
Для начала установите пакеты:
1
npm install eslint-config-prettier eslint-plugin-prettier prettier lint-staged husky --save-dev
Copied!
- husky - упрощает работу с git hooks ("пре-коммит" (момент, когда вы собираетесь делать коммит) легко настроить с помощью этой "собаки")
- lint-staged - пакет, который позволяет вам сделать обработку командой из терминала только тех файлов, которые собираются улететь в коммит.
Husky и lint-staged - сладкая парочка для борьбы с плохим кодом в нашем репозитории. Например, мы можем настроить, что если ESLint вернул ошибку, то коммит будет автоматически отменен. Вернемся к этому позже.
Итак, настройка eslint, создайте следующий файл в корне проекта:
.eslintrc
1
{
2
"extends": [
3
"react-app",
4
"prettier"
5
],
6
"rules": {
7
"jsx-quotes": [
8
1,
9
"prefer-double"
10
]
11
},
12
"plugins": [
13
"prettier"
14
]
15
}
Copied!
Достаточно скромный конфиг, который "наследует" стандартные правила (их много) из react-app и prettier (это глобальные конфиги, один встроен в create-react-app, второй мы установили посредством пакета eslint-config-prettier)
Затем я переопределил одно правило: jsx-quotes (для имен классов внутри JSX будут ставиться двойные кавычки. Не могу сказать, насколько это важно на сегодняшний день, но раньше у меня были конфликты с преттиром без этого правила).
Вы можете переопределить в списке любые правила, которые вас интересуют. Список можно найти в документации, но проще просто начать работать и по ходу пьесы смотреть на "подчеркивания". Те, которые вас не устраивают - переопределяйте.
Последняя опция в конфиге - использование плагинов. Мы используем плагин prettier (пакет eslint-plugin-prettier), чтобы не было конфликтов между "помощниками" (напоминаю, у нас их два: prettier и eslint).
После настройки конфига, вам нужно настроить ваш редактор. Я приведу пример только для Visual Studio Code.
Добавьте в файл с настройками, следующие строки:
1
"editor.formatOnPaste": false,
2
"editor.formatOnSave": true,
3
"[javascript]": {
4
"editor.formatOnSave": true,
5
},
6
"[html]": {
7
"editor.formatOnSave": false,
8
},
9
"[json]": {
10
"editor.formatOnSave": false,
11
},
12
"eslint.autoFixOnSave": true,
13
"eslint.alwaysShowStatus": true,
Copied!
Мой список плагинов:
my-plugins
Конфиг может быть настроен различными способами, например, взгляните на эти два видео:
Настроим prettier (нам так же нужен конфигурационный файл):
.prettierrc
1
{
2
"useTabs": false, // использовать табы? нет (я за пробелы)
3
"printWidth": 80, // длина строки - 80
4
"tabWidth": 2, // длина "таба" - 2 пробела
5
"singleQuote": true, // использовать одинарные кавычки - да!
6
"trailingComma": "es5", // запятая в последней строке - да
7
"jsxBracketSameLine": false, // закрывающийся jsx в этой же строке
8
"parser": "flow", // парсер - flow (пока не важно)
9
"semi": false // точка с запятой - нет
10
}
Copied!
Вот и все настройки. Настройка - parser, вам пока не должна мешать, а что такое trailingComma - пример ниже:
1
const data = {
2
name: 'Max',
3
city: 'Moscow, // <-- traling comma ("висячая запятая")
4
}
Copied!
Почему так? Мне это нравится, так как если добавится новое свойство, в git difference (изменения в файле) будет только одна строка, вместо двух (в одной добавилась бы запятая, во второй - новое свойство).
На данный момент, если вы будете писать код, у вас уже будет отрабатывать eslint. Так же в момент сохранения, код будет преобразовываться с помощью prettier. Однако, нам еще не хватает настройки пре-коммит хука.
Представьте ситуацию: вы работает с коллегой. Он пишет в блокноте, у него нет никаких "преттиров". Следовательно, чтобы он не закоммитил код, который не отформатирован как вам нужно, мы настраиваем пре-коммит хук. Это значит, в момент коммита, весь
js/jsx/json код из директории src, который он "коммитит" будет преобразован преттиром, так же, как если бы он преобразовался при сохранении в вашем редакторе.package.json
1
{
2
"name": "redux-course-ru-v2",
3
"version": "0.1.0",
4
"private": true,
5
"dependencies": {
6
"react": "^16.4.1",
7
"react-dom": "^16.4.1",
8
"react-scripts": "1.1.4"
9
},
10
"scripts": {
11
"start": "react-scripts start",
12
"build": "react-scripts build",
13
"test": "react-scripts test --env=jsdom",
14
"eject": "react-scripts eject",
15
"precommit": "lint-staged"
16
},
17
"devDependencies": {
18
"eslint-config-prettier": "^2.9.0",
19
"eslint-plugin-prettier": "^2.6.2",
20
"husky": "^0.14.3",
21
"lint-staged": "^7.2.0",
22
"prettier": "^1.14.0"
23
},
24
"lint-staged": {
25
"*.{js, jsx}": [
26
"prettier --write",
27
"git add"
28
]
29
}
30
}
Copied!
В секции scripts добавилась команда precommit, и добавилось свойство lint-staged с настройками.
Теперь в момент коммита, в терминале будет похожая ситуация:
git-commit-husky
Резонный вопрос, у коллеги с блокнотом, у него и ESLint отсутствует же? Верно. Нужно усложнить ему жизнь и "обламывать" коммит, если в нем есть ошибки/предупреждения от ESLint.
Удалите
<TestComponent /> из отрисовки в <App />, но оставьте создание переменной.src/App.js
1
import React, { Component } from 'react'
2
import './App.css'
3
4
const TestComponent = () => <p>просто render</p>
5
6
class App extends Component {
7
render() {
8
return (
9
<div className="App">
10
<header className="App-header">
11
<h1 className="App-title">Welcome to React</h1>
12
</header>
13
<p className="App-intro">
14
To get started, edit <code>src/App.js</code> and save to reload.
15
</p>
16
</div>
17
)
18
}
19
}
20
21
export default App
Copied!
Выполните команду в терминале (находясь в директории с проектом):
1
node_modules/.bin/eslint src/
Copied!
eslint-warning-terminal
Так как я не люблю глобальные зависимости, я использую локально установленный eslint (его установил для нас create-react-app). Чтобы упростить вызов в терминале, можно добавить в секцию scripts в package.json новую команду:
package.json
1
...
2
"scripts": {
3
"start": "react-scripts start",
4
"build": "react-scripts build",
5
"test": "react-scripts test --env=jsdom",
6
"eject": "react-scripts eject",
7
"precommit": "lint-staged",
8
"eslint": "node_modules/.bin/eslint src/"
9
},
10
...
Copied!
Теперь eslint в терминале можно запускать так:
npm run eslint. После запуска этой команды, eslint проверит весь src/ на наличие ошибок/предупреждений. Это полезно сделать в начале внедрения "жесткого пре-коммита" и лично исправить все ошибки, чтобы команда научилась на хорошем примере.Вернемся к настройке. Изменим lint-stage скрипт в package.json на:
1
"lint-staged": {
2
"*.{js, jsx}": [
3
"node_modules/.bin/eslint --max-warnings=0",
4
"prettier --write",
5
"git add"
6
]
7
}
Copied!
Теперь в момент пре-коммита будет запускаться lint-staged проверка в которой eslint и prettier обработают все файлы, готовящиеся к коммиту.
Что интересно, я настроил еслинт агрессивно (опция
--max-warnings=0), то есть, даже любое предупреждение прервет коммит.Проверим:
eslint-fall-max-warnings-0
На скрине видно "вредный совет". Да, если добавить
--no-verify к команде git commit, то проверок не будет. Но за это сразу бейте по рукам.Итого: Настроили ESLint, prettier и pre-commit hook. Очень сильно облегчили жизнь себе и коллегам, кто болеет за единый стиль и чистый код.
Last modified 2yr ago