Узнайте, как улучшить качество кода с помощью двух мощных инструментов, таких как ESLint и Prettier.
вступление
В предыдущей статье мы показали, как интегрировать компонент React / TypeScript в Drupal 8. Но что, если мы хотим также Lint и отформатировать наш код?
Введите ESLint и Prettier.
ESLint
Как вы, возможно, уже знаете, ESLint — это линтер для кода Javascript, а точнее:
“ ESLint статически анализирует ваш код для быстрого поиска проблем.[…] Многие проблемы, обнаруженные ESLint, могут быть исправлены автоматически. Исправления ESLint учитывают синтаксис, поэтому вы не столкнетесь с ошибками, вызванными традиционными алгоритмами поиска и замены».
красивее
Prettier – это "уверенное средство форматирования кода" (так в оригинале), которое поможет нам убедиться, что наш код форматирует в соответствии со стандартными правилами, даже если с настраиваемыми параметрами.
В определение явно включено слово "утвержденный", потому что — даже в стандартах — есть варианты и предпочтения, поэтому мы можем тщательно выбирать, какие функции нам нужны в нашем коде ( точка с запятой в конце, одинарная или двойная кавычки, пробелы в скобках и т. д.), а затем убедитесь, что все, кто работает над проектом, будут создавать свой код соответствующим образом.
Требования
Итак, начнем с добавления необходимых пакетов в наш компонент.
Для Prettier:
Большинство из них говорят сами за себя, это в основном ESLint, Prettier, различные руководства по стилю и некоторые плагины, чтобы все они работали вместе с TypeScript.
Мы устанавливаем их как devDependencies (--save-dev), поскольку они нужны нам только при разработке нашего компонента, но мы не хотим, чтобы они включались в окончательную сборку.
Теперь пришло время создать файл .eslintrc.js и добавить в него некоторую конфигурацию.
Как видите, есть строка, которая ссылается на tsconfig.json, куда мы поместили конфигурацию для TypeScript (см. нашу предыдущую статью).
Наконец, мы должны указать нашему webpack включить загрузчики для ESLint, добавив следующие строки в файл webpack.config.js:
Это будет полный файл после этого:
Все очень даже сделано!
Еще одна необязательная вещь — настроить команду для нашей конфигурации npm для автоматического форматирования нашего кода, добавив новую строку в наш package.json в разделе scripts.
Теперь, когда мы запускаем команду $ npm run format, сценарий позаботится о просмотре и форматировании всех .ts и .tsx.
Последние мысли
Несмотря на то, что они не являются обязательными, очень часто используют такие инструменты, как ESLint и Prettier, в проектах Javascript. С одной стороны, они помогают нам поддерживать порядок и чистоту кода, с другой стороны, это хороший способ автоматически изучить стандарты кодирования и лучшие практики.
