Перейти к содержанию

Линтинг

Настройка линтера

В Solid существует сильное сообщество разработчиков, и некоторые из них создают инструменты, которые делают процесс разработки еще более удобным для других участников сообщества. Плагин eslint, который мы будем использовать, является одним из таких инструментов, созданных одним из членов нашего сообщества.

Eslint - это инструмент, который статически анализирует код Javascript и Typescript на предмет наличия проблем и предлагает разработчику быстрые решения, если таковые имеются. Подробнее об инструменте eslint можно узнать здесь [https://eslint.org/].

Теперь приступим к добавлению линтера в наш проект Solid.

Javascript

Шаг 1: Установите eslint и плагин eslint-plugin-solid, созданный участником нашего сообщества

1
2
3
> npm install --save-dev eslint eslint-plugin-solid
# or
> yarn add --dev eslint eslint-plugin-solid

Шаг 2: Инициализируйте eslint в основной папке вашего проекта

1
> npm init @eslint/config

После выполнения этой команды вам будет предложено ответить на несколько вопросов о вашем проекте. Убедитесь, что вы ответили на них соответствующим образом. На вопрос Использует ли ваш проект TypeScript ответьте нет, какой фреймворк использует ваш проект ответьте никакой, а на вопрос Где выполняется ваш код ответьте в браузере, поскольку Solid - это фреймворк для фронтенда.

Шаг 3: Настройте сгенерированный файл eslint для работы с кодом Solid. Добавьте приведенный ниже код в соответствующие поля файла .eslint.

1
2
3
4
5
6
{
  ...
  "plugins": ["solid"],
  "extends": ["eslint:recommended", "plugin:solid/recommended"]
  ...
}

Вот и все. Eslint должен быть настроен и работать для Solid.

Typescript

Шаг 1: Установите eslint и плагин eslint-plugin-solid, созданный участником нашего сообщества

1
2
3
> npm install --save-dev eslint eslint-plugin-solid
# or
> yarn add --dev eslint eslint-plugin-solid

Шаг 2: Инициализируйте eslint в основной папке вашего проекта

1
> npm init @eslint/config

После выполнения этой команды вам будет предложено ответить на несколько вопросов о вашем проекте. Убедитесь, что вы ответили на них соответствующим образом. На вопрос Использует ли ваш проект TypeScript ответьте да, какой фреймворк использует ваш проект ответьте никакой, а на вопрос Где выполняется ваш код ответьте браузер, поскольку Solid - это фреймворк для фронтенда.

Затем вам будет предложено установить несколько специфических для Typescript пакетов @typescript-eslint/eslint-plugin@latest и @typescript-eslint/parser@latest Ответьте "да" на это.

Шаг 3: Настройте сгенерированный файл eslint для работы с кодом Solid. Добавьте приведенный ниже код в соответствующие поля файла .eslint.

1
2
3
4
5
6
7
{
  ...
  "parser": "@typescript-eslint/parser", // if not already added
  "plugins": ["solid"],
  "extends": ["eslint:recommended", "plugin:solid/typescript"]
  ...
}

Вот и все. Eslint должен быть настроен на работу с Typescript и Solid.

Более подробную информацию о плагине eslint-plugin-solid можно найти на Github repo

Ссылки

Комментарии