Инструменты статического анализа кода

• ESLint
• Prettier
• TypeScript
• Вывод

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

Ты наверняка слышал о ESLint, Prettier и TypeScript. Это инструменты статического анализа кода, которые очень популярны в экосистеме JavaScript. Давай рассмотрим каждый:

ESLint

ESLint - это подключаемая утилита линтинга для JavaScript. Линтинг - это процесс анализа кода на предмет потенциальных ошибок без фактического запуска кода. Рассмотрим код:

if (!"serviceWorker" in navigator) {
  // the user's using an old browser :-(
}

Заметил проблему? Отлично! Но, хорошо ведь было бы не тратить своё ценное время для поиска и исправления таких мелких ошибок? Дай возможность компьютеру выполнять за тебя большую часть работы 😉

Подробнее о ESLint здесь

Prettier

Prettier - это средство форматирования кода JavaScript. Prettier возьмет твой код, как бы ты его ни писал, и переформатирует так, чтобы каждый раз он был последовательным и разборчивым. Prettier иногда называют средством тестирования, посмотри:

const a = false;
const b = false;
const c = true;
const d = a && b || c;

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

Запусти этот код через Prettier, и получишь:

const a = false;
const b = false;
const c = true;
const d = (a && b) || c;

Даже если ты знаешь порядок операций, то дополнительные круглые скобки, которые Prettier автоматически добавляет при сохранении файла, весьма полезны. В том случае, если ты поймешь, что это не то, что ты хотел - можешь сам добавить круглые скобки, и Prettier оставит всё следующим образом (const d = a && (b || c)).

Это лишь один из примеров того, как Prettier делает код более очевидным - освобождая твой мозг для сосредоточения на более сложных проблемах.

TypeScript

TypeScript - это средство проверки статического типа для JavaScript. Средство проверки статического типа добавляет в JavaScript синтаксис, позволяющий указать тип данных переменной. Он может следить за этой переменной через код, чтобы убедиться, что она используется правильно.

Ты можешь найти ошибку в этом коде?

function getFullName(user) {
  const {
    name: { first, last },
  } = user;

  return [first, last].filter(Boolean).join(" ");
}
getFullName({ first: "Alex", last: "Myzgin" });

Может, получится, а может и нет. В любом случае, ведь было бы здорово, если б у нас было какое-то программное обеспечение, которое могло бы определить проблему для нас? Давай перепишем эту функцию на TypeScript:

type User = {
  name: {
    first: string,
    last: string,
  },
};

function getFullName(user: User): string {
  const {
    name: { first, last },
  } = user;

  return [first, last].filter(Boolean).join(" ");
}

Теперь, если мы вызовем функцию как раньше, вот что получим:

Argument of type '{ first: string; last: string; }' is not assignable to parameter of type 'User'.
  Object literal may only specify known properties, and 'first' does not exist in type 'User'.(2345)

Мне нравится рассматривать определения типов в TypeScript как форму встроенных автоматических тестов. Я настоятельно рекомендую тебе их попробовать, если ты еще этого не сделал. С этими инструментами возможно постепенное внедрение (особенно если ты уже используешь babel, можешь просто начать использовать babel-preset-typescript).

Подробнее о TypeScript здесь

Вывод

Статический анализ кода - отличный способ добиться значительного повышения уверенности: быстро, легко и с меньшими усилиями, чем при написании модульных тестов для всей кодовой базы. Если ты ещё не используешь данные инструменты, начни прямо сейчас!