@aneuhold/eslint-config 1.2.0 → 1.3.0

package/README.md

@@ -18,14 +18,33 @@ Make sure to add the following settings to VSCode settings.json:
 
 ```json
 {
+  // Use prettier for all files that ESLint doesn't support
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  // Use ESLint for all file types that it supports (which still uses prettier behind the scenes)
+  "[typescript][javascript][javascriptreact][typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always",
+    "source.organizeImports": "explicit"
+  },
   "eslint.useFlatConfig": true,
   "eslint.run": "onSave",
   "eslint.format.enable": true,
-  // Extra setting below specifically for svelte
-  "eslint.validate": ["svelte"]
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+    // Add "svelte" here if using Svelte
+  ]
 }
 ```
 
+Then add a prettier file, such as the one in this repo [here](.prettierrc.js).
+
 ### Setup for `CommonJS`
 
 Add `eslint.config.js` like so:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aneuhold/eslint-config",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Main ESLint Configuration for personal projects",
   "main": "./src/ts-lib-config.js",
   "packageManager": "pnpm@10.15.0",
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@eslint/js": "^9.34.0",
+    "@next/eslint-plugin-next": "^15.5.2",
     "@stylistic/eslint-plugin-js": "^4.4.1",
     "@stylistic/eslint-plugin-ts": "^4.4.1",
     "@typescript-eslint/eslint-plugin": "^8.41.0",

package/src/angular-config.js

@@ -7,12 +7,12 @@ import tseslint from 'typescript-eslint';
 // Allows us to bring in the recommended rules for Angular projects from angular-eslint
 import angular from 'angular-eslint';
 
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import stylisticJs from '@stylistic/eslint-plugin-js';
+import stylisticTs from '@stylistic/eslint-plugin-ts';
 import eslintPluginImport from 'eslint-plugin-import';
 import eslintPluginJsdoc from 'eslint-plugin-jsdoc';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import eslintPluginUnusedImports from 'eslint-plugin-unused-imports';
-import stylisticJs from '@stylistic/eslint-plugin-js';
-import stylisticTs from '@stylistic/eslint-plugin-ts';
 
 // Export our config array, which is composed together thanks to the typed utility function from typescript-eslint
 export default tseslint.config(
@@ -122,8 +122,7 @@ export default tseslint.config(
         'warn',
         {
           alphabetize: {
-            order:
-              'asc' /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
+            order: 'asc' /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
             caseInsensitive: true /* ignore case. Options: [true, false] */
           },
           'newlines-between': 'never'

package/src/react-config.js

@@ -12,17 +12,17 @@ export default tseslint.config([
       js.configs.recommended,
       reactHooks.configs['recommended-latest'],
       reactRefresh.configs.vite,
-      eslintPluginPrettierRecommended
+      eslintPluginPrettierRecommended,
     ],
     languageOptions: {
       globals: globals.browser,
       parserOptions: {
-        sourceType: 'module'
-      }
+        sourceType: 'module',
+      },
     },
     rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }]
-    }
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
   },
   {
     files: ['**/*.{ts,tsx}'],
@@ -34,11 +34,11 @@ export default tseslint.config([
         sourceType: 'module',
         // "project" looks to be deprecated, so use "projectService" instead.
         // See https://typescript-eslint.io/getting-started/typed-linting
-        projectService: true
-      }
-    }
+        projectService: true,
+      },
+    },
   },
   {
-    ignores: ['.yarn', 'build', 'dist', 'node_modules', '**/.DS_Store']
-  }
+    ignores: ['.yarn', 'build', 'dist', 'node_modules', '**/.DS_Store'],
+  },
 ]);

package/src/react-next-config.js

@@ -0,0 +1,24 @@
+import nextPlugin from '@next/eslint-plugin-next';
+import tseslint from 'typescript-eslint';
+import reactConfig from './react-config.js';
+
+// Ya, this is kind of weird, but if you dig into the actual code in the next plugin, this is correct.
+const { flatConfig } = nextPlugin;
+
+export default tseslint.config(
+  ...reactConfig,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    extends: [flatConfig.recommended],
+    rules: {
+      // Allow export names that are used by Next.js in the app directory.
+      'react-refresh/only-export-components': [
+        'error',
+        { allowExportNames: ['metadata', 'links', 'headers', 'loader', 'action'] },
+      ],
+    },
+  },
+  {
+    // Any other override settings. e.g. for `files: ['**/*.test.*']`
+  }
+);

package/src/svelte-config.js

@@ -1,10 +1,10 @@
 import eslint from '@eslint/js';
+import jsdoc from 'eslint-plugin-jsdoc';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import eslintPluginSvelte from 'eslint-plugin-svelte';
 import globals from 'globals';
 import svelteParser from 'svelte-eslint-parser';
 import tseslint from 'typescript-eslint';
-import jsdoc from 'eslint-plugin-jsdoc';
 
 const defaultConfig = tseslint.config(
   {
@@ -111,13 +111,6 @@ export default tseslint.config(
     // other override settings. e.g. for `files: ['**/*.test.*']`
   },
   {
-    ignores: [
-      '.svelte-kit',
-      '.yarn',
-      'build',
-      'node_modules',
-      '**/.DS_Store',
-      'eslint.config.js'
-    ]
+    ignores: ['.svelte-kit', '.yarn', 'build', 'node_modules', '**/.DS_Store', 'eslint.config.js']
   } // overrides global ignores
 );

package/src/ts-lib-config.js

@@ -1,8 +1,8 @@
 import eslint from '@eslint/js';
+import jsdoc from 'eslint-plugin-jsdoc';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
-import jsdoc from 'eslint-plugin-jsdoc';
 
 const defaultConfig = tseslint.config(
   {
@@ -11,15 +11,15 @@ const defaultConfig = tseslint.config(
       eslint.configs.recommended,
       ...tseslint.configs.strictTypeChecked,
       jsdoc.configs['flat/recommended-typescript'],
-      eslintPluginPrettierRecommended
+      eslintPluginPrettierRecommended,
     ],
     languageOptions: {
       parser: tseslint.parser,
       parserOptions: {
         sourceType: 'module',
-        project: true
+        project: true,
       },
-      globals: { ...globals.node }
+      globals: { ...globals.node },
     },
     // Rules for js, and ts in ts files
     rules: {
@@ -38,18 +38,18 @@ const defaultConfig = tseslint.config(
         'error',
         {
           allowNumber: true,
-          allowBoolean: true
-        }
+          allowBoolean: true,
+        },
       ],
       // Turned off because it doesn't seem too helpful, and it likes to error
       // on things that seem to be just fine in generics.
-      '@typescript-eslint/no-unnecessary-type-parameters': 'off'
-    }
+      '@typescript-eslint/no-unnecessary-type-parameters': 'off',
+    },
   },
   {
     // disable type-aware linting on JS files
     files: ['**/*.js', '**/*.mjs'],
-    extends: [tseslint.configs.disableTypeChecked]
+    extends: [tseslint.configs.disableTypeChecked],
   }
 );
 
@@ -59,13 +59,6 @@ export default tseslint.config(
     // other override settings. e.g. for `files: ['**/*.test.*']`
   },
   {
-    ignores: [
-      '.yarn',
-      'build',
-      'lib',
-      'node_modules',
-      'eslint.config.js',
-      '**/.DS_Store'
-    ]
+    ignores: ['.yarn', 'build', 'lib', 'node_modules', 'eslint.config.js', '**/.DS_Store'],
   } // overrides global ignores
 );