feat: enable devtools v7 integration by default (#602)

.github/workflows/ci.yml

@@ -67,7 +67,6 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
 
           - node-version: 18
             os: macos-latest
@@ -78,7 +77,6 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
 
           - node-version: 20
             os: ubuntu-latest
@@ -89,7 +87,6 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
 
           - node-version: 22
             os: ubuntu-latest
@@ -100,11 +97,10 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ matrix.os == 'windows-latest' }}
     env:
-      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-eslint}} ${{matrix.flag-for-devtools}}
+      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-eslint}}
       # Sometimes the Linux runner can't verify Cypress in 30s
       CYPRESS_VERIFY_TIMEOUT: 60000
     steps:

index.ts

@@ -83,7 +83,6 @@ async function init() {
   // --playwright
   // --eslint
   // --eslint-with-prettier (only support prettier through eslint for simplicity)
-  // --vue-devtools / --devtools
   // --force (for force overwriting)
 
   const args = process.argv.slice(2)
@@ -96,8 +95,6 @@ async function init() {
     tests: { type: 'boolean' },
     'vue-router': { type: 'boolean' },
     router: { type: 'boolean' },
-    'vue-devtools': { type: 'boolean' },
-    devtools: { type: 'boolean' },
   } as const
 
   const { values: argv, positionals } = parseArgs({
@@ -120,8 +117,7 @@ async function init() {
       argv.nightwatch ??
       argv.playwright ??
       argv.eslint ??
-      argv['eslint-with-prettier'] ??
-      (argv.devtools || argv['vue-devtools'])
+      argv['eslint-with-prettier']
     ) === 'boolean'
 
   let targetDir = positionals[0]
@@ -144,7 +140,6 @@ async function init() {
     needsEslint?: false | 'eslintOnly' | 'speedUpWithOxlint'
     needsOxlint?: boolean
     needsPrettier?: boolean
-    needsDevTools?: boolean
   } = {}
 
   try {
@@ -161,7 +156,6 @@ async function init() {
     // - Add Playwright for end-to-end testing?
     // - Add ESLint for code quality?
     // - Add Prettier for code formatting?
-    // - Add Vue DevTools 7 extension for debugging? (experimental)
     result = await prompts(
       [
         {
@@ -306,14 +300,6 @@ async function init() {
           active: language.defaultToggleOptions.active,
           inactive: language.defaultToggleOptions.inactive,
         },
-        {
-          name: 'needsDevTools',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: language.needsDevTools.message,
-          initial: false,
-          active: language.defaultToggleOptions.active,
-          inactive: language.defaultToggleOptions.inactive,
-        },
       ],
       {
         onCancel: () => {
@@ -338,7 +324,6 @@ async function init() {
     needsPinia = argv.pinia,
     needsVitest = argv.vitest || argv.tests,
     needsPrettier = argv['eslint-with-prettier'],
-    needsDevTools = argv.devtools || argv['vue-devtools'],
   } = result
 
   const needsEslint = Boolean(argv.eslint || argv['eslint-with-prettier'] || result.needsEslint)
@@ -488,9 +473,6 @@ async function init() {
     render('config/prettier')
   }
 
-  if (needsDevTools) {
-    render('config/devtools')
-  }
   // Render code template.
   // prettier-ignore
   const codeTemplate =

locales/en-US.json

@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "Add Prettier for code formatting?"
   },
-  "needsDevTools": {
-    "message": "Add Vue DevTools 7 extension for debugging? (experimental)"
-  },
   "errors": {
     "operationCancelled": "Operation cancelled"
   },

locales/fr-FR.json

@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "Ajouter Prettier pour le formatage du code\u00a0?"
   },
-  "needsDevTools": {
-    "message": "Ajouter l'extension Vue DevTools 7 pour le débogage\u00a0? (expérimental)"
-  },
   "errors": {
     "operationCancelled": "Operation annulée"
   },

locales/tr-TR.json

@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "Kod formatlama için Prettier eklensin mi?"
   },
-  "needsDevTools": {
-    "message": "Hata ayıklama için Vue DevTools 7 eklentisi eklensin mi? (deneysel)"
-  },
   "errors": {
     "operationCancelled": "İşlem iptal edildi"
   },

locales/zh-Hans.json

@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "是否引入 Prettier 用于代码格式化？"
   },
-  "needsDevTools": {
-    "message": "是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)"
-  },
   "errors": {
     "operationCancelled": "操作取消"
   },

locales/zh-Hant.json

@@ -63,9 +63,6 @@
   "needsPrettier": {
     "message": "是否引入 Prettier 用於程式碼格式化？"
   },
-  "needsDevTools": {
-    "message": "是否引入 Vue DevTools 7 擴充元件以協助偵錯？（試驗性功能）"
-  },
   "errors": {
     "operationCancelled": "操作取消"
   },

scripts/snapshot.mjs

@@ -56,7 +56,7 @@ function fullCombination(arr) {
 let flagCombinations = fullCombination(featureFlags)
 flagCombinations.push(
   ['default'],
-  ['devtools', 'router', 'pinia'],
+  ['router', 'pinia'],
   ['eslint'],
   ['eslint-with-prettier'],
 )

template/base/package.json

@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-plugin-vue-devtools": "^7.5.4"
   }
 }

template/base/vite.config.js.data.mjs

@@ -6,6 +6,12 @@ export default function getData() {
         importer: "import vue from '@vitejs/plugin-vue'",
         initializer: 'vue()',
       },
+
+      {
+        id: 'vite-plugin-vue-devtools',
+        importer: "import vueDevTools from 'vite-plugin-vue-devtools'",
+        initializer: 'vueDevTools()',
+      }
     ],
   }
 }

utils/getLanguage.ts

@@ -30,7 +30,6 @@ interface Language {
   needsE2eTesting: LanguageItem
   needsEslint: LanguageItem
   needsPrettier: LanguageItem
-  needsDevTools: LanguageItem
   errors: {
     operationCancelled: string
   }