Add support for ESLint Stylistic

Author: skirtles-code

src/index.ts

@@ -46,6 +46,10 @@ async function togglePrompt(message: string, initial = false, active = 'Yes', in
   })
 }
 
+async function togglePromptIf(condition: boolean, message: string, initial = false, active = 'Yes', inactive = 'No'): Promise<boolean> {
+  return condition ? togglePrompt(message, initial, active, inactive) : initial
+}
+
 type Config = {
   scopedPackageName: string
   unscopedPackageName: string
@@ -68,6 +72,7 @@ type Config = {
   includePlayground: boolean
   includeExamples: boolean
   includeEsLint: boolean
+  includeEsLintStylistic: boolean
 }
 
 async function init() {
@@ -126,7 +131,8 @@ async function init() {
     process.exit(1)
   }
 
-  const includeEsLint = await togglePrompt('Include ESLint?', true, 'Yes', 'No')
+  const includeEsLint = await togglePrompt('Include ESLint?', true)
+  const includeEsLintStylistic = await togglePromptIf(includeEsLint, 'Include ESLint Stylistic for formatting?', includeEsLint)
   const includeDocs = await togglePrompt('Include VitePress for documentation?', true)
   const includeGithubPages = includeDocs && await togglePrompt('Include GitHub Pages config for documentation?')
   const includePlayground = await togglePrompt('Include playground application for development?', true)
@@ -163,7 +169,8 @@ async function init() {
     includeGithubPages,
     includePlayground,
     includeExamples,
-    includeEsLint
+    includeEsLint,
+    includeEsLintStylistic
   }
 
   copyTemplate('base', config)

src/template/base/config/package.json.ejs

@@ -36,6 +36,9 @@
   "devDependencies": {
     <%_ if (config.includeEsLint) { _%>
     "@eslint/compat": "^1.2.6",
+    <%_ if (config.includeEsLintStylistic) { _%>
+    "@stylistic/eslint-plugin": "^4.0.0",
+    <%_ } _%>
     "@typescript-eslint/parser": "^8.23.0",
     "@vitest/eslint-plugin": "1.1.25",
     "@vue/eslint-config-typescript": "^14.3.0",

src/template/base/config/packages/@projectName@/vite.config.mts

@@ -11,10 +11,12 @@ export default defineConfig(({ mode }) => {
     throw new Error(`Unknown mode: ${mode}`)
   }
 
-  const dtsPlugin = mode === 'neutral' ? dts({
-    rollupTypes: true,
-    tsconfigPath: './tsconfig.app.json'
-  }) : null
+  const dtsPlugin = mode === 'neutral'
+    ? dts({
+        rollupTypes: true,
+        tsconfigPath: './tsconfig.app.json'
+      })
+    : null
 
   return {
     plugins: [
@@ -47,15 +49,18 @@ export default defineConfig(({ mode }) => {
 
           if (format === 'iife') {
             name += '.global'
-          } else if (format === 'es') {
+          }
+          else if (format === 'es') {
             name += '.esm-' + (mode === 'neutral' ? 'bundler' : 'browser')
           }
 
           if (mode === 'production') {
             name += '.prod'
-          } else if (mode === 'development') {
+          }
+          else if (mode === 'development') {
             name += '.dev'
-          } else if (mode === 'neutral') {
+          }
+          else if (mode === 'neutral') {
             extension = format === 'cjs' ? 'cjs' : 'mjs'
           }
 

src/template/eslint/config/eslint.config.mts renamed to src/template/eslint/config/eslint.config.mts.ejs

@@ -3,22 +3,31 @@ import { fileURLToPath } from 'node:url'
 
 import { includeIgnoreFile } from '@eslint/compat'
 import pluginVue from 'eslint-plugin-vue'
+<%_ if (config.includeEsLintStylistic) { _%>
+import stylistic from '@stylistic/eslint-plugin'
+<%_ } _%>
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 import pluginVitest from '@vitest/eslint-plugin'
 
 export default defineConfigWithVueTs(
   {
     name: 'app/files-to-lint',
-    files: ['**/*.{ts,mts,vue}'],
+    files: ['**/*.{ts,mts,vue}']
   },
 
   includeIgnoreFile(path.resolve(path.dirname(fileURLToPath(import.meta.url)), '.gitignore')),
 
   pluginVue.configs['flat/essential'],
   vueTsConfigs.recommended,
 
+  <%_ if (config.includeEsLintStylistic) { _%>
+  stylistic.configs.customize({
+    commaDangle: 'never'
+  }),
+  <%_ } _%>
+
   {
     ...pluginVitest.configs.recommended,
-    files: ['src/**/__tests__/*'],
-  },
+    files: ['src/**/__tests__/*']
+  }
 )

src/template/playground/config/packages/playground/vite.config.mts

@@ -7,13 +7,13 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 export default defineConfig(({ mode }) => ({
   plugins: [
     vue(),
-    vueDevTools(),
+    vueDevTools()
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '@scopedPackageName@': fileURLToPath(new URL('../@projectName@/src/index.ts', import.meta.url))
-    },
+    }
   },
 
   define: {