Опишу тут, как настроить eslint + prettier для монорепозитория на npm workspaces создаение которого я описывал в соответствующей заметке (Монорепозиторий на npm workspaces)
Устанавливаем необходимые пакеты
npx eslint --init # Предложит установить eslint (соглащаемся y)Далее предлагается несколько вариантов использования eslint'a - я выбрал этот:
❯ To check syntax, find problems, and enforce code styleДалее по аналогиии выбираем, где модульную систему, которую используем в своем проекте, фреймворк, используем ли Typescript и где именно будет запускаться код и другие важные штуки, в моем случае выбор таков:
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScriptДалее установщик предлагает установить необходимые пакеты - соглашаемся и выбираем свой пакетный менеджер - в моем случае npm
После этого нужно установить пакеты для TS и React:
npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript eslint-plugin-react-hooksДальше можно переходить к тюнингу конфигурационного файла
Конфигурационный файл
После манипуляций с конфигом у меня получился вот такой результат, который меня более чем устраивает.
// .eslintrc.js
/** @type {import('eslint').ESLint.ConfigData} config */
const config = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'standard-with-typescript',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true
},
tsconfigRootDir: ".",
project: [
'./tsconfig.json'
]
},
ignorePatterns: [
'node_modules',
'**/dist',
'.eslintrc.js',
],
plugins: [
'react',
'@typescript-eslint'
],
rules: {},
overrides: []
}
module.exports = config;
Добавляем скрипт для прогона линтов
Как вишенка на торте - добавим скрипт, запуск которого можно в дальнейшем настроить на прекоммит хук, добавляем в корневой package.json в секцию scripts следующее
"lint:fix": "eslint --fix ."
И проверяем npm run lint:fix
Решение проблем
Если eslint почему-то не работает, помогает разобраться запуск с опцией --debug - в этом случае вы увидите возможные проблемы в конфигурации, это чаще всего является корнем проблемы
npx eslint --debug --no-inline-config packages
Пример уже настроенного монорепозитория можно увидеть тут

