Соотношение времени, затрачиваемого на чтение (код) и на запись, значительно превышает 10 к 1… (поэтому) облегчение чтения облегчает запись.

-Боб Мартин, Чистый код

Форматирование кода и соблюдение руководств по стилю может оказаться трудоемкой и кропотливой задачей. Я помню, когда я только начинал программировать, я подсчитывал, сколько раз я нажимал пробел, когда хотел сделать отступ на новой строке. И в конце каждой строки я проверял наличие точки с запятой и запятой. К счастью, те времена прошли. Я нашел два хорошо известных расширения, которые могут сканировать ваш код и преобразовывать его в очень разборчивый и привлекательный стиль.

ОБНОВЛЕНИЕ 11/11/2018: Пауло Рамос создал для этого отличный сценарий оболочки: https://github.com/paulolramos/eslint-prettier-airbnb-react

Красивее

Prettier - придирчивый редактор кода. Он поддерживает множество языков и интегрируется с большинством редакторов кода. Вы также можете установить свои предпочтения в опциях. Некоторые параметры включают ширину табуляции, конечные запятые, интервал скобок и т. Д.

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

ESLint

ESLint - это программа, которая просматривает ваш код и анализирует его на предмет возможных ошибок. Расширение легко настраивается, с набором встроенных опций для соответствия руководству по стилю вашей компании. Он может выделять ошибки при вводе текста в редакторе, а также отображать подробный список ошибок в консоли.

Сочетание Prettier с руководством по стилю ESLint + Airbnb

Мы настроим это так, чтобы Prettier был нашим основным расширением для форматирования кода (на основе правил ESLint, которые мы определяем). Наша цель будет заключаться в том, чтобы отключить все правила форматирования внутри ESLint, чтобы мы использовали его только для ошибок и вместо этого использовали Prettier форматирование всего нашего кода.

Я также хотел бы предисловие к тому, что на момент написания этой статьи (июнь 2018 г.) это не сработает, если вы установите библиотеки глобально. Чтобы это сработало, вам нужно будет установить ESLint и другие зависимости локально в свой проект (желательно в devDependencies).

Прежде чем мы начнем, вам нужно будет установить npm, а затем npx.

  1. Загрузите расширения ESLint и Prettier для VSCode.
  2. Установите в наш проект библиотеки ESLint и Prettier. В корневом каталоге вашего проекта вы захотите запустить: npm install -D eslint prettier
  3. Установите Airbnb config. Если вы используете npm 5+, вы можете запустить этот ярлык, чтобы установить конфигурацию и все ее зависимости: npx install-peerdeps --dev eslint-config-airbnb
  4. Установите eslint-config-prettier » (отключает форматирование для ESLint) и eslint-plugin-prettier (позволяет ESLint отображать ошибки форматирования при вводе текста) npm install -D eslint-config-prettier eslint-plugin-prettier
  5. Создайте .eslintrc.json файл в корневом каталоге вашего проекта:
{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

6. Создайте файл .prettierrc в корневом каталоге вашего проекта. Здесь вы настраиваете параметры форматирования. Я добавил несколько своих собственных предпочтений ниже, но я настоятельно рекомендую вам узнать больше о файле конфигурации Prettier

{
  "printWidth": 100,
  "singleQuote": true
}

7. Последний шаг - убедиться, что Prettier форматирует при сохранении. Вставьте "editor.formatOnSave": true в свои пользовательские настройки в VSCode.

Поздравляем, у вас получилось!

Вы смогли урегулировать противоречивые разногласия между ними, и теперь они лучшие друзья! Наш линтер позволит нам обнаруживать ошибки на раннем этапе, а наш форматер поможет нам поддерживать согласованность всей нашей кодовой базы. Когда оба этих расширения работают бок о бок, мы сможем создавать чистый и поддерживаемый код. Начальник поблагодарит вас, коллеги скажут вам спасибо, а сдержанный - Microsoft наверняка поблагодарит 🙃

Если у вас есть какие-либо рекомендации или советы, я хотел бы услышать больше! 👂

Также ознакомьтесь с моим предыдущим постом о Основные настройки для VSCode!