ESLint config for Nuxt projects with flat config support and extensive customization options
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Primary function for creating Nuxt-optimized ESLint configurations with extensive customization options and automatic feature detection.
Creates an array of ESLint flat configs for Nuxt 3 projects with intelligent defaults and extensive customization options.
/**
* Create an array of ESLint flat configs for Nuxt 3, based on the given options.
* Accepts appending user configs as rest arguments from the second argument.
*
* For Nuxt apps, it's recommended to use @nuxt/eslint module instead.
* @param options - Configuration options for features and directories
* @param userConfigs - Additional user-provided configurations to append
* @returns FlatConfigComposer for further configuration chaining
*/
function createConfigForNuxt(
options?: NuxtESLintConfigOptions,
...userConfigs: ResolvableFlatConfig[]
): FlatConfigComposer;
interface NuxtESLintConfigOptions {
/** Feature configuration options */
features?: NuxtESLintFeaturesOptions;
/** Directory structure configuration */
dirs?: DirectoriesConfig;
}Usage Examples:
import { createConfigForNuxt } from "@nuxt/eslint-config";
// Minimal configuration with all defaults
export default createConfigForNuxt();
// Enable TypeScript with strict rules
export default createConfigForNuxt({
features: {
typescript: {
strict: true,
tsconfigPath: "./tsconfig.json"
}
}
});
// Full-featured configuration
export default createConfigForNuxt({
features: {
standalone: true,
typescript: true,
stylistic: {
indent: 2,
quotes: "single",
semi: false
},
tooling: {
jsdoc: true,
unicorn: true,
regexp: true
},
formatters: {
css: "prettier",
html: "prettier",
markdown: "dprint"
},
import: {
package: "eslint-plugin-import-x"
}
},
dirs: {
src: ["./src", "./app"],
components: ["./src/components", "./components"],
pages: ["./src/pages", "./pages"]
}
},
// Additional custom rules
{
rules: {
"no-console": "warn",
"prefer-const": "error"
}
});Comprehensive configuration interface for enabling/disabling and customizing various ESLint features.
interface NuxtESLintFeaturesOptions {
/**
* Setup basic JavaScript, TypeScript and Vue plugins and rules.
* You might want to disable it when using other ESLint config that handles basic setup.
* @default true
*/
standalone?: boolean;
/**
* Enable rules for Nuxt module authors or library authors.
* @experimental Changes might not follow semver
* @default false
*/
tooling?: boolean | ToolingOptions;
/**
* Enable the import plugin
* @default true
*/
import?: boolean | ImportPluginOptions;
/**
* Enable stylistic ESLint rules for formatting and code style check
* @see https://eslint.style/guide/config-presets
* @default false
*/
stylistic?: boolean | StylisticCustomizeOptions;
/**
* Enable formatters to handle formatting for different file types.
* Requires eslint-plugin-format to be installed.
* @default false
*/
formatters?: boolean | OptionsFormatters;
/**
* Options for Nuxt specific rules
*/
nuxt?: NuxtSpecificOptions;
/**
* Enable TypeScript support. Can also be an object to config the options.
* By default it enables automatically when typescript is installed in the project.
*/
typescript?: boolean | TypeScriptOptions;
}
interface ToolingOptions {
/**
* Enable RegExp rules
* @see https://github.com/ota-meshi/eslint-plugin-regexp
* @default true
*/
regexp?: boolean;
/**
* Enable Unicorn rules
* @see https://github.com/sindresorhus/eslint-plugin-unicorn
* @default true
*/
unicorn?: boolean;
/**
* Enable jsdoc rules
* @default true
*/
jsdoc?: boolean;
}
interface TypeScriptOptions {
/**
* Enable strict rules
* @see https://typescript-eslint.io/users/configs#strict
* @default true
*/
strict?: boolean;
/**
* Path to the tsconfig file, when this is provided, type-aware rules will be enabled.
*/
tsconfigPath?: string;
}Configure directory structure for Nuxt project organization and rule application.
interface DirectoriesConfig {
/** Nuxt source directory */
src?: string[];
/** Root directory for nuxt project */
root?: string[];
/** Directory for pages */
pages?: string[];
/** Directory for layouts */
layouts?: string[];
/** Directory for components */
components?: string[];
/** Directory for components with prefix (ignores vue/multi-word-component-names) */
componentsPrefixed?: string[];
/** Directory for composables */
composables?: string[];
/** Directory for plugins */
plugins?: string[];
/** Directory for modules */
modules?: string[];
/** Directory for middleware */
middleware?: string[];
/** Directory for server */
servers?: string[];
}Usage Examples:
// Custom directory structure
export default createConfigForNuxt({
dirs: {
root: ["."],
src: ["./src"],
pages: ["./src/pages"],
components: ["./src/components", "./src/ui"],
composables: ["./src/composables", "./src/utils"],
plugins: ["./src/plugins"],
middleware: ["./src/middleware"],
servers: ["./src/server"]
}
});
// Multi-app setup
export default createConfigForNuxt({
dirs: {
root: ["./apps/web", "./apps/admin"],
src: ["./apps/web/src", "./apps/admin/src"],
components: ["./shared/components", "./apps/*/components"]
}
});Configuration options specific to Nuxt projects and development patterns.
interface NuxtSpecificOptions {
/**
* Sort keys in nuxt.config to maintain a consistent order
* @default true when features.stylistic is enabled
*/
sortConfigKeys?: boolean;
}Configuration for the import/export linting plugin with support for different implementations.
interface ImportPluginOptions {
/**
* The import plugin to use
* @default 'eslint-plugin-import-x'
*/
package?: 'eslint-plugin-import-lite' | 'eslint-plugin-import-x';
}Install with Tessl CLI
npx tessl i tessl/npm-nuxt--eslint-config