feat: @nuxt/eslint integration workflow

src/commands/CSS.ts

@@ -1,6 +1,6 @@
 import { window } from 'vscode'
 import { unoCSSConfig, windiCSSConfig, tailwindCSSFile, tailwindCSSJSConfig, tailwindCSSTSConfig, vuetifyConfigFile } from '../templates'
-import { isNuxtTwo, createFile, projectSrcDirectory, runCommand, openExternalLink, addNuxtModule, getInstallationCommand, projectRootDirectory } from '../utils'
+import { isNuxtTwo, createFile, projectSrcDirectory, runCommand, openExternalLink, updateNuxtConfig, getInstallationCommand, projectRootDirectory } from '../utils'
 
 const frameworks = ['TailwindCSS', 'WindiCSS', 'UnoCSS', 'Vuetify']
 
@@ -76,7 +76,7 @@ const configureTailwind = () => {
  successMessage: 'TailwindCSS Module installed successfully',
  errorMessage: 'TailwindCSS Module installation failed',
  })
- await addNuxtModule(moduleName)
+ await updateNuxtConfig('add-module', moduleName)
  }
 
  if (selections.includes(TailwindOptions.createTailwindCSSFile)) {
@@ -136,7 +136,7 @@ const configureWindi = async () => {
  errorMessage: 'WindiCSS installation failed',
  })
 
- await addNuxtModule(moduleName)
+ await updateNuxtConfig('add-module', moduleName)
  }
 
  if (selections.includes(WindiOptions.createConfigFile)) {
@@ -184,7 +184,7 @@ const configureUno = async () => {
  errorMessage: 'UnoCSS installation failed',
  })
 
- await addNuxtModule(moduleName)
+ await updateNuxtConfig('add-module', moduleName)
  }
 
  if (selections.includes(UnoCSSOptions.createConfigFile)) {
@@ -232,7 +232,7 @@ const configureVuetify = async () => {
  errorMessage: 'Vuetify installation failed',
  })
 
- await addNuxtModule(moduleName)
+ await updateNuxtConfig('add-module', moduleName)
  }
 
  if (selections.includes(VuetifyOptions.createConfigFile)) {

src/commands/Linters.ts

@@ -1,15 +1,9 @@
-import { window } from 'vscode'
+import { window, workspace, ConfigurationTarget } from 'vscode'
 import { writeFileSync } from 'node:fs'
-import { createFile, projectRootDirectory, runCommand, getInstallationCommand } from '../utils'
-import { eslintConfig, eslintIgnore, stylelintConfig, stylelintIgnore } from '../templates'
+import { createFile, projectRootDirectory, runCommand, getInstallationCommand, injectPkgJSONScript, openExternalLink, updateNuxtConfig} from '../utils'
+import { eslintConfig, stylelintConfig, stylelintIgnore } from '../templates'
 const frameworks = ['Eslint', 'Stylelint']
 
-enum EslintOptions {
- installModule = 'Install Eslint module',
- addScriptToPackageJSON = 'Add lint script to package.json',
- createESLintAndIgnoreFiles = 'Create .eslintrc & .eslintignore files',
-}
-
 enum StylelintOptions {
  installModule = 'Install Stylelint & Stylelint module',
  addScriptToPackageJSON = 'Add lint script to package.json',
@@ -33,59 +27,66 @@ function configureLinters() {
  })
 }
 
-const configureEslint = () => {
- try {
- const eslintOptions = Object.values(EslintOptions)
-
- window
- .showQuickPick(eslintOptions, {
- canPickMany: true,
- placeHolder: 'Select files to create',
- })
- .then(async (selections) => {
- if (selections !== undefined && selections.length > 0) {
- if (selections.includes(EslintOptions.installModule)) {
- const moduleName = '@nuxtjs/eslint-config-typescript eslint'
- const command = await getInstallationCommand(moduleName, true)
-
- await runCommand({
- command,
- message: 'Installing Eslint module',
- successMessage: 'Eslint installed successfully',
- errorMessage: 'Eslint installation failed',
- })
- }
-
- if (selections.includes(EslintOptions.addScriptToPackageJSON)) {
- const packageJsonPath = `${projectRootDirectory()}/package.json`
- const packageJson = require(packageJsonPath)
-
- packageJson.scripts.lint = 'eslint --ext .js,.vue,.ts,.tsx --ignore-path .gitignore .'
-
- writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8')
- }
-
- if (selections.includes(EslintOptions.createESLintAndIgnoreFiles)) {
- const eslintPath = `${projectRootDirectory()}/.eslintrc`
- const eslintIgnorePath = `${projectRootDirectory()}/.eslintignore`
-
- await createFile({
- fileName: `.eslintignore`,
- content: eslintIgnore,
- fullPath: eslintIgnorePath,
- })
-
- await createFile({
- fileName: `.eslintrc`,
- content: eslintConfig,
- fullPath: eslintPath,
- })
- }
- }
- })
- } catch (error) {
- console.error(error)
+const configureEslint = async () => {
+ const packages = { eslint: 'eslint', module: '@nuxt/eslint', }
+ const eslintCommand = await getInstallationCommand(packages.eslint, true)
+ const moduleCommand = await getInstallationCommand(packages.module, true)
+ const devServerCheckerCommand = await getInstallationCommand('vite-plugin-eslint2', true)
+
+ await runCommand({
+ command: eslintCommand,
+ message: `Installing Eslint`,
+ successMessage: 'Eslint installed successfully',
+ errorMessage: 'Eslint installation failed',
+ })
+
+ await runCommand({
+ command: moduleCommand,
+ message: `Installing ${packages.module} module`,
+ successMessage: `${packages.module} installed successfully`,
+ errorMessage: `${packages.module} installation failed`,
+ docsURL: 'https://eslint.nuxt.com'
+ })
+
+ await updateNuxtConfig('add-module', '@nuxt/eslint')
+
+
+ const scriptName = 'lint'
+ const script = 'eslint .'
+ await injectPkgJSONScript(scriptName, script)
+
+ await createFile({
+ fileName: `eslint.config.mjs`,
+ content: eslintConfig,
+ fullPath: `${projectRootDirectory()}/eslint.config.mjs`
+ })
+
+ const config = workspace.getConfiguration('eslint')
+ config.update('experimental.useFlatConfig', true, ConfigurationTarget.Workspace)
+ window.showInformationMessage('Eslint useFlagConfig enabled successfully')
+
+
+ const devServerChecker = await window.showInformationMessage(
+ 'Eslint configured successfully, do you want to configure Dev Server Checker?',
+ 'Yes',
+ 'Learn More'
+ )
+
+ if (devServerChecker === 'Yes') {
+ await runCommand({
+ command: devServerCheckerCommand,
+ message: `Installing vite-plugin-eslint2 module`,
+ successMessage: `vite-plugin-eslint2 installed successfully`,
+ errorMessage: `vite-plugin-eslint2 installation failed`,
+ })
+
+ await updateNuxtConfig('inject-eslint-devChcker')
+ }
+
+ if (devServerChecker === 'Learn More') {
+ openExternalLink('https://eslint.nuxt.com/packages/module#dev-server-checker')
  }
+
 }
 
 const configureStylelint = () => {

src/commands/Store.ts

@@ -8,7 +8,7 @@ import {
  isModuleConfigured,
  getInstallationCommand,
  runCommand,
- addNuxtModule,
+ updateNuxtConfig,
  isDependencyInstalled
 } from '../utils'
 import { vuexContent } from '../templates'
@@ -31,7 +31,7 @@ async function detectPiniaModule() {
  }
 
  if (!isConfigured) {
- await addNuxtModule(moduleName)
+ await updateNuxtConfig('add-module', moduleName)
  }
 
 }

src/sideBar/index.ts

@@ -13,7 +13,7 @@ import {
  getProjectScripts,
  newTerminal,
  detectPackageManagerByName,
- addNuxtModule,
+ updateNuxtConfig,
  removeNuxtModule,
  getInstallationCommand,
  getOutdatedPackages,
@@ -269,7 +269,7 @@ export class ModulesView implements vscode.WebviewViewProvider {
  }
 
  private async addNuxtModule(module: any) {
- await addNuxtModule(module)
+ await updateNuxtConfig('add-module', module)
  .then(async () => {
  this.postMessage({
  command: 'moduleInstalled',

src/templates/index.ts

@@ -1,4 +1,4 @@
-import { eslintConfig, stylelintConfig, stylelintIgnore, eslintIgnore } from './linters'
+import { eslintConfig, stylelintConfig, stylelintIgnore } from './linters'
 import { unoCSSConfig, windiCSSConfig, tailwindCSSJSConfig, tailwindCSSTSConfig, tailwindCSSFile, vuetifyConfigFile } from './css'
 import {
  nitroDefaultTemplate,
@@ -24,7 +24,6 @@ export {
  eslintConfig,
  stylelintConfig,
  stylelintIgnore,
- eslintIgnore,
  nitroDefaultTemplate,
  nuxtMiddlewareTemplate,
  composableTemplate,

src/templates/linters.ts

@@ -1,6 +1,9 @@
-const eslintConfig = `{
- "extends": ["@nuxtjs/eslint-config-typescript"]
-}
+const eslintConfig = `// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+ // Your custom configs here
+)
 `
 
 const stylelintConfig = `{
@@ -10,12 +13,5 @@ const stylelintConfig = `{
 
 const stylelintIgnore = `node_modules`
 
-const eslintIgnore = `dist
-node_modules
-schema
-**/*.tmpl.*
-sw.js
-`
-
 
-export { eslintConfig, stylelintConfig, stylelintIgnore, eslintIgnore }
+export { eslintConfig, stylelintConfig, stylelintIgnore }

src/utils/index.ts

@@ -12,14 +12,14 @@ import {
 } from './global'
 
 import {
- addNuxtModule,
  removeNuxtModule,
  getNuxtVersion,
  isNuxtTwo,
  hasServerDir,
  findNuxtConfig,
  isNuxtProject,
- isModuleConfigured
+ isModuleConfigured,
+ updateNuxtConfig,
 } from './nuxt'
 
 import {
@@ -45,6 +45,8 @@ import { removePackage, managePackageVersion } from './dependency'
 
 import { createConfigWatcher } from './watchers'
 
+import { injectPkgJSONScript } from './pkgJSON'
+
 export {
  openExternalLink,
  getProjectDependencies,
@@ -72,7 +74,6 @@ export {
  newTerminal,
  getNonce,
  getUri,
- addNuxtModule,
  removeNuxtModule,
  runCommand,
  logger,
@@ -90,5 +91,7 @@ export {
  openFolder,
  quickOpenButtons,
  isModuleConfigured,
- isDependencyInstalled
+ isDependencyInstalled,
+ injectPkgJSONScript,
+ updateNuxtConfig,
 }