В этой статье мы научимся писать идеальный код. Код, который идеально отформатирован, без синтаксических или семантических ошибок. Впрочем, это ли не мечта? Да, действительно, теперь давайте посмотрим, как мы можем осуществить эту прекрасную мечту вместе, используя простую библиотеку javascript под названием Standard.js, также известную как Standard Style.

Зачем вам стандартный стиль?

Прежде чем мы углубимся в детали того, как мы можем использовать стандартный стиль, позвольте мне объяснить, почему мы должны его использовать! Некоторые из вас, возможно, уже используют комбинацию линтера и форматтера, например ESLint(линтер) и Prettier(форматтер), и, должно быть, задаются вопросом, стоит ли переходить вместо этого на Standard.js.

Линтер ловит ошибки. Он в основном ищет ошибки программиста в вашем коде.

JSLint был первым оригинальным линтером javascript, выпущенным в 2002 году. Затем JSHint, выпущенный в 2010 году, предлагал больше правил и дополнительные возможности настройки. Теперь то, что большинство людей использует, — это ESLint, который вышел в 2013 году, он имеет лучшую поддержку ES и дополнительные правила стиля, отвечающие тому, как должен выглядеть ваш код. Он также имеет хорошую поддержку плагинов, которые позволяют разработчикам создавать свои собственные правила, поэтому в настоящее время он широко популярен в технической индустрии в качестве линтера для javascript.

Итак, возвращаясь к тому, зачем вам нужен Standard Style. Просто это экономит ваше время!

Это руководство по стилю JavaScript, линтер и форматер — все в одном. Этот модуль экономит ваше (и других!) время тремя способами:

  • Без настройки. Самый простой способ обеспечить качество кода в вашем проекте. Никаких решений. Нет .eslintrc файлов для управления. Это просто работает.
  • Автоматическое форматирование кода. Просто запустите standard --fix и попрощайтесь с беспорядочным или непоследовательным кодом.
  • Раннее выявляйте проблемы со стилем и ошибки программиста. Сэкономьте драгоценное время проверки кода, устранив обмен мнениями между рецензентом и участником.

Источник: официальная документация по стандартному стилю JavaScript

Типы ошибок, которые может отловить StandardJS?

Давайте рассмотрим несколько примеров типов ошибок, которые StandardJS может быстро отловить.

Пример 1:

const processUserData = 
(username, age, firstname, lastname, email,    age, gender, phone, city) => { 
    console.log('accessing age: ', age); 
}

Пояснение:

Параметр ‘ age’ присутствует дважды, на второй позиции и на шестой позиции. Вероятно, это результат неудачной копипасты, или, возможно, новый разработчик просто пытался реорганизовать код. Для меня важно отметить здесь, что дублирование параметров в функции полностью разрешено в Javascript, если только вы не используете строгий режим. В строгом режиме интерпретатор javascript помечает это как ошибку. Чтобы обсудить, насколько это может быть обманчиво для вашего кода; когда у вас есть более одного параметра в функции с тем же именем, последнее вхождение этого параметра затмит первое вхождение. Например, в вышеупомянутом примере, когда мы пытаемся получить доступ к переменной ' age', мы собираемся получить значение последнего ' age'( на 6 месте). Теперь дело в том, что вы не обязательно будете знать, что в этом коде есть проблема, пока не потратите часы и часы на отладку всего фрагмента кода, потому что это не так просто.

Пример 2:

if ( user.preference = "mango" ) {
   //do something 
}

Объяснение. Это очень тонкая ошибка, но ее легко сделать, кроме того, она очень распространена. В условных операторах легко ошибиться при вводе оператора сравнения, такого как оператор строгого равенства (===)или оператор свободного равенства, также известный как оператор приведения типов (==), для оператора присваивания(=). Теперь этот оператор if всегда будет оцениваться как истинный, так как программист ошибочно присвоил значение 'mango' в поле 'preference' объекта 'user'. Теперь этот блок if будет выполняться всегда. Хотя человеческому глазу действительно трудно обнаружить такие концептуальные ошибки, тем не менее, линтеру очень легко их поймать.

Кто использует стандартный стиль JavaScript?

Почти все крупные игроки в индустрии высоких технологий используют эту библиотеку.

Установка

Установите библиотеку как зависимость от разработчиков.

npm install standard --save-dev

Использование стандарта

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

npx standard

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

npx standard --fix

Это заставит StandardJS автоматически исправить ваши проблемы с кодом. Все, что он не может решить, - это некоторая неоднозначная ошибка, которую необходимо исправить вручную.

Будьте достаточно умны, чтобы сделать это

Вы можете добавить стандартный стиль к тестовому сценарию в файле package.json. Теперь каждый раз, когда вы запускаете npm test перед сборкой кода, стандартные проверки работоспособности запускаются неявно и автоматически, и вам не придется вручную запускать какие-либо стандартные команды в командной строке каждый раз, когда вы вносите какие-либо изменения в код.

{ 
    "name": "your-package-name", 
    "devDependencies": { 
           "standard": "*" 
    }, 
    "scripts": { 
           "test": "standard && node your-test.js" 
    } 
}

Кроме того, вы можете выполнить поиск на рынке, чтобы найти доступные плагины для StandardJS, характерные для вашего редактора кода. Для получения дополнительной информации об этом, ознакомьтесь с Официальной документацией по стандартному стилю JavaScript.

Итак, вот и все об этой полезной библиотеке Javascript. Я надеюсь, что информация, представленная в этой статье, будет полезна для вас и поможет вам легко писать и поддерживать свой код.

Полезные ресурсы:

Первоначально опубликовано на https://www.theimmigrantprogrammers.com.