feat(eslint-config): improve vue stylistic settings

nuxt · Apr 5, 2024 · 24b6862 · 24b6862
1 parent 004f972
commit 24b6862
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 26 deletions.
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -114,7 +114,7 @@ watch(projectsSectionVisible, () => {
             :ui="{
               to: 'hover:ring-2 dark:hover:ring-gray-500 hover:ring-gray-500 hover:bg-gray-100/50',
               icon: { base: 'w-10 h-10 flex-shrink-0 text-gray-100' },
-              body: { base: 'h-full', background: 'bg-gradient-to-b from-gray-900 to-gray-950' }
+              body: { base: 'h-full', background: 'bg-gradient-to-b from-gray-900 to-gray-950' },
             }"
           />
         </UPageGrid>

diff --git a/packages/eslint-config/src/flat/configs/typescript.ts b/packages/eslint-config/src/flat/configs/typescript.ts
@@ -35,6 +35,30 @@ export default function typescript(options: NuxtESLintConfigOptions): FlatConfig
           ? {}
           : pluginTs.configs.strict.rules),
 
+        // Include typescript eslint rules in *.vue files
+        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslint-recommended.ts
+        'constructor-super': 'off', // ts(2335) & ts(2377)
+        'getter-return': 'off', // ts(2378)
+        'no-const-assign': 'off', // ts(2588)
+        'no-dupe-args': 'off', // ts(2300)
+        'no-dupe-class-members': 'off', // ts(2393) & ts(2300)
+        'no-dupe-keys': 'off', // ts(1117)
+        'no-func-assign': 'off', // ts(2539)
+        'no-import-assign': 'off', // ts(2539) & ts(2540)
+        'no-new-symbol': 'off', // ts(7009)
+        'no-obj-calls': 'off', // ts(2349)
+        'no-redeclare': 'off', // ts(2451)
+        'no-setter-return': 'off', // ts(2408)
+        'no-this-before-super': 'off', // ts(2376)
+        'no-undef': 'off', // ts(2304)
+        'no-unreachable': 'off', // ts(7027)
+        'no-unsafe-negation': 'off', // ts(2365) & ts(2360) & ts(2358)
+        'no-var': 'error', // ts transpiles let/const to var, so no need for vars any more
+        'prefer-const': 'error', // ts provides better types with const
+        'prefer-rest-params': 'error', // ts provides better types with rest args over arguments
+        'prefer-spread': 'error', // ts transpiles spread to apply, so no need for manual apply
+        'valid-typeof': 'off', // ts(2367)
+
         '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false, prefer: 'type-imports' }],
       },

diff --git a/packages/eslint-config/src/flat/configs/vue.ts b/packages/eslint-config/src/flat/configs/vue.ts
@@ -11,6 +11,11 @@ export default function vue(options: NuxtESLintConfigOptions): FlatConfigItem[]
   const resolved = resolveOptions(options)
   const hasTs = resolved.features.typescript !== false
 
+  const {
+    indent = 2,
+    commaDangle = 'always-multiline',
+  } = typeof resolved.features.stylistic === 'boolean' ? {} : resolved.features.stylistic
+
   return [
     {
       name: 'nuxt/vue/setup',
@@ -68,32 +73,45 @@ export default function vue(options: NuxtESLintConfigOptions): FlatConfigItem[]
         'vue/component-tags-order': undefined,
         'vue/block-order': 'warn',
 
-        // Include typescript eslint rules in *.vue files
-        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslint-recommended.ts
-        'constructor-super': 'off', // ts(2335) & ts(2377)
-        'getter-return': 'off', // ts(2378)
-        'no-const-assign': 'off', // ts(2588)
-        'no-dupe-args': 'off', // ts(2300)
-        'no-dupe-class-members': 'off', // ts(2393) & ts(2300)
-        'no-dupe-keys': 'off', // ts(1117)
-        'no-func-assign': 'off', // ts(2539)
-        'no-import-assign': 'off', // ts(2539) & ts(2540)
-        'no-new-symbol': 'off', // ts(7009)
-        'no-obj-calls': 'off', // ts(2349)
-        'no-redeclare': 'off', // ts(2451)
-        'no-setter-return': 'off', // ts(2408)
-        'no-this-before-super': 'off', // ts(2376)
-        'no-undef': 'off', // ts(2304)
-        'no-unreachable': 'off', // ts(7027)
-        'no-unsafe-negation': 'off', // ts(2365) & ts(2360) & ts(2358)
-        'no-var': 'error', // ts transpiles let/const to var, so no need for vars any more
-        'prefer-const': 'error', // ts provides better types with const
-        'prefer-rest-params': 'error', // ts provides better types with rest args over arguments
-        'prefer-spread': 'error', // ts transpiles spread to apply, so no need for manual apply
-        'valid-typeof': 'off', // ts(2367)
-
         ...(resolved.features.stylistic
-          ? {}
+          ? {
+              'vue/array-bracket-spacing': ['error', 'never'],
+              'vue/arrow-spacing': ['error', { after: true, before: true }],
+              'vue/block-spacing': ['error', 'always'],
+              'vue/block-tag-newline': [
+                'error',
+                {
+                  multiline: 'always',
+                  singleline: 'always',
+                },
+              ],
+              'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+              'vue/html-indent': ['error', indent],
+              'vue/html-quotes': ['error', 'double'],
+              'vue/comma-dangle': ['error', commaDangle],
+              'vue/comma-spacing': ['error', { after: true, before: false }],
+              'vue/comma-style': ['error', 'last'],
+              'vue/html-comment-content-spacing': [
+                'error',
+                'always',
+                { exceptions: ['-'] },
+              ],
+              'vue/key-spacing': ['error', { afterColon: true, beforeColon: false }],
+              'vue/keyword-spacing': ['error', { after: true, before: true }],
+              'vue/object-curly-newline': 'off',
+              'vue/object-curly-spacing': ['error', 'always'],
+              'vue/object-property-newline': [
+                'error',
+                { allowMultiplePropertiesPerLine: true },
+              ],
+              'vue/one-component-per-file': 'off',
+              'vue/operator-linebreak': ['error', 'before'],
+              'vue/padding-line-between-blocks': ['error', 'always'],
+              'vue/quote-props': ['error', 'consistent-as-needed'],
+              'vue/require-default-prop': 'off',
+              'vue/space-in-parens': ['error', 'never'],
+              'vue/template-curly-spacing': 'error',
+            }
           : {
               // Disable Vue's default stylistic rules when stylistic is not enabled
               'vue/html-closing-bracket-newline': undefined,