feat(vue): reviewed and enabled a set of non-default rules

Extracted separate shared eslint configs for vue projects, because they use separate rulesets for vue2 and vue3.
NaturalCycles · Jul 29, 2023 · ab92b23 · ab92b23
1 parent 6b40989
commit ab92b23
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 91 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,5 @@
 module.exports = {
-  extends: './cfg/eslint.config.js',
+  root: true,
+  extends: ['./cfg/eslint.config.js', './cfg/eslint-vue3.config.js'],
   rules: {},
 }
diff --git a/cfg/eslint-rules.js b/cfg/eslint-rules.js
@@ -445,5 +445,53 @@ module.exports = {
     '@typescript-eslint/dot-notation': 0, // not always desireable
     '@typescript-eslint/consistent-indexed-object-style': 0, // Record looses the name of the key
     '@typescript-eslint/no-unsafe-enum-comparison': 0, // not practically helpful
+    // non-default vue rules
+    'vue/block-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
+    'vue/component-api-style': [2, ['script-setup', 'composition', 'composition-vue2']],
+    'vue/component-name-in-template-casing': [
+      2,
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+      },
+    ],
+    'vue/component-options-name-casing': [2, 'PascalCase'],
+    'vue/custom-event-name-casing': [2, 'camelCase'],
+    'vue/define-emits-declaration': [2, 'type-based'],
+    'vue/define-macros-order': 2,
+    'vue/define-props-declaration': 2,
+    'vue/html-comment-content-spacing': 2,
+    'vue/match-component-file-name': [
+      2,
+      {
+        extensions: ['vue', 'jsx'],
+        shouldMatchCase: true,
+      },
+    ],
+    'vue/match-component-import-name': 2,
+    'vue/no-boolean-default': 2,
+    'vue/no-deprecated-model-definition': 2,
+    'vue/no-multiple-objects-in-class': 2,
+    'vue/no-ref-object-destructure': 2,
+    'vue/no-required-prop-with-default': 2,
+    'vue/no-root-v-if': 2,
+    'vue/no-this-in-before-route-enter': 2,
+    'vue/padding-line-between-blocks': 2,
+    'vue/prefer-define-options': 2,
+    'vue/prefer-separate-static-class': 2,
+    'vue/require-direct-export': 2,
+    'vue/require-emit-validator': 2,
+    'vue/require-expose': 2,
+    'vue/require-macro-variable-name': 2,
+    'vue/require-typed-object-prop': 2,
+    'vue/require-typed-ref': 2,
+    'vue/v-for-delimiter-style': [2, 'of'],
+    'vue/valid-define-options': 2,
+    'vue/eqeqeq': 2,
   },
 }
diff --git a/cfg/eslint-vue2.config.js b/cfg/eslint-vue2.config.js
@@ -0,0 +1,31 @@
+/**
+ * @naturalcycles/dev-lib/cfg/eslint-vue2.config.js
+ */
+
+module.exports = {
+  overrides: [
+    {
+      files: ['*.vue'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+        'plugin:unicorn/recommended',
+        'plugin:vue/recommended',
+        './eslint-rules.js',
+        'prettier', // must go last
+      ],
+      env: {
+        browser: true,
+      },
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        project: ['tsconfig.json'],
+        sourceType: 'module',
+        ecmaVersion: 'latest',
+        extraFileExtensions: ['.vue'],
+      },
+    },
+  ],
+}
diff --git a/cfg/eslint-vue3.config.js b/cfg/eslint-vue3.config.js
@@ -0,0 +1,31 @@
+/**
+ * @naturalcycles/dev-lib/cfg/eslint-vue3.config.js
+ */
+
+module.exports = {
+  overrides: [
+    {
+      files: ['*.vue'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+        'plugin:unicorn/recommended',
+        'plugin:vue/vue3-recommended',
+        './eslint-rules.js',
+        'prettier', // must go last
+      ],
+      env: {
+        browser: true,
+      },
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        project: ['tsconfig.json'],
+        sourceType: 'module',
+        ecmaVersion: 'latest',
+        extraFileExtensions: ['.vue'],
+      },
+    },
+  ],
+}
diff --git a/cfg/eslint.config.js b/cfg/eslint.config.js
@@ -37,15 +37,15 @@ module.exports = {
         // 'plugin:import/recommended',
         // https://github.com/import-js/eslint-plugin-import/blob/main/config/typescript.js
         // 'plugin:import/typescript',
-        './eslint-rules.js',
         hasJest && './eslint-jest-rules.js',
+        './eslint-rules.js',
         'prettier', // must be last! it only turns off eslint rules that conflict with prettier
       ].filter(Boolean),
       parser: '@typescript-eslint/parser',
       parserOptions: {
         project: ['tsconfig.json'],
         sourceType: 'module',
-        ecmaVersion: 2020,
+        ecmaVersion: 'latest',
         extraFileExtensions: ['.vue', '.html'],
       },
       plugins: [
@@ -58,29 +58,5 @@ module.exports = {
         'unicorn',
       ].filter(Boolean),
     },
-    {
-      files: ['*.vue'],
-      extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:unicorn/recommended',
-        './eslint-rules.js',
-        'plugin:vue/recommended',
-        'prettier', // must go last
-      ],
-      env: {
-        browser: true,
-      },
-      parser: 'vue-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        project: ['tsconfig.json'],
-        sourceType: 'module',
-        ecmaVersion: 2020,
-        extraFileExtensions: ['.vue'],
-        // createDefaultProgram: true,
-      },
-    },
   ],
 }
diff --git a/src/test/test.vue → src/test/TestComponent.vue b/src/test/test.vue → src/test/TestComponent.vue
@@ -1,6 +1,7 @@
-<script>
+<script setup>
 const _a = []
 </script>
+
 <template>
   <div></div>
 </template>