From 50d5e85d532823583dd4abacc9f11a8ef2e9c15b Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 25 Oct 2024 19:13:06 +0800 Subject: [PATCH] style: enable trailingComma in prettier I think we don't have to strictly conform to the styles from vuejs/core, so let's choose a style that better suited for this project. --- .prettierrc | 4 +- __test__/renderEslint.spec.ts | 26 +++--- __test__/sortDependencies.spec.ts | 12 +-- index.ts | 84 +++++++++---------- scripts/build.mjs | 22 ++--- scripts/snapshot.mjs | 10 +-- template/base/vite.config.js.data.mjs | 6 +- template/base/vite.config.js.ejs | 4 +- .../default/src/components/HelloWorld.vue | 4 +- .../default/src/components/TheWelcome.vue | 10 ++- .../code/router/src/components/HelloWorld.vue | 4 +- .../code/router/src/components/TheWelcome.vue | 10 ++- template/code/router/src/router/index.js | 8 +- .../src/components/TheWelcome.vue | 10 ++- .../src/components/TheWelcome.vue | 10 ++- .../typescript-router/src/router/index.ts | 8 +- template/config/cypress-ct/cypress.config.js | 8 +- template/config/cypress/cypress.config.js | 4 +- .../config/devtools/vite.config.js.data.mjs | 4 +- template/config/jsx/vite.config.js.data.mjs | 6 +- .../nightwatch-ct/vite.config.js.data.mjs | 4 +- .../config/nightwatch/nightwatch.conf.cjs | 50 +++++------ .../config/nightwatch/vite.config.js.data.mjs | 4 +- .../config/playwright/playwright.config.js | 22 ++--- template/config/vitest/vitest.config.js | 6 +- utils/generateReadme.ts | 4 +- utils/renderEslint.ts | 42 ++++++---- utils/renderTemplate.ts | 2 +- utils/sortDependencies.ts | 2 +- vitest.config.ts | 4 +- 30 files changed, 203 insertions(+), 191 deletions(-) diff --git a/.prettierrc b/.prettierrc index 8b47c122..75a894a2 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,5 @@ { "semi": false, - "tabWidth": 2, "singleQuote": true, - "printWidth": 100, - "trailingComma": "none" + "printWidth": 100 } diff --git a/__test__/renderEslint.spec.ts b/__test__/renderEslint.spec.ts index a36fafd5..d82d2f61 100644 --- a/__test__/renderEslint.spec.ts +++ b/__test__/renderEslint.spec.ts @@ -7,7 +7,7 @@ describe('renderEslint', () => { needsVitest: false, needsCypress: false, needsCypressCT: false, - needsPlaywright: false + needsPlaywright: false, }) expect(additionalConfigs).toStrictEqual([]) }) @@ -17,7 +17,7 @@ describe('renderEslint', () => { needsVitest: true, needsCypress: false, needsCypressCT: false, - needsPlaywright: false + needsPlaywright: false, }) expect(additionalConfigs).toHaveLength(1) const [additionalVitestConfig] = additionalConfigs @@ -34,7 +34,7 @@ describe('renderEslint', () => { needsVitest: false, needsCypress: true, needsCypressCT: false, - needsPlaywright: false + needsPlaywright: false, }) expect(additionalConfigs).toHaveLength(1) const [additionalCypressConfig] = additionalConfigs @@ -42,11 +42,11 @@ describe('renderEslint', () => { expect(additionalCypressConfig.afterVuePlugin).toHaveLength(1) const [additionalCypressPlugin] = additionalCypressConfig.afterVuePlugin! expect(additionalCypressPlugin.importer).toBe( - "import pluginCypress from 'eslint-plugin-cypress/flat'" + "import pluginCypress from 'eslint-plugin-cypress/flat'", ) expect(additionalCypressPlugin.content).toContain('...pluginCypress.configs.recommended') expect(additionalCypressPlugin.content).toContain( - "'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'" + "'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'", ) expect(additionalCypressPlugin.content).toContain("'cypress/support/**/*.{js,ts,jsx,tsx}'") }) @@ -56,7 +56,7 @@ describe('renderEslint', () => { needsVitest: false, needsCypress: true, needsCypressCT: true, - needsPlaywright: false + needsPlaywright: false, }) expect(additionalConfigs).toHaveLength(1) const [additionalCypressConfig] = additionalConfigs @@ -64,12 +64,12 @@ describe('renderEslint', () => { expect(additionalCypressConfig.afterVuePlugin).toHaveLength(1) const [additionalCypressPlugin] = additionalCypressConfig.afterVuePlugin! expect(additionalCypressPlugin.importer).toBe( - "import pluginCypress from 'eslint-plugin-cypress/flat'" + "import pluginCypress from 'eslint-plugin-cypress/flat'", ) expect(additionalCypressPlugin.content).toContain('...pluginCypress.configs.recommended') expect(additionalCypressPlugin.content).toContain("'**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}'") expect(additionalCypressPlugin.content).toContain( - "'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'" + "'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'", ) expect(additionalCypressPlugin.content).toContain("'cypress/support/**/*.{js,ts,jsx,tsx}'") }) @@ -79,23 +79,23 @@ describe('renderEslint', () => { needsVitest: false, needsCypress: false, needsCypressCT: false, - needsPlaywright: true + needsPlaywright: true, }) expect(additionalConfigs).toHaveLength(1) const [additionalPlaywrightConfig] = additionalConfigs expect( - additionalPlaywrightConfig.devDependencies['eslint-plugin-playwright'] + additionalPlaywrightConfig.devDependencies['eslint-plugin-playwright'], ).not.toBeUndefined() expect(additionalPlaywrightConfig.afterVuePlugin).toHaveLength(1) const [additionalPlaywrightPlugin] = additionalPlaywrightConfig.afterVuePlugin! expect(additionalPlaywrightPlugin.importer).toBe( - "import pluginPlaywright from 'eslint-plugin-playwright'" + "import pluginPlaywright from 'eslint-plugin-playwright'", ) expect(additionalPlaywrightPlugin.content).toContain( - "...pluginPlaywright.configs['flat/recommended']" + "...pluginPlaywright.configs['flat/recommended']", ) expect(additionalPlaywrightPlugin.content).toContain( - "files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}']" + "files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}']", ) }) }) diff --git a/__test__/sortDependencies.spec.ts b/__test__/sortDependencies.spec.ts index 29becf4f..2084b999 100644 --- a/__test__/sortDependencies.spec.ts +++ b/__test__/sortDependencies.spec.ts @@ -7,7 +7,7 @@ describe('sortDependencies', () => { dependencies: { vue: '^3.3.4', 'vue-router': '^4.2.5', - pinia: '^2.1.7' + pinia: '^2.1.7', }, devDependencies: { '@vitejs/plugin-vue-jsx': '^3.0.2', @@ -20,14 +20,14 @@ describe('sortDependencies', () => { '@vitejs/plugin-vue': '^4.4.0', 'eslint-plugin-cypress': '^2.15.1', 'eslint-plugin-vue': '^9.17.0', - vitest: '^0.34.6' - } + vitest: '^0.34.6', + }, } expect(sortDependencies(packageJson)).toStrictEqual({ dependencies: { pinia: '^2.1.7', vue: '^3.3.4', - 'vue-router': '^4.2.5' + 'vue-router': '^4.2.5', }, devDependencies: { '@vitejs/plugin-vue': '^4.4.0', @@ -40,8 +40,8 @@ describe('sortDependencies', () => { jsdom: '^22.1.0', 'start-server-and-test': '^2.0.1', vite: '^4.4.11', - vitest: '^0.34.6' - } + vitest: '^0.34.6', + }, }) }) }) diff --git a/index.ts b/index.ts index 57819259..35bd3cd4 100755 --- a/index.ts +++ b/index.ts @@ -56,7 +56,7 @@ function emptyDir(dir) { postOrderDirectoryTraverse( dir, (dir) => fs.rmdirSync(dir), - (file) => fs.unlinkSync(file) + (file) => fs.unlinkSync(file), ) } @@ -65,7 +65,7 @@ async function init() { console.log( process.stdout.isTTY && process.stdout.getColorDepth() > 8 ? banners.gradientBanner - : banners.defaultBanner + : banners.defaultBanner, ) console.log() @@ -97,13 +97,13 @@ async function init() { 'vue-router': { type: 'boolean' }, router: { type: 'boolean' }, 'vue-devtools': { type: 'boolean' }, - devtools: { type: 'boolean' } + devtools: { type: 'boolean' }, } as const const { values: argv, positionals } = parseArgs({ args, options, - strict: false + strict: false, }) // if any of the feature flags is set, we would skip the feature prompts @@ -168,7 +168,7 @@ async function init() { type: targetDir ? null : 'text', message: language.projectName.message, initial: defaultProjectName, - onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName) + onState: (state) => (targetDir = String(state.value).trim() || defaultProjectName), }, { name: 'shouldOverwrite', @@ -183,7 +183,7 @@ async function init() { }, initial: true, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'overwriteChecker', @@ -192,14 +192,14 @@ async function init() { throw new Error(red('✖') + ` ${language.errors.operationCancelled}`) } return null - } + }, }, { name: 'packageName', type: () => (isValidPackageName(targetDir) ? null : 'text'), message: language.packageName.message, initial: () => toValidPackageName(targetDir), - validate: (dir) => isValidPackageName(dir) || language.packageName.invalidMessage + validate: (dir) => isValidPackageName(dir) || language.packageName.invalidMessage, }, { name: 'needsTypeScript', @@ -207,7 +207,7 @@ async function init() { message: language.needsTypeScript.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsJsx', @@ -215,7 +215,7 @@ async function init() { message: language.needsJsx.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsRouter', @@ -223,7 +223,7 @@ async function init() { message: language.needsRouter.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsPinia', @@ -231,7 +231,7 @@ async function init() { message: language.needsPinia.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsVitest', @@ -239,7 +239,7 @@ async function init() { message: language.needsVitest.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsE2eTesting', @@ -250,27 +250,27 @@ async function init() { choices: (prev, answers) => [ { title: language.needsE2eTesting.selectOptions.negative.title, - value: false + value: false, }, { title: language.needsE2eTesting.selectOptions.cypress.title, description: answers.needsVitest ? undefined : language.needsE2eTesting.selectOptions.cypress.desc, - value: 'cypress' + value: 'cypress', }, { title: language.needsE2eTesting.selectOptions.nightwatch.title, description: answers.needsVitest ? undefined : language.needsE2eTesting.selectOptions.nightwatch.desc, - value: 'nightwatch' + value: 'nightwatch', }, { title: language.needsE2eTesting.selectOptions.playwright.title, - value: 'playwright' - } - ] + value: 'playwright', + }, + ], }, { name: 'needsEslint', @@ -278,7 +278,7 @@ async function init() { message: language.needsEslint.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsPrettier', @@ -291,7 +291,7 @@ async function init() { message: language.needsPrettier.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive + inactive: language.defaultToggleOptions.inactive, }, { name: 'needsDevTools', @@ -299,14 +299,14 @@ async function init() { message: language.needsDevTools.message, initial: false, active: language.defaultToggleOptions.active, - inactive: language.defaultToggleOptions.inactive - } + inactive: language.defaultToggleOptions.inactive, + }, ], { onCancel: () => { throw new Error(red('✖') + ` ${language.errors.operationCancelled}`) - } - } + }, + }, ) } catch (cancelled) { console.log(cancelled.message) @@ -326,7 +326,7 @@ async function init() { needsVitest = argv.vitest || argv.tests, needsEslint = argv.eslint || argv['eslint-with-prettier'], needsPrettier = argv['eslint-with-prettier'], - needsDevTools = argv.devtools || argv['vue-devtools'] + needsDevTools = argv.devtools || argv['vue-devtools'], } = result const { needsE2eTesting } = result @@ -403,12 +403,12 @@ async function init() { // All templates contain at least a `.node` and a `.app` tsconfig. references: [ { - path: './tsconfig.node.json' + path: './tsconfig.node.json', }, { - path: './tsconfig.app.json' - } - ] + path: './tsconfig.app.json', + }, + ], } if (needsCypress) { render('tsconfig/cypress') @@ -418,14 +418,14 @@ async function init() { // (Cypress uses the ts-node/esm loader when `type: module` is specified in package.json.) // @ts-ignore rootTsConfig.compilerOptions = { - module: 'NodeNext' + module: 'NodeNext', } } if (needsCypressCT) { render('tsconfig/cypress-ct') // Cypress Component Testing needs a standalone tsconfig. rootTsConfig.references.push({ - path: './tsconfig.cypress-ct.json' + path: './tsconfig.cypress-ct.json', }) } if (needsPlaywright) { @@ -435,14 +435,14 @@ async function init() { render('tsconfig/vitest') // Vitest needs a standalone tsconfig. rootTsConfig.references.push({ - path: './tsconfig.vitest.json' + path: './tsconfig.vitest.json', }) } if (needsNightwatch) { render('tsconfig/nightwatch') // Nightwatch needs a standalone tsconfig, but in a different folder. rootTsConfig.references.push({ - path: './nightwatch/tsconfig.json' + path: './nightwatch/tsconfig.json', }) } if (needsNightwatchCT) { @@ -451,7 +451,7 @@ async function init() { fs.writeFileSync( path.resolve(root, 'tsconfig.json'), JSON.stringify(rootTsConfig, null, 2) + '\n', - 'utf-8' + 'utf-8', ) } @@ -463,7 +463,7 @@ async function init() { needsCypress, needsCypressCT, needsPrettier, - needsPlaywright + needsPlaywright, }) render('config/eslint') } @@ -513,7 +513,7 @@ async function init() { fs.writeFileSync(dest, content) fs.unlinkSync(filepath) } - } + }, ) // Cleanup. @@ -545,7 +545,7 @@ async function init() { } else if (path.basename(filepath) === 'jsconfig.json') { fs.unlinkSync(filepath) } - } + }, ) // Rename entry in `index.html` @@ -561,7 +561,7 @@ async function init() { if (filepath.endsWith('.ts')) { fs.unlinkSync(filepath) } - } + }, ) } @@ -589,15 +589,15 @@ async function init() { needsPlaywright, needsNightwatchCT, needsCypressCT, - needsEslint - }) + needsEslint, + }), ) console.log(`\n${language.infos.done}\n`) if (root !== cwd) { const cdProjectName = path.relative(cwd, root) console.log( - ` ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}` + ` ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`, ) } console.log(` ${bold(green(getCommand(packageManager, 'install')))}`) diff --git a/scripts/build.mjs b/scripts/build.mjs index 15e23a44..f4b84386 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -44,11 +44,11 @@ await esbuild.build({ const result = await resolve('prompts/lib/index.js', { importer, resolveDir, - kind: 'import-statement' + kind: 'import-statement', }) return result }) - } + }, }, { @@ -65,7 +65,7 @@ await esbuild.build({ allTemplateFileNames.map((fileName) => { const content = fs.readFileSync(path.resolve(templatesDir, fileName), 'utf8') return [`./templates/${fileName}`, content] - }) + }), ) return { @@ -76,10 +76,10 @@ await esbuild.build({ return ejs.render(templates[filePath], data, {}) } `, - loader: 'js' + loader: 'js', } }) - } + }, }, esbuildPluginLicense({ @@ -97,7 +97,7 @@ await esbuild.build({ `\n## Licenses of bundled dependencies\n\n` + `The published create-vue artifact additionally contains code with the following licenses:\n` + [...new Set(dependencies.map((dependency) => dependency.packageJson.license))].join( - ', ' + ', ', ) + '\n\n' + `## Bundled dependencies\n\n` + @@ -117,9 +117,9 @@ await esbuild.build({ .join('\n\n') return licenseText - } - } - } - }) - ] + }, + }, + }, + }), + ], }) diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs index b80da8e1..5eaa8a03 100644 --- a/scripts/snapshot.mjs +++ b/scripts/snapshot.mjs @@ -15,13 +15,13 @@ const featureFlags = [ 'vitest', 'cypress', 'playwright', - 'nightwatch' + 'nightwatch', ] const featureFlagsDenylist = [ ['cypress', 'playwright'], ['playwright', 'nightwatch'], ['cypress', 'nightwatch'], - ['cypress', 'playwright', 'nightwatch'] + ['cypress', 'playwright', 'nightwatch'], ] // The following code & comments are generated by GitHub CoPilot. @@ -58,7 +58,7 @@ flagCombinations.push( ['default'], ['devtools', 'router', 'pinia'], ['eslint'], - ['eslint-with-prettier'] + ['eslint-with-prettier'], ) // `--with-tests` are equivalent of `--vitest --cypress` @@ -67,7 +67,7 @@ flagCombinations.push( // They may be removed in later releases. const withTestsFlags = fullCombination(['typescript', 'jsx', 'router', 'pinia']).map((args) => [ ...args, - 'with-tests' + 'with-tests', ]) withTestsFlags.push(['with-tests']) @@ -87,7 +87,7 @@ for (const flags of flagCombinations) { // Filter out combinations that are not allowed flagCombinations = flagCombinations.filter( (combination) => - !featureFlagsDenylist.some((denylist) => denylist.every((flag) => combination.includes(flag))) + !featureFlagsDenylist.some((denylist) => denylist.every((flag) => combination.includes(flag))), ) const bin = path.posix.relative('../playground/', '../outfile.cjs') diff --git a/template/base/vite.config.js.data.mjs b/template/base/vite.config.js.data.mjs index e3814b13..39f55e1e 100644 --- a/template/base/vite.config.js.data.mjs +++ b/template/base/vite.config.js.data.mjs @@ -4,8 +4,8 @@ export default function getData() { { id: 'vue', importer: "import vue from '@vitejs/plugin-vue'", - initializer: 'vue()' - } - ] + initializer: 'vue()', + }, + ], } } diff --git a/template/base/vite.config.js.ejs b/template/base/vite.config.js.ejs index a8f64a52..3851c427 100644 --- a/template/base/vite.config.js.ejs +++ b/template/base/vite.config.js.ejs @@ -15,6 +15,6 @@ export default defineConfig({ resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } + }, + }, }) diff --git a/template/code/default/src/components/HelloWorld.vue b/template/code/default/src/components/HelloWorld.vue index f5f98332..eff59f13 100644 --- a/template/code/default/src/components/HelloWorld.vue +++ b/template/code/default/src/components/HelloWorld.vue @@ -2,8 +2,8 @@ defineProps({ msg: { type: String, - required: true - } + required: true, + }, }) diff --git a/template/code/default/src/components/TheWelcome.vue b/template/code/default/src/components/TheWelcome.vue index e4d125fc..acb6a2da 100644 --- a/template/code/default/src/components/TheWelcome.vue +++ b/template/code/default/src/components/TheWelcome.vue @@ -28,10 +28,12 @@ import SupportIcon from './icons/IconSupport.vue' This project is served and bundled with Vite. The recommended IDE setup is - VSCode + + VSCode + + Volar. If you need to test your components and web pages, check out - Cypress and + Cypress + and Cypress Component Testing. @@ -69,8 +71,8 @@ import SupportIcon from './icons/IconSupport.vue' StackOverflow. You should also subscribe to - our mailing list and follow - the official + our mailing list + and follow the official @vuejs twitter account for latest news in the Vue world. diff --git a/template/code/router/src/components/HelloWorld.vue b/template/code/router/src/components/HelloWorld.vue index f5f98332..eff59f13 100644 --- a/template/code/router/src/components/HelloWorld.vue +++ b/template/code/router/src/components/HelloWorld.vue @@ -2,8 +2,8 @@ defineProps({ msg: { type: String, - required: true - } + required: true, + }, }) diff --git a/template/code/router/src/components/TheWelcome.vue b/template/code/router/src/components/TheWelcome.vue index e4d125fc..acb6a2da 100644 --- a/template/code/router/src/components/TheWelcome.vue +++ b/template/code/router/src/components/TheWelcome.vue @@ -28,10 +28,12 @@ import SupportIcon from './icons/IconSupport.vue' This project is served and bundled with Vite. The recommended IDE setup is - VSCode + + VSCode + + Volar. If you need to test your components and web pages, check out - Cypress and + Cypress + and Cypress Component Testing. @@ -69,8 +71,8 @@ import SupportIcon from './icons/IconSupport.vue' StackOverflow. You should also subscribe to - our mailing list and follow - the official + our mailing list + and follow the official @vuejs twitter account for latest news in the Vue world. diff --git a/template/code/router/src/router/index.js b/template/code/router/src/router/index.js index a49ae507..3e49915c 100644 --- a/template/code/router/src/router/index.js +++ b/template/code/router/src/router/index.js @@ -7,7 +7,7 @@ const router = createRouter({ { path: '/', name: 'home', - component: HomeView + component: HomeView, }, { path: '/about', @@ -15,9 +15,9 @@ const router = createRouter({ // route level code-splitting // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } - ] + component: () => import('../views/AboutView.vue'), + }, + ], }) export default router diff --git a/template/code/typescript-default/src/components/TheWelcome.vue b/template/code/typescript-default/src/components/TheWelcome.vue index e65a66b4..3d4eecdb 100644 --- a/template/code/typescript-default/src/components/TheWelcome.vue +++ b/template/code/typescript-default/src/components/TheWelcome.vue @@ -28,10 +28,12 @@ import SupportIcon from './icons/IconSupport.vue' This project is served and bundled with Vite. The recommended IDE setup is - VSCode + + VSCode + + Volar. If you need to test your components and web pages, check out - Cypress and + Cypress + and Cypress Component Testing. @@ -69,8 +71,8 @@ import SupportIcon from './icons/IconSupport.vue' StackOverflow. You should also subscribe to - our mailing list and follow - the official + our mailing list + and follow the official @vuejs twitter account for latest news in the Vue world. diff --git a/template/code/typescript-router/src/components/TheWelcome.vue b/template/code/typescript-router/src/components/TheWelcome.vue index e65a66b4..3d4eecdb 100644 --- a/template/code/typescript-router/src/components/TheWelcome.vue +++ b/template/code/typescript-router/src/components/TheWelcome.vue @@ -28,10 +28,12 @@ import SupportIcon from './icons/IconSupport.vue' This project is served and bundled with Vite. The recommended IDE setup is - VSCode + + VSCode + + Volar. If you need to test your components and web pages, check out - Cypress and + Cypress + and Cypress Component Testing. @@ -69,8 +71,8 @@ import SupportIcon from './icons/IconSupport.vue' StackOverflow. You should also subscribe to - our mailing list and follow - the official + our mailing list + and follow the official @vuejs twitter account for latest news in the Vue world. diff --git a/template/code/typescript-router/src/router/index.ts b/template/code/typescript-router/src/router/index.ts index a49ae507..3e49915c 100644 --- a/template/code/typescript-router/src/router/index.ts +++ b/template/code/typescript-router/src/router/index.ts @@ -7,7 +7,7 @@ const router = createRouter({ { path: '/', name: 'home', - component: HomeView + component: HomeView, }, { path: '/about', @@ -15,9 +15,9 @@ const router = createRouter({ // route level code-splitting // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } - ] + component: () => import('../views/AboutView.vue'), + }, + ], }) export default router diff --git a/template/config/cypress-ct/cypress.config.js b/template/config/cypress-ct/cypress.config.js index c8fac129..2ecbea60 100644 --- a/template/config/cypress-ct/cypress.config.js +++ b/template/config/cypress-ct/cypress.config.js @@ -3,13 +3,13 @@ import { defineConfig } from 'cypress' export default defineConfig({ e2e: { specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}', - baseUrl: 'http://localhost:4173' + baseUrl: 'http://localhost:4173', }, component: { specPattern: 'src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}', devServer: { framework: 'vue', - bundler: 'vite' - } - } + bundler: 'vite', + }, + }, }) diff --git a/template/config/cypress/cypress.config.js b/template/config/cypress/cypress.config.js index 0f66080f..4a22885c 100644 --- a/template/config/cypress/cypress.config.js +++ b/template/config/cypress/cypress.config.js @@ -3,6 +3,6 @@ import { defineConfig } from 'cypress' export default defineConfig({ e2e: { specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}', - baseUrl: 'http://localhost:4173' - } + baseUrl: 'http://localhost:4173', + }, }) diff --git a/template/config/devtools/vite.config.js.data.mjs b/template/config/devtools/vite.config.js.data.mjs index dc0c172b..a70df9b6 100644 --- a/template/config/devtools/vite.config.js.data.mjs +++ b/template/config/devtools/vite.config.js.data.mjs @@ -2,11 +2,11 @@ export default function getData({ oldData }) { const vueDevtoolsPlugin = { id: 'vite-plugin-vue-devtools', importer: "import vueDevTools from 'vite-plugin-vue-devtools'", - initializer: 'vueDevTools()' + initializer: 'vueDevTools()', } return { ...oldData, - plugins: [...oldData.plugins, vueDevtoolsPlugin] + plugins: [...oldData.plugins, vueDevtoolsPlugin], } } diff --git a/template/config/jsx/vite.config.js.data.mjs b/template/config/jsx/vite.config.js.data.mjs index 2b6381a3..db80f23a 100644 --- a/template/config/jsx/vite.config.js.data.mjs +++ b/template/config/jsx/vite.config.js.data.mjs @@ -2,14 +2,14 @@ export default function getData({ oldData }) { const vueJsxPlugin = { name: 'vueJsx', importer: "import vueJsx from '@vitejs/plugin-vue-jsx'", - initializer: 'vueJsx()' + initializer: 'vueJsx()', } return { ...oldData, // Append the vueJsx plugin right after the vue plugin plugins: oldData.plugins.flatMap((plugin) => - plugin.id === 'vue' ? [plugin, vueJsxPlugin] : plugin - ) + plugin.id === 'vue' ? [plugin, vueJsxPlugin] : plugin, + ), } } diff --git a/template/config/nightwatch-ct/vite.config.js.data.mjs b/template/config/nightwatch-ct/vite.config.js.data.mjs index 61147bb0..c55e59d7 100644 --- a/template/config/nightwatch-ct/vite.config.js.data.mjs +++ b/template/config/nightwatch-ct/vite.config.js.data.mjs @@ -9,8 +9,8 @@ export default function getData({ oldData }) { return { ...plugin, - initializer: "nightwatchPlugin({\n renderPage: './nightwatch/index.html'\n })" + initializer: "nightwatchPlugin({\n renderPage: './nightwatch/index.html'\n })", } - }) + }), } } diff --git a/template/config/nightwatch/nightwatch.conf.cjs b/template/config/nightwatch/nightwatch.conf.cjs index 542647e5..021e2f02 100644 --- a/template/config/nightwatch/nightwatch.conf.cjs +++ b/template/config/nightwatch/nightwatch.conf.cjs @@ -34,14 +34,14 @@ module.exports = { vite_dev_server: { start_vite: true, - port: process.env.CI ? 4173 : 5173 + port: process.env.CI ? 4173 : 5173, }, webdriver: {}, test_workers: { enabled: true, - workers: 'auto' + workers: 'auto', }, test_settings: { @@ -52,30 +52,30 @@ module.exports = { screenshots: { enabled: false, path: 'screens', - on_failure: true + on_failure: true, }, desiredCapabilities: { - browserName: 'firefox' + browserName: 'firefox', }, webdriver: { start_process: true, - server_path: '' - } + server_path: '', + }, }, safari: { desiredCapabilities: { browserName: 'safari', alwaysMatch: { - acceptInsecureCerts: false - } + acceptInsecureCerts: false, + }, }, webdriver: { start_process: true, - server_path: '' - } + server_path: '', + }, }, firefox: { @@ -87,9 +87,9 @@ module.exports = { args: [ // '-headless', // '-verbose' - ] - } - } + ], + }, + }, }, webdriver: { start_process: true, @@ -97,8 +97,8 @@ module.exports = { cli_args: [ // very verbose geckodriver logs // '-vv' - ] - } + ], + }, }, chrome: { @@ -114,8 +114,8 @@ module.exports = { //'--ignore-certificate-errors', //'--allow-insecure-localhost', //'--headless' - ] - } + ], + }, }, webdriver: { @@ -123,8 +123,8 @@ module.exports = { server_path: '', cli_args: [ // --verbose - ] - } + ], + }, }, edge: { @@ -135,8 +135,8 @@ module.exports = { // More info on EdgeDriver: https://docs.microsoft.com/en-us/microsoft-edge/webdriver-chromium/capabilities-edge-options args: [ //'--headless' - ] - } + ], + }, }, webdriver: { @@ -146,8 +146,8 @@ module.exports = { server_path: '', cli_args: [ // --verbose - ] - } - } - } + ], + }, + }, + }, } diff --git a/template/config/nightwatch/vite.config.js.data.mjs b/template/config/nightwatch/vite.config.js.data.mjs index 4860ed1d..0ea7bc17 100644 --- a/template/config/nightwatch/vite.config.js.data.mjs +++ b/template/config/nightwatch/vite.config.js.data.mjs @@ -2,11 +2,11 @@ export default function getData({ oldData }) { const nightwatchPlugin = { id: 'nightwatch', importer: "import nightwatchPlugin from 'vite-plugin-nightwatch'", - initializer: 'nightwatchPlugin()' + initializer: 'nightwatchPlugin()', } return { ...oldData, - plugins: [...oldData.plugins, nightwatchPlugin] + plugins: [...oldData.plugins, nightwatchPlugin], } } diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js index cbb25003..5ece9567 100644 --- a/template/config/playwright/playwright.config.js +++ b/template/config/playwright/playwright.config.js @@ -19,7 +19,7 @@ export default defineConfig({ * Maximum time expect() should wait for the condition to be met. * For example in `await expect(locator).toHaveText();` */ - timeout: 5000 + timeout: 5000, }, /* Fail the build on CI if you accidentally left test.only in the source code. */ forbidOnly: !!process.env.CI, @@ -40,7 +40,7 @@ export default defineConfig({ trace: 'on-first-retry', /* Only on CI systems run the tests headless */ - headless: !!process.env.CI + headless: !!process.env.CI, }, /* Configure projects for major browsers */ @@ -48,21 +48,21 @@ export default defineConfig({ { name: 'chromium', use: { - ...devices['Desktop Chrome'] - } + ...devices['Desktop Chrome'], + }, }, { name: 'firefox', use: { - ...devices['Desktop Firefox'] - } + ...devices['Desktop Firefox'], + }, }, { name: 'webkit', use: { - ...devices['Desktop Safari'] - } - } + ...devices['Desktop Safari'], + }, + }, /* Test against mobile viewports. */ // { @@ -105,6 +105,6 @@ export default defineConfig({ */ command: process.env.CI ? 'npm run preview' : 'npm run dev', port: process.env.CI ? 4173 : 5173, - reuseExistingServer: !process.env.CI - } + reuseExistingServer: !process.env.CI, + }, }) diff --git a/template/config/vitest/vitest.config.js b/template/config/vitest/vitest.config.js index 4b1c8979..c3287171 100644 --- a/template/config/vitest/vitest.config.js +++ b/template/config/vitest/vitest.config.js @@ -8,7 +8,7 @@ export default mergeConfig( test: { environment: 'jsdom', exclude: [...configDefaults.exclude, 'e2e/**'], - root: fileURLToPath(new URL('./', import.meta.url)) - } - }) + root: fileURLToPath(new URL('./', import.meta.url)), + }, + }), ) diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts index be6e68b3..36ae1657 100644 --- a/utils/generateReadme.ts +++ b/utils/generateReadme.ts @@ -5,7 +5,7 @@ const sfcTypeSupportDoc = [ '## Type Support for `.vue` Imports in TS', '', 'TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.', - '' + '', ].join('\n') export default function generateReadme({ @@ -18,7 +18,7 @@ export default function generateReadme({ needsNightwatchCT, needsPlaywright, needsVitest, - needsEslint + needsEslint, }) { const commandFor = (scriptName: string, args?: string) => getCommand(packageManager, scriptName, args) diff --git a/utils/renderEslint.ts b/utils/renderEslint.ts index 34933de2..e677c064 100644 --- a/utils/renderEslint.ts +++ b/utils/renderEslint.ts @@ -11,13 +11,13 @@ const eslintDeps = eslintTemplatePackage.devDependencies export default function renderEslint( rootDir, - { needsTypeScript, needsVitest, needsCypress, needsCypressCT, needsPrettier, needsPlaywright } + { needsTypeScript, needsVitest, needsCypress, needsCypressCT, needsPrettier, needsPlaywright }, ) { const additionalConfigs = getAdditionalConfigs({ needsVitest, needsCypress, needsCypressCT, - needsPlaywright + needsPlaywright, }) const { pkg, files } = createESLintConfig({ @@ -25,11 +25,11 @@ export default function renderEslint( hasTypeScript: needsTypeScript, needsPrettier, - additionalConfigs + additionalConfigs, }) const scripts: Record = { - lint: 'eslint . --fix' + lint: 'eslint . --fix', } // Theoretically, we could add Prettier without requring ESLint. @@ -71,13 +71,15 @@ export function getAdditionalConfigs({ needsVitest, needsCypress, needsCypressCT, - needsPlaywright + needsPlaywright, }) { const additionalConfigs: AdditionalConfigArray = [] if (needsVitest) { additionalConfigs.push({ - devDependencies: { '@vitest/eslint-plugin': eslintDeps['@vitest/eslint-plugin'] }, + devDependencies: { + '@vitest/eslint-plugin': eslintDeps['@vitest/eslint-plugin'], + }, afterVuePlugin: [ { importer: `import pluginVitest from '@vitest/eslint-plugin'`, @@ -85,15 +87,17 @@ export function getAdditionalConfigs({ { ...pluginVitest.configs.recommended, files: ['src/**/__tests__/*'], - },` - } - ] + },`, + }, + ], }) } if (needsCypress) { additionalConfigs.push({ - devDependencies: { 'eslint-plugin-cypress': eslintDeps['eslint-plugin-cypress'] }, + devDependencies: { + 'eslint-plugin-cypress': eslintDeps['eslint-plugin-cypress'], + }, afterVuePlugin: [ { importer: "import pluginCypress from 'eslint-plugin-cypress/flat'", @@ -104,21 +108,23 @@ export function getAdditionalConfigs({ ${[ ...(needsCypressCT ? ["'**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',"] : []), 'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', - 'cypress/support/**/*.{js,ts,jsx,tsx}' + 'cypress/support/**/*.{js,ts,jsx,tsx}', ] .map(JSON.stringify.bind(JSON)) .join(',\n ') .replace(/"/g, "'" /* use single quotes as in the other configs */)} ], - },` - } - ] + },`, + }, + ], }) } if (needsPlaywright) { additionalConfigs.push({ - devDependencies: { 'eslint-plugin-playwright': eslintDeps['eslint-plugin-playwright'] }, + devDependencies: { + 'eslint-plugin-playwright': eslintDeps['eslint-plugin-playwright'], + }, afterVuePlugin: [ { importer: "import pluginPlaywright from 'eslint-plugin-playwright'", @@ -126,9 +132,9 @@ export function getAdditionalConfigs({ { ...pluginPlaywright.configs['flat/recommended'], files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'], - },` - } - ] + },`, + }, + ], }) } diff --git a/utils/renderTemplate.ts b/utils/renderTemplate.ts index 4a842289..7980d8f0 100644 --- a/utils/renderTemplate.ts +++ b/utils/renderTemplate.ts @@ -84,7 +84,7 @@ function renderTemplate(src, dest, callbacks) { // Though current `getData` are all sync, we still retain the possibility of async dataStore[dest] = await getData({ - oldData: dataStore[dest] || {} + oldData: dataStore[dest] || {}, }) }) diff --git a/utils/sortDependencies.ts b/utils/sortDependencies.ts index 60d07dd4..8f8fe1e6 100644 --- a/utils/sortDependencies.ts +++ b/utils/sortDependencies.ts @@ -17,6 +17,6 @@ export default function sortDependencies(packageJson) { return { ...packageJson, - ...sorted + ...sorted, } } diff --git a/vitest.config.ts b/vitest.config.ts index 6a1eda40..4054186c 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -2,6 +2,6 @@ import { defineConfig } from 'vitest/config' export default defineConfig({ test: { - include: ['__test__/**.spec.ts'] - } + include: ['__test__/**.spec.ts'], + }, }) -- 2.39.5