Після кількох перших спроб кілька місяців тому я вирішив відмовитись від спроби мігрувати нашу кодову базу на Eslint 9 і новий плоский конфігураційний дизайн. Це здавалося простим проектом, але, як це зазвичай буває з інструментами JavaScript, це перетворилося на виснажливу проблему. Тому я залишив це до того часу, коли витратити цілий день на налаштування конфігурації монорепозиторію вже не здавалось би розкішшю або марною тратою часу.
Такий день настав, і після дуже довгого вечора, що супроводжувався гучним стуком по клавіатурі та криками до екрану, я з радістю повідомляю, що мені вдалося зробити це працюючим. І я справді бажаю, щоб ми просто припинили ускладнювати речі в ім'я того, щоб зробити їх "кращими" та "зручнішими".
Що я пробував у процесі:
Nx automigration команду
-
Eslint конфігураційний мігратор
Копіювання/вставка конфігурацій з ново створеного проекту Nx
-
Копіювання/вставка конфігурацій з нового створеного проекту Vue
Використання підходів, описаних у різних статтях на Medium
-
Написання конфігурацій з нуля
Після багатьох страждань і десятків набридливих проблем і незрозумілих повідомлень про помилки, я нарешті зібрав працюючий конфігураційний файл для Eslint з перевіркою типів.
Сподіваючись, що це заощадить ваш час і захистить вас від нервового зриву, я надаю вам конфігурацію, яка працює з межами Nx, бібліотеками Vue SFC та Prettier.
// ./eslint.base.config.cjs
// Ми будемо посилатись на цю базову конфігурацію в наших додатках та бібліотеках
const nx = require('@nx/eslint-plugin');
const vue = require('eslint-plugin-vue');
const vueTsEslint = require('@vue/eslint-config-typescript');
const skipFormatting = require('@vue/eslint-config-prettier/skip-formatting');
module.exports = [
{
ignores: ['**/eslint.config.cjs', '**/*.d.ts', '**/*.stories.ts', '**/*.stories.tsx'],
},
...nx.configs['flat/base'],
...nx.configs['flat/typescript'],
...nx.configs['flat/javascript'],
...vueTsEslint.defineConfig(
vue.configs['flat/essential'],
vueTsEslint.createConfig({
extends: ['recommendedTypeChecked'],
}),
{
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
rules: {
'@typescript-eslint/consistent-type-exports': 'error',
'@typescript-eslint/consistent-type-imports': 'error',
'vue/multi-word-component-names': 'off',
// інші зміни правил тут
},
}
),
{
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
rules: {
'@nx/enforce-module-boundaries': [
'error',
{
enforceBuildableLibDependency: true,
allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?js$'],
depConstraints: [
{
sourceTag: '*',
onlyDependOnLibsWithTags: ['*'],
},
],
},
],
},
},
skipFormatting,
];
// ./eslint.config.cjs
// Це конфігурація основного додатка
const base = require('./eslint.base.config.cjs');
module.exports = [
...base,
{
ignores: ['*', `!src/`],
},
{
languageOptions: {
parserOptions: {
parser: '@typescript-eslint/parser',
tsconfigRootDir: __dirname,
projectService: true,
},
},
},
];
// ./lib/ts-lib/eslint.config.cjs
// Це конфігурація базової бібліотеки типівcript, яка не потребує додаткової конфігурації
const baseConfig = require('../../eslint.base.config.cjs');
module.exports = [...baseConfig];
// ./lib/vue-lib/eslint.config.cjs
// Це конфігурація більш складної бібліотеки, яка потребує перевірки типів або має власну логіку
const baseConfig = require('../../eslint.base.config.cjs');
module.exports = [
...baseConfig,
{
ignores: ['**/dependency/*.js'],
},
{
languageOptions: {
parserOptions: {
parser: '@typescript-eslint/parser',
tsconfigRootDir: __dirname,
projectService: true,
},
},
},
{
rules: {
'@typescript-eslint/no-unnecessary-type-assertion': 'warn',
},
},
];
Перекладено з: [Migrating Vue Nx monorepo to Eslint flat config](https://javascript.plainenglish.io/migrating-vue-nx-monorepo-to-eslint-flat-config-75ac67a0df26)