Merge pull request #139 from leukeleu/refactor-configs

Make separate config for each type of project

configs/javascript.js

@@ -1,14 +1,14 @@
+/**
+ * The configuration for basic JS files without the use of a framework.
+ * Just has the recommended eslint and prettier rules
+ **/
+
 module.exports = {
-  root: true,
   env: {
     browser: true,
     node: true,
   },
   extends: ['eslint:recommended', 'prettier'],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
   rules: {
     'no-undefined': 'error',
     'no-console': 'error',

configs/nuxt2.js

@@ -1,9 +1,46 @@
 module.exports = {
-  extends: ['plugin:nuxt/recommended', require.resolve('./vue2')],
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    // Standard JS rules
+    'eslint:recommended',
+    'prettier',
+
+    // Vue2 rules
+    'plugin:vue/recommended',
+    'plugin:vuejs-accessibility/recommended',
+
+    // Nuxt rules
+    'plugin:nuxt/recommended',
+  ],
+  // We don't need to include the vue-eslint-parser here because it's included in the nuxt/recommended config.
+
+  // We need the babel eslint-parser on top of the Vue parser to use certain JS features (like dynamic imports).
+  // This is covered by Typescript in the Nuxt3 config.
   parserOptions: {
     parser: '@babel/eslint-parser',
     requireConfigFile: false,
   },
+  rules: {
+    // Our base custom rules
+    'no-undefined': 'error',
+    'no-console': 'error',
+
+    // Our Vue custom rules
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+        },
+      },
+    ],
+    'vue/html-closing-bracket-spacing': 'error',
+    'vue/no-empty-component-block': 'error',
+    'vue/html-button-has-type': 'warn',
+  },
   overrides: [
     {
       // These file names are part of the file based routing in Nuxt

configs/nuxt3.js

@@ -1,5 +1,49 @@
 module.exports = {
-  extends: [require.resolve('./vue3')],
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    // Standard JS rules
+    'eslint:recommended',
+    'prettier',
+
+    // Vue3 rules
+    'plugin:vue/vue3-recommended',
+    'plugin:vuejs-accessibility/recommended',
+
+    // Typescript rules
+    'plugin:@typescript-eslint/recommended',
+
+    // Nuxt rules
+    'plugin:nuxt/recommended',
+  ],
+
+  // We don't need to include the vue-eslint-parser here because it's included in the nuxt/recommended settings
+
+  // TS parser settings
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    // Needed so TS doesn't complain about usage of browser APIs and newer JS features
+    lib: ['DOM', 'ESNext'],
+  },
+  rules: {
+    'no-undefined': 'error',
+    'no-console': 'error',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+        },
+      },
+    ],
+    'vue/html-closing-bracket-spacing': 'error',
+    'vue/no-empty-component-block': 'error',
+    'vue/html-button-has-type': 'warn',
+  },
   overrides: [
     {
       // These file names are part of the file based routing in Nuxt

configs/vue2.js

@@ -1,4 +1,34 @@
 module.exports = {
-  extends: ['plugin:vue/recommended', require.resolve('./_vue-generic')],
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    // Standard JS rules
+    'eslint:recommended',
+    'prettier',
+
+    // Vue2 rules
+    'plugin:vue/recommended',
+    'plugin:vuejs-accessibility/recommended',
+  ],
   parser: 'vue-eslint-parser',
+  rules: {
+    // Our base custom rules
+    'no-undefined': 'error',
+    'no-console': 'error',
+
+    // Our Vue custom rules
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+        },
+      },
+    ],
+    'vue/html-closing-bracket-spacing': 'error',
+    'vue/no-empty-component-block': 'error',
+    'vue/html-button-has-type': 'warn',
+  },
 }

configs/vue3.js

@@ -1,14 +1,45 @@
 module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
   extends: [
-    'plugin:@typescript-eslint/recommended',
+    // Standard JS rules
+    'eslint:recommended',
+    'prettier',
+    // Vue3 rules
     'plugin:vue/vue3-recommended',
-    require.resolve('./_vue-generic'),
+    'plugin:vuejs-accessibility/recommended',
+    // Typescript rules
+    'plugin:@typescript-eslint/recommended',
   ],
+  parser: 'vue-eslint-parser',
+
+  // TS parser settings
   parserOptions: {
     parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    // Needed so TS doesn't complain about usage of browser APIs and newer JS features
+    lib: ['DOM', 'ESNext'],
   },
-  plugins: ['@typescript-eslint'],
   rules: {
+    // Our base custom rules
+    'no-undefined': 'error',
+    'no-console': 'error',
+
+    // Our Vue custom rules
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+        },
+      },
+    ],
+    'vue/html-closing-bracket-spacing': 'error',
+    'vue/no-empty-component-block': 'error',
+    'vue/html-button-has-type': 'warn',
     'vue/component-tags-order': [
       'error',
       {