Как настроить ESLint и Prettier в React приложении

год назад·1 мин. на чтение

Как быстро настроить ESLint и Prettier

Настройка ESLint и Prettier утомительный процесс. Я много раз сталкивался с этой проблемой. В интернете вы найдете много статей о настройке линтинга. Некоторые из них будут рабочими, некоторые нет, т.к. библиотеки линтинга меняются.

Что такое ESLint?

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

Что такое Prettier?

Prettier — это модуль форматирования кода, совместимый с большинством языков. Это экономит много времени. Он быстро делает отступ в нашем коде при сохранении (зависит от настроек VSCode/редактора). Чтобы включить форматирование кода при сохранении в VSCode, нужно перейти в File -> Preferences -> Settings. Далее в строке поиска настроек вставим Format On Save. В найденном поле ставим галочку.

Как заставить их работать вместе?

В ESLint также есть правила форматирования, которые могут конфликтовать с Prettier. Поэтому мы должны аккуратно их настроить (звучит сложно, но на деле это очень просто). Давайте начнём

Шаг 1

npm install eslint --save-dev

# или

yarn add eslint --dev

Шаг 2:

Создайте .eslintrc.json выполнив команду
npx eslint --init

# или

yarn run eslint --init

Шаг 3

В React 17.0.0 импорт react в файл необязателен. Чтобы исправить это, мы добавим правило в наш файл .eslintrc. Итак, откройте файл .eslintrc и добавьте эту строку "react/react-in-jsx-scope": "off" внутри rules.
  "rules": {
    "react/react-in-jsx-scope": "off"
  }

Шаг 4

Если вы используете jest, вы обнаружите, что eslint выдает нам ошибку, что test или expect не определены. Чтобы это исправить, нам нужно добавить "jest": true внутрь env.
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  }

Шаг 5

Теперь добавьте плагины eslint, чтобы он работал с react, и сделайте правильную конфигурацию для eslint и prettier, чтобы они не конфликтовали друг с другом. Установите:
npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev

# или 

yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev
eslint-config-prettier — отключает все правила, которые не нужны или могут конфликтовать с Prettier. eslint-plugin-prettier - Запускает Prettier как правило ESLint. После установки выше внесите изменения в файл .eslintrc.
 "extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:prettier/recommended"
]
Мы можем запустить Prettier отдельно, но мы хотим, чтобы eslint запустил его для нас, чтобы он не конфликтовал с правилами eslint.

Шаг 6

Создайте .prettierrc и вставьте приведенный ниже код
{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}
Теперь, eslint and prettier установлены и мы можем добавить скрипт в package.json.
"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
Это должно сработать, но прежде чем тестировать, лучше перезапустить VSCode.

Как подписаться на изменения LocalStorage

2 года назад·3 мин. на чтение

Нередко возникает необходимость подписаться на изменения значений в LocalStorage. В этой статье напишем универсальную реализацию, которая не будет привязана к определенному фреймворку.

Иногда есть необходимость подписываться на изменения значений в LocalStorage и быстро на них реагировать. В этой статье напишем универсальную реализацию на JavaScript, которая не будет привязана к определенному фреймворку. Нужно будет просто добавить необходимую прослойку. В React этой прослойкой будет являться кастомный хук, отвечающий за подписку/отписку на событие внутри useEffect. Реализация будет состоять из нескольких частей:
  1. Реализация шины событий
  2. Класс-обертка для работы с LocalStorage
  3. Прослушивание нативного события storage
  4. Добавление в React-компонент

Шина событий

Есть множество паттернов для реализации отправки и прослушивания изменений объектов. Возьмем за основу паттерн Pub/Sub (Издатель/Подписчик) и реализуем класс для шины событий.
// EventBus.js

class EventBus {
  constructor() {
    this.topics = {};
  }

  notify(key, value) {
    this.topics[key]?.forEach((cb) => {
      cb(value);
    });
  }

  subscribe(key, cb) {
    if (!this.topics[key]) {
      this.topics[key] = [];
    }
    this.topics[key].push(cb);
  }

  unsubscribe(key, cb) {
    this.topics = this.topics[key]?.filter((_cb) => _cb !== cb);
  }
}

Класс-обертка для работы с LocalStorage

Сервис для работы localStorage будет содержать экземпляр шины событий. При установке нового значения по ключу мы будем оповещать подписчиков этого ключа и сохранять значение в localStorage . При помощи метода subscribe можно будет подписаться на изменения значений по переданному ключу. Этот метод также возвращает функцию для отписки. Метод getItem просто отдает значение из localStorage по ключу. В нем при необходимости можно реализовать логику парсинга для чтения объектов из localStorage.
// LocalStorageService.js

class LocalStorageService {
  constructor() {
    this.eventBus = new EventBus();
  }

  getItem(key) {
    return window.localStorage.getItem(key);
  }

  setItem(key, value) {
    const oldValue = this.getItem(key, value);
    if (oldValue === value) return; // если значение не изменилось - ничего не делаем

    window.localStorage.setItem(key, value);
    this.eventBus.notify(key, value);
  }

  subscribe(key, cb) {
    this.eventBus.subscribe(key, cb);
    return () => this.eventBus.unsubscribe(key, cb);
  }
}

// экспортируем экземпляр класса
export const localStorageService = new LocalStorageService();

Прослушивание нативного события storage

Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками. Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга. StorageEvent наследуется от класса Event и имеет следующие поля:
const storageEvent = {
  key: "token",              // ключ, значение которого изменилось
  newValue: "token_value_b", // новое значение
  oldValue: "token_value_a", // старое значение
  storageArea {              // объект хранилища со всеми ключами и их значениями
    token: "token_value_a",
    user_settings: "",
    length: 2
  },
  url: "http://localhost:3001/" // url документа, ключ которого изменился
}
Добавим подписку на событие storage.

class LocalStorageService {
  constructor() {
    this.eventBus = new EventBus();

    this.handleStorage = this.handleStorage.bind(this);     // свяжем функцию с контекстом
    window.addEventListener('storage', this.handleStorage); // подпишемся на событие storage 
  }

  // добавим функцию для обработки события storage
  handleStorage(event) {
    this.eventBus.notify(event.key, event.newValue);
  }

  //…
}
Теперь если продублировать приложение в соседней вкладке и изменить токен, обновленный токен появится и на первой вкладке. Если изменить значение ключа в localStorage вручную через devtools, то обновленное значение также появится и в интерфейсе приложения.

Добавление в React-компонент

Добавим кастомный хук useLocalStorageKey, который будет принимать ключ, значение которого будет прослушивать.
// useLocalStorageKey.js

import { useEffect, useState } from 'react';
import { localStorageService } from './LocalStorageService';

export const useLocalStorageKey = (key) => {
  const [value, setValue] = useState(localStorageService.getItem(key));

  useEffect(() => {
    const onUpdate = (newValue) => {
      setValue(newValue);
    };

    // возвращаем функцию очистки
    return localStorageService.subscribe(key, onUpdate);
  }, [key]);

  // функция для изменений значения по переданному ключу
  const setLocalStorageValue = (value) => {
    localStorageService.setItem(key, value);
  };

  return [value, setLocalStorageValue];
};
И добавим вызов хука в компонент. Две кнопки просто устанавливают разные значения токена.
import { useLocalStorageKey } from './useLocalStorageKey';

const KEY_TOKEN = 'token';

function App() {
  const [token, setToken] = useLocalStorageKey(KEY_TOKEN);

  const handleAddTokenAClick = () => {
    setToken('token_value_a');
  };

  const handleAddTokenBClick = () => {
    setToken('token_value_b');
  };

  return (
    <>
      <button type="button" onClick={handleAddTokenAClick}>
        Add token 'a'
      </button>

      <button type="button" onClick={handleAddTokenBClick}>
        Add token 'b'
      </button>

      <p>Token: {token}</p>
    </>
  );
}

export default App;
Исходный код