refactor(configs)!: make configs more structured

Use a more "default" set-up, where every plugin is chained separately for clearer control. Also fixes persisting issues with react config, and adds stricter type checking for TS. BREAKING CHANGE: modifies eslint significantly and changes importing
GEWIS · Nov 13, 2024 · fe15410 · fe15410
1 parent 6c7064c
commit fe15410
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 35 deletions.
diff --git a/eslint.common.mjs b/eslint.common.mjs
@@ -2,20 +2,41 @@ import eslint from '@eslint/js';
 import tsEslint from 'typescript-eslint';
 import importPlugin from 'eslint-plugin-import';
 
-import {includeIgnoreFile} from "@eslint/compat";
-import path from "node:path";
+import {includeIgnoreFile} from '@eslint/compat';
+import path from 'node:path';
 
 export default [
-  includeIgnoreFile(path.resolve(".gitignore")),
+  includeIgnoreFile(path.resolve('.gitignore')),
   eslint.configs.recommended,
-  importPlugin.flatConfigs.recommended,
-  importPlugin.flatConfigs.typescript,
+  ...tsEslint.configs.recommendedTypeChecked,
   {
-    files: ['src/**/*.{js,ts,jsx,tsx,vue}'],
     languageOptions: {
-      ecmaVersion: 'latest'
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      }
+    }
+  },
+  // Default rules
+  {
+    files: ['src/**/*.{ts,tsx,mts,cts,vue}'],
+    rules: {
+      'max-len': ['warn', {code: 120}],
+      'semi': ['error', 'always'],
+      'object-curly-spacing': ['error', 'always'],
+      'linebreak-style': ['error', 'unix'],
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    }
+  },
+  // Plugin by plugin for better overview
+  // Import plugin configuration
+  {
+    files: ['src/**/*.{ts,tsx,mts,cts,vue}'],
+    plugins: {
+      import: importPlugin
     },
     settings: {
+      ...importPlugin.flatConfigs.typescript.settings,
       'import/resolver': {
         typescript: {
           project: './tsconfig.app.json'
@@ -26,21 +47,11 @@ export default [
       }
     },
     rules: {
+      ...importPlugin.flatConfigs.recommended.rules,
+      ...importPlugin.flatConfigs.typescript.rules,
+      'import/named': 'off',
       'import/order': ['warn'],
       'import/first': ['warn'],
-      // General JS/TS rules ported over
-      'max-len': ['warn', {code: 120}],
-      'semi': ['error', 'always'],
-      'object-curly-spacing': ['error', 'always'],
-      "linebreak-style": ["error", "unix"],
-      'no-console': ['warn', { allow: ['warn', 'error'] }],
     }
-  },
-  ...tsEslint.configs.recommended,
-  {
-    files: ['src/**/*.{ts,tsx,vue}'],
-    languageOptions: {
-      parser: tsEslint.parser
-    }
-  },
+  }
 ];
diff --git a/eslint.react.mjs b/eslint.react.mjs
@@ -2,22 +2,54 @@ import reactPlugin from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactA11y from 'eslint-plugin-jsx-a11y'
 
+import {fixupPluginRules} from '@eslint/compat';
+
 export default [
-  reactPlugin.configs.flat.recommended,
-  reactPlugin.configs.flat['jsx-runtime'],
-  reactA11y.flatConfigs.recommended,
+  // React plugin
   {
-    files: ['src/**/*.{jsx,tsx}'],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        },
+        jsxPragma: null,
+      }
+    },
     plugins: {
-      'react-hooks': reactHooks
+      "react": reactPlugin,
     },
     settings: {
       react: {
-        version: 'detect'
-      }
+        version: 'detect',
+      },
+    },
+  },
+  // Default rules
+  {
+    files: ['src/**/*.tsx'],
+    rules: {
+      ...reactPlugin.configs.flat.recommended.rules,
+      ...reactPlugin.configs.flat['jsx-runtime'].rules,
+    }
+  },
+  // A11y
+  {
+    files: ['src/**/*.tsx'],
+    plugins: {
+      'jsx-a11y': reactA11y
+    },
+    rules: {
+      ...reactA11y.flatConfigs.recommended.rules
+    }
+  },
+  // React hooks
+  {
+    files: ['src/**/*.tsx'],
+    plugins: {
+      'react-hooks': reactHooks,
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules
     },
   },
 ];
diff --git a/eslint.vue.mjs b/eslint.vue.mjs
@@ -5,14 +5,23 @@ import vueParser from 'vue-eslint-parser';
 export default [
   ...vuePlugin.configs['flat/recommended'],
   {
-    files: ['src/**/*.vue'],
     languageOptions: {
       parser: vueParser,
       parserOptions: {
         parser: tsEslint.parser
       }
     },
+    plugins: {
+      vue: vuePlugin,
+    }
+  },
+  // Default rules
+  {
+    files: ['src/**/*.vue'],
     rules: {
+      // Recommended rules
+      ...vuePlugin.configs['flat/recommended'].rules,
+      // Custom rules
       'vue/component-api-style': ['error', ['script-setup', 'composition']],
       'vue/block-lang': [
         'error',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@gewis/eslint-config",
-  "description": "ESLint configuration for GEWIS projects",
+  "name": "@gewis/js-configs",
+  "description": "JavaScript configurations for GEWIS projects",
   "main": "eslint.common.mjs",
   "version": "0.0.0",
   "packageManager": "yarn@4.5.1",
@@ -30,12 +30,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/GEWIS/eslint-config.git"
+    "url": "git+https://github.com/GEWIS/js-configs.git"
   },
   "author": "GEWIS",
   "license": "AGPL-3.0-or-later",
   "bugs": {
-    "url": "https://github.com/GEWIS/eslint-config/issues"
+    "url": "https://github.com/GEWIS/js-configs/issues"
   },
-  "homepage": "https://github.com/GEWIS/eslint-config#readme"
+  "homepage": "https://github.com/GEWIS/js-configs#readme"
 }