Инструменты для согласованного стиля кода JavaScript

Инструменты и методологии, которые помогут вам поддерживать последовательность в стиле вашего кода JavaScript.

видео

Предпочитайте смотреть видео, а не читать статью, проверьте это. Конечно, вам следует сделать и то, и другое!

Последовательность

Не всегда легко поддерживать единообразный стиль кода. Раньше это нужно было вручную контролировать с помощью проверок кода. Обеспечение соответствия всех файлов стандартам проекта может быть утомительным и напрасным занятием.

К счастью, есть несколько инструментов для автоматизации этих повторяющихся задач.

Bit.dev

Bit.dev - хаб облачных компонентов. Это место для публикации, документирования и систематизации компонентов JS. Это не валидатор стиля кода, но он определенно полезен для стандартизации стиля кода, так как значительно упрощает повторное использование кода.

Повторное использование кода в репозиториях и между ними необходимо для стандартизированного и понятного кода.

Красивее

Prettier - самый популярный модуль форматирования кода для приложений JavaScript. С Prettier нам больше не нужно беспокоиться о стиле кода, просто нажмите «Сохранить» и пусть Prettier справится с этим.

• Самоуверенный форматтер кода
• Поддерживает много языков
• Интегрируется с большинством редакторов
• Есть несколько вариантов

Установить Prettier

Установите расширение VSCode

Установите prettier NPM Package

npm install --save-dev prettier

Примечание. Кажется, есть незначительный конфликт между плагином Prettier и Prettier 2.0, который только что вышел. Я смог решить эту проблему, установив это правило в файле .prettierrc.yml.

arrowParens: always

ESLint

ESLint проанализирует наш код, чтобы предотвратить проблемы, прежде чем переходить к кодовой базе.

ESLint статически анализирует ваш код, чтобы быстро находить проблемы.

Многие проблемы, обнаруженные ESLint, можно исправить автоматически.

Установите расширение VSCode

Установите eslint NPM Package

npm install --save-dev eslint

Добавьте lint в package.json. Я также хотел бы добавить postlint, чтобы мы могли видеть положительные отзывы после его запуска.

{
  "scripts": {
    "lint": "eslint src",
    "postlint": "echo ✅ lint valid"
  }
}

Prettier + ESLint

Нам нужно сделать несколько дополнительных шагов, чтобы заставить эти два программного обеспечения хорошо работать вместе.

Установите eslint-plugin-prettier NPM Package.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

Создайте .eslintrc.yml, добавьте prettier плагин, расширите рекомендуемые параметры Prettier и ESLint и установите правила для более красивых на error.

plugins:
  - prettier
extends:
  - eslint:recommended
  - plugin:prettier/recommended
env:
  es6: true
  node: true
  browser: true
rules:
  prettier/prettier: error

VSCode

Возможно, вам потребуется перезапустить VSCode после внесения изменений в файл ESLint.

Если форматирование при сохранении отличается от заданного в правилах, перезапустите VSCode.

Возможно, вам потребуется включить форматирование при сохранении в VSCode.

Хаски

Husky - это охрана вашего репозитория, предотвращающая попадание плохого кода в вашу кодовую базу.

Установите пакет husky NPM

npm install --save-dev husky

Добавьте раздел husky в package.json.

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

Здесь мы подключаемся к крючку pre-commit. Этот хук будет запускаться перед каждым git commit, потенциально блокируя плохой код, прежде чем он сможет войти в репозиторий git.

Этот

Прочтите Документы Husky, чтобы узнать больше о других хуках, к которым вы можете подключиться.

Резюме

• Используйте Prettier для форматирования кода при сохранении.
• ESLint проанализирует вашу кодовую базу на предмет проблем.
• Husky будет запускать эти задачи перед каждой фиксацией.

Посетите мой Twitter, чтобы получить больше советов: @joelnet

Учить больше