Автор оригинала: FreeCodeCamp Community Member.
Одна из самых больших задач в разработке программного обеспечения – это время. Это то, что мы не можем легко получить больше, но протягивание может помочь нам максимально выходить из того, что у нас есть.
Так что же увлекается?
Lint или Линтер , это инструмент, который анализирует исходный код на флаг программирования ошибок, ошибок, стилистических ошибок и подозрительных конструкций. https://en.wikipedia.org/wiki/lint(software)
Проще говоря, Linter – это инструмент, который программно сканирует ваш код с целью поиска проблем, которые могут привести к ошибкам или несоответствиям с помощью кода здоровья и стилем. Некоторые могут даже помочь исправить их для вас!
Принять, например, следующий пример:
const test = 'I am a test';
console.log(`Test: ${test}`);
const test = 'Another one.';Мы объявляем постоянную Тест дважды, какой наш двигатель JavaScript не будет рад. С помощью соответствующих настроек Linter и настроек просмотра, а не попасть впустую позже в качестве ошибки, когда код работает, вы сразу же получите ошибку через ваш Linter работает на заднем плане:
10:9 error Parsing error: Identifier 'test' has already been declared
8 | const test = 'I am a test';
9 | console.log(`Test: ${2}`);
> 10 | const test = 'Another one.';
| ^Может быть, довольно очевидно, что у вас есть 2 того же Const Декларации, приведенные это всего 3 строки, но в более сложном приложении это может спасти тонн времени, необходимость охоты на гвоздику, которая не всегда очевидна.
С чем все могут помочь?
Много вещей , в том числе, но не ограничиваются:
- Промежуток ошибок в вашем коде из синтаксических ошибок
- Давая вам предупреждения, когда код не может быть интуитивным
- Предоставление предложений для общих лучших практик
- Отслеживать Todo’s и Fixme’s
- Сохранение последовательного стиля кода
Большинство вещей, которые вы можете думать, наверное, уже уже существуют в одной форме или другой И если нет, вы можете даже Создать пользовательские правила Это соответствует вашим потребностям!
Как это на самом деле помогает или почему я должен заботиться?
Вероятно, самая большая надлежащая тема списка выше – это тот факт, что эти проблемы будут немедленно вызваться. Эти проблемы не будут подсказкиваться на вас в середине запуска вашего приложения или дать кому-то беспокойство во время обзора кода. Вам больше не будет вы и ваш рецензент бесконечно сразитесь с пассивным агрессивно через комментарии о том, включают в себя запястье в конце операторов JS ( вы должны ?).
Все эти моменты, которые останавливают вас от продуктивности из-за глупых синтаксических ошибок или микро-взаимодействия, которые вы и ваши товарищи по команде имеют во время обзора. Они складываются и в конечном итоге забирают время, которое вы можете потратить за помощью еще одной ошибки или разработки следующей большой особенности вашего продукта.
Так как на самом деле на самом деле начать?
Несмотря на то, что есть линта для большинства, если не все, другие основные языки, с целью этого поста, я собираюсь сосредоточиться на JavaScript. Те же принципы применяются, но инструмент может быть немного другой.
Я собираюсь пробежать, как вы можете настроить для базового прицела в приложении React. Вы можете легко следовать, закрутив свое собственное приложение raction или используя мой GATSBY Стартер: https://github.com/colbyfayock/gatsby-starter-sass#starting-from-scriatch.
Ваш Линтер
Чтобы начать, нам сначала нужна ли Линтер. Вероятно, самый популярный В мире JavaScript это Eslint Отказ Ваш линтер на самом деле будет двигателем для определения правил и распределяет ваши файлы для тестирования. Eslint доступен как Пакет NPM сам по себе и После установки , из коробки Это позволяет настроить базовый файл конфигурации и нажмите на землю, работающий с некоторыми инструментами командной строки.
Давайте сначала добавим нашу зависимость Eslint:
yarn add eslint -D
Мы устанавливаем это как DevDependency (Следовательно, -D Флаг), потому что это не то, что наше приложение необходимо запустить. После того, как он успешно установлен, давайте добавим его на наш Package.json как скрипт:
...
"scripts": {
...
"lint": "eslint . --ext .js"
...
},
...В приведенном выше мы работаем наш Linter на весь каталог проекта в любом файле, который имеет расширение .js Отказ Если вы работаете с большим проектом со многими типами файлов, может быть, даже некоторые вы не хотите линт, вы можете изменить этот флаг или быть более конкретным с другими вариантами.
Чтобы поддержать ESLINT, нам нужно сделать еще одну вещь. Давайте добавим файл в корне нашего проекта (вероятно, где ваш Package.json ) называется .eslintrc.js И сделать содержимое файла просто:
module.exports = {};Как только вы будете готовы, вы можете запустить пряжа линта и … получить ошибку.
Это нормально, и ожидается в нашем проекте, поэтому давайте будем двигаться дальше.
Ваш парсер
Общий инструмент в цепочке для разработчиков JavaScript – Бабел , что позволяет писать код с функциями, которые могут не поддерживаться во всех браузерах, таких как использование Функции стрелки , которые доступны в ES6 и другие конвенции, такие как импортные файлы через Импорт Отказ
Код, который вы пишете, могут уже запустить Babel, чтобы работать в браузере, но это не относится к ESLINT по умолчанию, поэтому ESLINT позволяет вам указать анализатор, который позволяет обработать обработку, чтобы посмотреть на тот же код, что и ваш браузер. В этом случае мы захочем использовать Eslint babel Парсер, который сделан для нас.
Чтобы установить это, мы захочем сначала установить нашу зависимость:
yarn add babel-eslint -D
Как правило, если вы используете Babel-Eslint Вы захотите убедиться, что Бабел Установлен рядом с ним, но в нашем случае GATSBY уже использует Бабел Поэтому мы не обязательно должны добавлять его. После того, как это настроено, мы захочем обновить наши .eslintrc.js Конфигурация файла с некоторыми новыми опциями:
module.exports = {
"env": {
"browser": true,
"node": true,
"es6": true
},
"parser": "babel-eslint"
};Здесь мы позволяем Eslint знать, что наша среда будет работать в узле (преобразование GATSBY), внутри браузера (приложение), и он будет использовать ES6. Это помогает eslint знать, как запустить код. Кроме того, мы хотим настроить наш парсер Babel-Eslint Отказ
Как только мы будем готовы к работе, беги пряжа линта Опять и … ну ничего не произошло.
Это все еще ожидается, так как у нас нет никаких правил, настроенных!
Плагины для вашего кода
Написание Реагировать приложение? Парсер Babel может помочь вам преобразовать ваш код, но у вас может быть трудно быть продуктивным, так как Eslint должен понимать, как он должен работать, чтобы пересечь ваши файлы React.
Часть красоты Eslint в том, что она позволяет вам Настроить плагины У этого есть возможность создавать и устанавливать правила для вас. К счастью, наряду с нашим парсером Babel выше, который делает некоторые из тяжелых лифтингов, у нас есть React Plugin Доступно, что делает только это и заботится о перевязке JSX для нас.
Давайте сначала установим нашу зависимость:
yarn add eslint-plugin-react -D
Далее давайте обновим наше .eslintrc.js файл еще раз:
module.exports = {
"settings": {
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"plugins": [
"react"
],
"parser": "babel-eslint"
};То, что мы добавляем здесь, – это настройка, которая автоматически определяет, что используемая вами версия RACT, которую вы используете, что полезно для того, чтобы ваша подвижна проанализирована правильно, а затем настроить наш React Plugin, который мы установили выше.
В течение последнего последнего времени мы будем работать наше Lint Скрипт и ничего не получите:
Правила, определенные мнениями других
Если вы не уверены, куда начать или просто хотите быстро встать и работать, это рекомендуется, чтобы вы включить Собственные рекомендуемые правила Eslint Отказ Давайте добавим это на наш .eslintrc.js Конфигурация файла:
module.exports = {
"settings": {
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended"
],
"parser": "babel-eslint"
};И давайте запустим наш пряжа линта Отказ
Вуа! Это немедленно даст вам ошибки лота, похоже, что что-то не так.
Поскольку мы запускаем приложение React, мы также хотим убедиться, что наш Linter понимает правила, которые необходимо следовать, поэтому давайте также добавим наш React Plugin к .eslintrc.js Настройка конфигурации:
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],Теперь, если вы запустите пряжа линта Вы получаете что-то немного более логично.
Если вы следуете, похоже, что наше приложение стартера имело неуместное запястье и пропустить в нашем Пропорты Валидация для Layout.js Отказ Написание этого помогло мне исправить свое собственное репо! ?
Далее идут дальше, если те не подходят вашим потребностям, многие разработчики и команды опубликовали свои собственные конфигурации, которые Eslint позволяет легко подключить.
Некоторые популярные включают в себя:
Не доволен доступными вариантами? Вы даже можете создать и опубликовать свои собственные либо слой на верхней части других как отправной точкой или дайте ей с нуля.
Пусть это сделает работу (большинство из них)
Ты не думаешь, что я собираюсь заставить вас исправить все, что ты сам? Ну, вам, возможно, придется исправить некоторые, но постараюсь заставить Eslint исправить некоторые из них для нас.
Если вы заметили после того, как мы запустили команду выше, Eslint дал нам дополнительное сообщение:
Так что давайте попробуем! Давайте работать:
yarn lint --fix
И что вы знаете, теперь он только дает 1 обвигающую ошибку.
Оказывается Eslint, смогла автоматически исправить наш запрос с запятой, но мы все еще должны добавить PageName нашему Макет ‘s Пропорты вручную, не слишком много лифта.
Бег еще раз и, наконец, ничего нечего! Но на этот раз, потому что все выглядит хорошо.
Иди и напишите грязный код!
Шутя ? Хорошая новость здесь, теперь вы можете легко взглянуть на общее состояние здоровья вашей кодовой базы, а также, надеюсь, автоматически исправит больше всего. Это собирается сэкономить много головных болей, поскольку вы работаете с другими в вашей команде, и вообще, приятно иметь весь свой код аккуратно и аккуратно.
Этот пост только начинается. Eslint – широкая открытая книга с тоннами плагинов и правил, и это не единственный подвижный инструмент в игре. Играйте и найдите, что подходит для вас, и ваша команда. Немного времени, проведенное настроить его в ваше приложение, сэкономит вам больше времени в долгосрочной перспективе.
Другие подвижные инструменты для проверки
- Jshint : альтернатива Eslint
- Стилелинт : Инструмент извинения для CSS и CSS-подобных синтаксисах, таких как Сасс
- Удивительный эсвет : Простой список потрясающих конфиг, парсеров, плагинов и других инструментов для повышения вашей игры Eslint
- WebHint : подвижный инструмент для доступности, скорости и дополнительных лучших практик сайта
- A11Y JSX Plugin : Плагин ESLINT для проверки правил доступности на элементах JSX
Изначально опубликовано в https://www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time