### Example Error Message for Installation Failures Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md This is an example of a message displayed to the user when package installation fails. It prompts manual installation and provides the configuration path for disabling the feature. ```text Please, install the package or set vue.a11y: false in your eslint.config.mjs ``` -------------------------------- ### Example Messages for Package Installation/Upgrade Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md Shows different messages generated by getActionMessage, indicating whether packages need to be installed, upgraded, or a combination of both. It also displays current versions or if a package is not installed. ```typescript We need to install eslint, eslint-config-vuetify. We need to upgrade eslint. (Currently: eslint: 8.0.0 ) We need to install eslint and upgrade eslint-config-vuetify. (Currently: eslint: not installed eslint-config-vuetify: 3.0.0 ) ``` -------------------------------- ### Welcome Message Example Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md Displays a welcome message when the CLI tool starts. It highlights package names using blue ANSI color codes. ```typescript const description = `Welcome to ${blue(ESLINT_CONFIG)} — an opinionated ESLint config by the ${blue(LINKS[VUETIFY])} team.` ``` -------------------------------- ### hasPackage Helper Function Example Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/09-schema-validation.md Demonstrates the usage of the hasPackage helper function to check for installed packages like Vue or TypeScript. ```typescript hasPackage('vue') // true if Vue 3 or @vue/compat installed hasPackage('typescript') // true if TypeScript installed ``` -------------------------------- ### Run ESLint Config Vuetify CLI Setup Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/README.md Use this command to interactively set up ESLint for your project. It detects missing packages, offers to install ESLint and the config, creates the eslint.config.js file, and adds lint scripts to package.json. ```bash npx eslint-config-vuetify ``` -------------------------------- ### Direct Import Example Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/11-architecture.md Shows how to import the main configuration and CLI module directly from the ESLint Config Vuetify package after installation. This demonstrates the usage of the package's defined exports. ```typescript import vuetify from 'eslint-config-vuetify' import { main } from 'eslint-config-vuetify/cli' ``` -------------------------------- ### Install import-x Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Install the eslint-plugin-import-x for advanced import statement validation. ```bash npm install -D eslint-plugin-import-x ``` -------------------------------- ### Get Installed Package Version Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Retrieves the version string of an installed package. Returns undefined if the package is not found. ```typescript const version = getPackageVersion('eslint') // Returns: "9.5.0" or similar ``` -------------------------------- ### Install eslint-config-vuetify Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/README.md Install the package as a development dependency using npm or pnpm. ```bash npm install -D eslint-config-vuetify # or pnpm add -D eslint-config-vuetify ``` -------------------------------- ### assertPackage Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Ensures a required package is installed, prompting for installation if missing. This function helps maintain project dependencies and guides users through setup. ```APIDOC ## assertPackage ### Description Ensures a required package is installed. Prompts for installation if missing. ### Signature ```typescript async function assertPackage(pkg: string, setting?: string): Promise ``` ### Parameters - **pkg** (`string`) - Required - Required package name - **setting** (`string`) - Optional - Optional config option path (e.g., 'vue.a11y: false') ### Return Type `Promise` ### Behavior 1. Checks if package is installed 2. If missing: - In CI or non-TTY: Silently returns - Interactively: Prompts user to install 3. If user agrees: Installs package via npm/pnpm/yarn 4. If user declines: Shows config option hint and exits with code 1 ### Usage ```typescript await assertPackage('typescript') await assertPackage('eslint-plugin-vuejs-accessibility', 'vue.a11y: false') ``` ``` -------------------------------- ### Install Vitest ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Install the @vitest/eslint-plugin for Vitest-specific linting rules. ```bash npm install -D @vitest/eslint-plugin ``` -------------------------------- ### hasFile Helper Function Example Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/09-schema-validation.md Demonstrates the usage of the hasFile helper function to check for the existence of project configuration files. ```typescript hasFile('.gitignore') // true if .gitignore exists hasFile('package.json') // true if package.json exists ``` -------------------------------- ### Install Jest ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Install the eslint-plugin-jest for Jest-specific linting rules. ```bash npm install -D eslint-plugin-jest ``` -------------------------------- ### buildConfig with Mixed Options and User Configurations Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/01-main-api.md Combine explicit configuration options with additional user-provided ESLint configurations for a flexible setup. ```javascript import vuetify from 'eslint-config-vuetify' // Mixed: options and additional configs export default vuetify( { vue: true }, { plugins: { custom: customPlugin }, rules: { 'custom/rule': 'error' } } ) ``` -------------------------------- ### Ensure Package is Installed Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Ensures a required package is installed, prompting the user for installation if it's missing. Handles CI/non-TTY environments by returning silently. ```typescript await assertPackage('typescript') await assertPackage('eslint-plugin-vuejs-accessibility', 'vue.a11y: false') ``` -------------------------------- ### Install ESLint Config Vuetify Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/README.md Install the eslint-config-vuetify package as a development dependency using npm, yarn, pnpm, bun, or deno. ```sh # npm npm install -D eslint-config-vuetify # yarn yarn add -D eslint-config-vuetify # pnpm pnpm install -D eslint-config-vuetify # bun bun install -D eslint-config-vuetify # deno deno install --dev eslint-config-vuetify ``` -------------------------------- ### Install no-only-tests ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Install the eslint-plugin-no-only-tests to prevent .only() from being committed in tests. ```bash npm install -D eslint-plugin-no-only-tests ``` -------------------------------- ### Monorepo Setup with pnpm Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/README.md Configure ESLint for a monorepo using pnpm, enforcing catalog and setting TypeScript presets. This is useful for managing complex project structures. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ pnpm: { enforceCatalog: true }, ts: { preset: 'recommended' }, }) ``` -------------------------------- ### Install Vue Accessibility ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Install the eslint-plugin-vuejs-accessibility for Vue accessibility linting rules. ```bash npm install -D eslint-plugin-vuejs-accessibility ``` -------------------------------- ### Modular Configuration Function Signature Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/11-architecture.md Example signature for a modular configuration builder function. It accepts options and returns an array of configuration items. ```typescript export function vue(options: Options['vue'], tsOptions: Options['ts']): Promise ``` -------------------------------- ### Negation Pattern Example in ESLint Config Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Demonstrates how to use negation patterns (prefixed with '!') in an ESLint configuration to include specific files while excluding others. This is useful for fine-tuning which files are processed. ```javascript // Include all .ts files except tests { files: ['**/*.ts', '!**/*.test.ts'] } ``` -------------------------------- ### BasePackageJson Interface Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/04-types.md Defines the minimal structure for a package.json file, used by the CLI setup tool. It includes essential fields like name, version, and optional fields for description, license, repository, scripts, and dependencies. ```typescript interface BasePackageJson { name: string version: string description?: string license?: string repository?: string bugs?: string homepage?: string scripts?: Record dependencies?: Record devDependencies?: Record peerDependencies?: Record optionalDependencies?: Record } ``` -------------------------------- ### Conditionally Enable Features Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Enable or disable ESLint features like Vue or testing support based on project setup. This example shows conditional loading based on boolean flags. ```javascript import vuetify from 'eslint-config-vuetify' const hasVue = true // Check if Vue is used const hasTests = true // Check if tests exist export default vuetify({ vue: hasVue, test: hasTests, ts: true, }) ``` -------------------------------- ### Extending with Additional Configurations Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/README.md Provide additional ESLint configurations, including plugins and rules, after the options object for more complex setups. ```js import vuetify from 'eslint-config-vuetify' export default vuetify( { pnpm: false, }, { plugins: { sonarjs, }, rules: { ...sonarjs.configs.recommended.rules, }, }, ) ``` -------------------------------- ### getPackageVersion Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Retrieves the version string of an installed package. This can be used for logging, conditional logic, or displaying version information. ```APIDOC ## getPackageVersion ### Description Retrieves the version string of an installed package. ### Signature ```typescript function getPackageVersion(pkg: string): string | undefined ``` ### Parameters - **pkg** (`string`) - Required - Package name ### Return Type `string | undefined` — Version string or undefined if not found ### Usage ```typescript const version = getPackageVersion('eslint') // Returns: "9.5.0" or similar ``` ``` -------------------------------- ### hasPackage Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Checks if a package is installed in the project or a specified scope. This is useful for conditional configuration based on project dependencies. ```APIDOC ## hasPackage ### Description Checks if a package is installed in the project or specified scope. ### Signature ```typescript function hasPackage(pkg: string, scope?: string): boolean ``` ### Parameters - **pkg** (`string`) - Required - Package name (with optional @scope) - **scope** (`string`) - Optional - Optional path to search in ### Return Type `boolean` — true if package is installed ### Usage ```typescript hasPackage('typescript') hasPackage('eslint', '/workspace') hasPackage('@types/node') ``` ``` -------------------------------- ### Runtime Package Check Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/11-architecture.md This snippet demonstrates a runtime check for an optional peer dependency, prompting the user for installation if it's missing. It's used to conditionally enable features like Jest support. ```typescript await assertPackage('eslint-plugin-jest', 'test: false') ``` -------------------------------- ### Integrate Custom ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Incorporate third-party ESLint plugins alongside Vuetify's rules. This example shows how to add a custom plugin and configure its rules. ```javascript import vuetify from 'eslint-config-vuetify' import customPlugin from 'eslint-plugin-custom' export default vuetify( { vue: true }, { plugins: { custom: customPlugin }, rules: { 'custom/rule-name': 'error', }, } ) ``` -------------------------------- ### Augment Another Vue ESLint Config Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Integrate eslint-config-vuetify with an existing ESLint configuration. This example shows how to merge Vuetify's settings with custom rules defined in a separate file. ```javascript import vuetify from 'eslint-config-vuetify' // Keep existing rules not covered by vuetify import otherRules from './rules.js' export default vuetify( { vue: true, ts: true }, otherRules ) ``` -------------------------------- ### Configuration Building Flow Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/11-architecture.md Illustrates the data flow for building ESLint configurations, from user input to the final FlatConfigComposer. ```text User Input (Options | ESLint Config) ↓ getFirstConfigType() — Determine input type ↓ validateOptions() — Validate and auto-detect ↓ buildConfig() — Compose modular configs ├─ js() ├─ ts() ├─ vue() ├─ stylistic() ├─ imports() ├─ perfectionist() ├─ test() ├─ ignore() ├─ gitignore() ├─ pnpm() ├─ autoimports() ├─ unicorn() ├─ regexp() └─ antfu() ↓ concat() — Flatten arrays of config items ↓ composer() — Create FlatConfigComposer ↓ Apply editor mode adjustments if needed ↓ Return Promise ``` -------------------------------- ### Import ESLint Recommended Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the ESLint recommended rules configuration. Applied in the `js()` config as a foundation. ```typescript import eslint from '@eslint/js' ``` -------------------------------- ### Auto-imports Configuration: From File Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Load auto-import configurations from a specified file. This centralizes auto-import settings for better management. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ autoimports: { src: '.eslintrc-auto-import', }, }) ``` -------------------------------- ### Basic Usage of buildConfig Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/01-main-api.md Use this snippet for basic ESLint configuration with auto-detected settings. ```javascript import vuetify from 'eslint-config-vuetify' // Basic usage with auto-detection export default vuetify() ``` -------------------------------- ### Check for Installed Package Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Checks if a package is installed in the current project or a specified scope. Useful for conditional logic based on project dependencies. ```typescript hasPackage('typescript') hasPackage('eslint', '/workspace') hasPackage('@types/node') ``` -------------------------------- ### Migrate from ESLint 8 to ESLint 9+ Flat Config Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Shows the transition from the legacy ESLint 8 configuration format (using `extends`) to the new ESLint 9+ flat configuration format. ```javascript // Old (ESLint 8 legacy format) module.exports = { extends: ['eslint-config-vuetify'], } // New (ESLint 9+ flat config) import vuetify from 'eslint-config-vuetify' export default vuetify() ``` -------------------------------- ### Import Unicorn Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the eslint-plugin-unicorn for enforcing best practices and preventing common pitfalls. Applied in the `unicorn()` config. ```typescript import { default as unicornVendor } from 'eslint-plugin-unicorn' ``` -------------------------------- ### test Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Enables testing framework-specific rules for Vitest or Jest. It auto-detects the runner based on installed packages and applies relevant rules. ```APIDOC ## test ### Description Enables testing framework-specific rules for Vitest or Jest. ### Signature ```typescript async function test(options: Options['test'] = true): Promise ``` ### Parameters #### Path Parameters - **options** (boolean | { files?, runner? }) - Required - Configuration for test rules. Defaults to true. ### Return Type `Promise` ### Runner Detection - `'vitest'`: Uses @vitest/eslint-plugin - `'jest'`: Uses eslint-plugin-jest - Auto-detected based on installed packages ### Test Glob Patterns - `**/__tests__/**/*.{js,ts,jsx,tsx,mjs,cjs}` - `**/*.spec.{js,ts,jsx,tsx,mjs,cjs}` - `**/*.test.{js,ts,jsx,tsx,mjs,cjs}` - `**/*.bench.{js,ts,jsx,tsx,mjs,cjs}` - `**/*.benchmark.{js,ts,jsx,tsx,mjs,cjs}` ### Vitest Rules - no-only-tests: error - Vitest recommended rules ### Jest Rules - jest/no-disabled-tests: warn - jest/no-focused-tests: error - jest/no-identical-title: error - jest/prefer-to-have-length: warn - jest/valid-expect: error - no-only-tests: error ``` -------------------------------- ### Test Configuration Function Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Enables testing framework-specific rules for Vitest or Jest. It auto-detects the runner based on installed packages and applies relevant rules. ```typescript async function test(options: Options['test'] = true): Promise ``` -------------------------------- ### Import Antfu Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the eslint-plugin-antfu for code quality rules by Anthony Fu. Applied in the `antfu()` config. ```typescript import { default as antfuPlugin } from 'eslint-plugin-antfu' ``` -------------------------------- ### Stylistic Schema Definition Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/09-schema-validation.md Defines the schema for Stylistic options, supporting boolean or an object with `files` and `severity` properties. Defaults to auto-detecting TypeScript installation. ```typescript const stylisticSchema = v.exactOptional( v.union([ v.boolean(), v.object({ files: v.exactOptional(v.array(v.string())), severity: v.exactOptional(v.union([v.literal('error'), v.literal('warn')])) }), ]), hasPackage('typescript'), ) ``` -------------------------------- ### Import import-x Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the import-x ESLint plugin as an alternative to import-lite. ```typescript const selectedPlugin = await import('eslint-plugin-import-x') ``` -------------------------------- ### Vue Schema Definition Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/09-schema-validation.md Defines the schema for Vue options, accepting boolean or an object with `files` and `a11y` properties. Defaults to auto-detecting Vue installation. ```typescript const vueSchema = v.exactOptional( v.union([ v.boolean(), v.object({ files: v.exactOptional(v.array(v.string())), a11y: v.exactOptional(v.boolean()), }), ]), hasPackage('vue') || hasPackage('@vue/compat'), ) ``` -------------------------------- ### Package Version Variables Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md These TypeScript variables retrieve and check the installed versions of ESLint and eslint-config-vuetify, along with flags indicating their presence and version validity. ```typescript const eslintVersion = getPackageVersion(ESLINT) ?? '0.0.0' const configVersion = getPackageVersion(ESLINT_CONFIG) ?? '0.0.0' const hasEslint = hasPackage(ESLINT) const hasEslintConfig = hasPackage(ESLINT_CONFIG) const isEslintVersionValid = isVersionAtLeast(eslintVersion, '9.5.0') const isConfigVersionValid = isVersionAtLeast(configVersion, '4.0.0') ``` -------------------------------- ### Import Organization with import-x Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Utilize the more feature-rich import-x plugin for import organization instead of the default import-lite. Provides advanced import management. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ imports: { plugin: 'import-x', }, }) ``` -------------------------------- ### TypeScript Schema Definition Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/09-schema-validation.md Defines the schema for TypeScript options, supporting boolean or an object with `files`, `preset`, `projectService`, and `tsconfigRootDir`. Defaults to auto-detecting TypeScript installation. ```typescript const typescriptSchema = v.exactOptional( v.union([ v.boolean(), v.object({ files: v.exactOptional(v.array(v.string())), preset: v.exactOptional(tsPresets, 'recommended'), projectService: v.exactOptional(v.boolean()), tsconfigRootDir: v.exactOptional(v.string()), }), ]), hasPackage('typescript'), ) ``` -------------------------------- ### Configure Auto-Imports with Globals Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/02-options-schema.md Enable auto-import configuration. Load settings from a specified file path or provide a globals object directly for custom auto-import definitions. ```typescript { autoimports: true } ``` ```typescript { autoimports: { src: '.eslintrc-auto-import' } } ``` ```typescript { autoimports: { src: { globals: { Vue: 'readonly', defineComponent: 'readonly' } } } } ``` -------------------------------- ### Progressive TypeScript Type Checking Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Implement progressive TypeScript type checking by starting with a permissive preset and gradually tightening it. This allows for incremental improvements in type safety. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ ts: { preset: 'recommended', // Start permissive projectService: false, // No type checking yet }, }) // Later, upgrade to: // preset: 'recommendedTypeChecked', // projectService: true, ``` -------------------------------- ### Recommended TypeScript Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Use a balanced set of TypeScript rules without the overhead of full type checking. This provides good linting coverage. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ ts: { preset: 'recommended', }, }) ``` -------------------------------- ### Run ESLint Config Vuetify with package managers Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md These commands demonstrate how to run the ESLint Config Vuetify CLI directly using different package managers like pnpm, yarn, and npx. This is useful for one-off commands or when not using npm scripts. ```bash pnpm exec eslint-config-vuetify ``` ```bash yarn dlx eslint-config-vuetify ``` ```bash npx eslint-config-vuetify ``` -------------------------------- ### Per-package ESLint Rule Overrides Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Apply specific ESLint rules to different packages within a monorepo. This example demonstrates setting distinct rules for 'ui' and 'core' packages. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify( { vue: true, ts: true }, { files: ['packages/ui/**'], rules: { 'vue/require-prop-types': 'error', 'vue/require-default-prop': 'error', }, }, { files: ['packages/core/**'], rules: { '@typescript-eslint/no-unused-vars': 'warn', }, } ) ``` -------------------------------- ### File Ignoring: Replace Default Ignores Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Completely replace the default ignore patterns with your own list. Useful for projects with unique build or distribution directories. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ ignore: { ignore: ['dist/**', 'build/**', 'node_modules/**'], }, }) ``` -------------------------------- ### Import Stylistic Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the @stylistic/eslint-plugin for code formatting and style rules. Applied in the `stylistic()` config. ```typescript import { default as stylisticPlugin } from '@stylistic/eslint-plugin' ``` -------------------------------- ### buildConfig with Explicit Options Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/01-main-api.md Configure specific features like Vue, TypeScript presets, stylistic rules, and package manager support by providing an options object. ```javascript import vuetify from 'eslint-config-vuetify' // With explicit options export default vuetify({ vue: true, ts: { preset: 'all' }, stylistic: true, pnpm: false, }) ``` -------------------------------- ### buildConfig Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/01-main-api.md The main entry point for creating an ESLint flat config. It accepts optional configuration options and merges them with additional user-provided configurations to generate a composed ESLint configuration. ```APIDOC ## buildConfig ### Description The main entry point for creating an ESLint flat config composed of multiple sub-configs. Accepts configuration options and merges them with additional user-provided configurations. ### Method `buildConfig` ### Parameters #### Optional Parameters - **maybeOptions** (`Options | TypedFlatConfigItem`) - Optional - `{}` - Configuration options object or an ESLint flat config item - **userConfigs** (`Awaitable>[]`) - Optional - `—` - Additional ESLint flat configurations to merge ### Return Type `Promise>` A promise that resolves to a FlatConfigComposer instance with composed ESLint configurations. ### Behavior 1. Validates the input to determine if it's an options object or raw ESLint config 2. Validates options against the schema 3. Conditionally includes configuration modules based on enabled options: JavaScript/TypeScript rules via `js()`, `ts()`, `vue()`; Import sorting via `perfectionist()` and `imports()`; Code style via `stylistic()`; File linting via `jsonc()` (JSON/JSONC); Testing via `test()`; Additional plugins: `autoimports()`, `unicorn()`, `regexp()`, `antfu()`; File ignoring via `ignore()` and `gitignore()`; Package management via `pnpm()` 4. Auto-detects package manager (defaults to pnpm if detected) 5. If in editor mode, disables auto-fix for specific rules 6. Returns composed configuration ready for use in `eslint.config.js` ### Throws Validation errors from Valibot schema validation if options are invalid. ### Usage Example ```javascript import vuetify from 'eslint-config-vuetify' // Basic usage with auto-detection export default vuetify() // With explicit options export default vuetify({ vue: true, ts: { preset: 'all' }, stylistic: true, pnpm: false, }) // With additional user configs export default vuetify( { vue: true, ts: { preset: 'strict' }, }, { rules: { 'no-console': 'error', }, } ) // Mixed: options and additional configs export default vuetify( { vue: true }, { plugins: { custom: customPlugin }, rules: { 'custom/rule': 'error' } } ) ``` ``` -------------------------------- ### Running ESLint Commands Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/README.md Execute ESLint to lint files or automatically fix issues using npm scripts. ```bash # Lint all files npm run lint # Fix issues automatically npm run lint:fix ``` -------------------------------- ### Import Gitignore ESLint Config Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the gitignoreConfig function from eslint-config-flat-gitignore to integrate .gitignore patterns into ESLint. ```typescript import { default as gitignoreConfig } from 'eslint-config-flat-gitignore' ``` -------------------------------- ### Test Configuration Function Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/INDEX.md Use the `test()` function to configure ESLint for testing frameworks like Vitest or Jest. This function includes rules relevant to test files. ```javascript import { test } from "eslint-config-custom"; export default [ // Add custom config here ...test ]; ``` -------------------------------- ### Glob Patterns for Test and Benchmark Files Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches various test and benchmark file patterns including __tests__ directories, .spec, .test, .bench, and .benchmark extensions. It uses GLOB_SRC_EXT for dynamic extension matching. ```typescript export const GLOB_TESTS = [ `**/__tests__/**/*.${GLOB_SRC_EXT}`, `**/*.spec.${GLOB_SRC_EXT}`, `**/*.test.${GLOB_SRC_EXT}`, `**/*.bench.${GLOB_SRC_EXT}`, `**/*.benchmark.${GLOB_SRC_EXT}`, ] ``` -------------------------------- ### Import Vitest ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the Vitest ESLint plugin to provide Vitest globals and linting rules. ```typescript const vitestVendor = await import('@vitest/eslint-plugin') ``` -------------------------------- ### Configure Import Linting Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/02-options-schema.md Enable import sorting and validation rules. Optionally specify the import plugin to use, such as 'import-x', for enhanced linting capabilities. Use `files` to target specific import files. ```typescript { imports: true } ``` ```typescript { imports: { plugin: 'import-x' } } ``` -------------------------------- ### Monorepo Workspace Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Configure ESLint for a monorepo structure, specifically validating package.json files across multiple packages using pnpm. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ vue: true, ts: { preset: 'recommended' }, pnpm: { enforceCatalog: true, files: ['package.json', 'packages/*/package.json'], }, }) ``` -------------------------------- ### Export loadAutoImports from utils Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Demonstrates how the `loadAutoImports` function is exported from the main `utils` index file for convenient importing. ```typescript export { loadAutoImports } from './autoimports' ``` ```typescript import { loadAutoImports } from './utils' ``` -------------------------------- ### buildConfig with Additional User Configurations Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/01-main-api.md Merge custom ESLint configurations, such as specific rules, by passing them as additional arguments after the options. ```javascript import vuetify from 'eslint-config-vuetify' // With additional user configs export default vuetify( { vue: true, ts: { preset: 'strict' }, }, { rules: { 'no-console': 'error', }, } ) ``` -------------------------------- ### Vitest Testing Framework Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Configure ESLint to apply Vitest-specific rules and globals. This ensures consistency in your Vitest test files. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ test: { runner: 'vitest', }, }) ``` -------------------------------- ### Enable TypeScript Linting with Presets Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/02-options-schema.md Enable TypeScript-specific rules. Configure with a preset like 'strict' or 'strictTypeChecked', and optionally enable the TypeScript project service for type-aware linting. Specify `tsconfigRootDir` for custom tsconfig resolution. ```typescript { ts: true } ``` ```typescript { ts: { preset: 'strict', projectService: true } } ``` ```typescript { ts: { preset: 'strictTypeChecked', tsconfigRootDir: process.cwd() } } ``` -------------------------------- ### Import RegExp Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the eslint-plugin-regexp for validating and optimizing regular expressions. Applied in the `regexp()` config. ```typescript import { default as regexpVendor } from 'eslint-plugin-regexp' ``` -------------------------------- ### Import Vue ESLint Parser Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import vue-eslint-parser for parsing Vue Single File Components. ```typescript import * as vueParser from 'vue-eslint-parser' ``` -------------------------------- ### Composer Usage in BuildConfig Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Demonstrates the usage of the composer utility from eslint-flat-config-utils to create a FlatConfigComposer instance by concatenating multiple configurations. ```typescript let composed = composer(await concat(...configsToCompose)) ``` -------------------------------- ### Glob Pattern for All Source Files Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Combines patterns for JavaScript/TypeScript, styles, JSON, Vue, and YAML files. Use this to include all types of source and configuration files. ```typescript export const GLOB_ALL_SRC = [ GLOB_SRC, GLOB_STYLE, GLOB_JSON, GLOB_VUE, GLOB_YAML, ] ``` -------------------------------- ### Writing ESLint Configuration to File Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md This code snippet demonstrates the asynchronous operation of writing the generated ESLint configuration data to a file, using a detected or default filename. ```typescript await writeFile(configUrl ?? 'eslint.config.mjs', configData) ``` -------------------------------- ### Enable pnpm Workspace and Catalog Rules Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/02-options-schema.md Enables pnpm workspace and catalog rules. Can be set to true to auto-detect, or configured to enforce catalog dependencies or disabled entirely. ```typescript { pnpm: true } ``` ```typescript { pnpm: { enforceCatalog: true } } ``` ```typescript { pnpm: false } ``` -------------------------------- ### Gitignore Configuration Function Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/INDEX.md Use the `gitignore()` function to automatically load ignore patterns from your `.gitignore` file. This ensures consistency between linting and version control. ```javascript import { gitignore } from "eslint-config-custom"; export default [ // Add custom config here ...gitignore ]; ``` -------------------------------- ### Configure import-x Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Configure ESLint to use the import-x plugin for full-featured import validation. ```typescript { imports: { plugin: 'import-x', }, } ``` -------------------------------- ### TypeScript Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Applies TypeScript ESLint rules with configurable preset levels and type-aware linting. The options parameter allows for customization of presets and project service settings. ```typescript function typescript(options: Options['ts'] = true): TypedFlatConfigItem[] ``` -------------------------------- ### Options Type Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/04-types.md The complete options object accepted by buildConfig(). See Configuration Options Reference for detailed field documentation. ```typescript type Options = v.InferInput ``` -------------------------------- ### Jest Testing Framework Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Configure ESLint for Jest, applying Jest-specific rules and globals to your test files. Specify custom file patterns for Jest tests. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ test: { runner: 'jest', files: ['tests/**/*.{test,spec}.ts'], }, }) ``` -------------------------------- ### Conditional Feature Enablement in buildConfig Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/11-architecture.md Demonstrates how to conditionally include configuration modules based on user options. This allows for flexible and minimal configurations. ```typescript if (vOptions.vue) { configsToCompose.push(vue(vOptions.vue, vOptions.ts)) } ``` -------------------------------- ### Import JSONC Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the eslint-plugin-jsonc for linting JSON, JSONC, and JSON5 files. ```typescript import { default as jsoncPlugin } from 'eslint-plugin-jsonc' ``` -------------------------------- ### Import TypeScript ESLint Parser Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the @typescript-eslint/parser for parsing TypeScript syntax in ESLint. ```typescript import { default as tsParser } from '@typescript-eslint/parser' ``` -------------------------------- ### Package Manager Configuration: Enable pnpm Strict Mode Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Enforce pnpm catalog usage in monorepos by enabling 'enforceCatalog'. This ensures dependency consistency within pnpm projects. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ pnpm: { enforceCatalog: true, // Require catalog dependencies }, }) ``` -------------------------------- ### File Ignoring: Load .gitignore Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md Load ignore patterns directly from your .gitignore file. Ensures consistency between linting and Git's ignored files. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ gitignore: { sources: ['.gitignore'], }, }) ``` -------------------------------- ### Import PNPM Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the eslint-plugin-pnpm for validating pnpm workspaces and catalogs. ```typescript import { plugin as pnpmPlugin } from 'eslint-plugin-pnpm' ``` -------------------------------- ### Import Jest ESLint Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the Jest ESLint plugin to provide Jest globals and linting rules. ```typescript const jestVendor = await import('eslint-plugin-jest') ``` -------------------------------- ### Configure RegExp Rules Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Enables recommended rules from eslint-plugin-regexp to validate regular expressions. This configuration helps detect invalid regex, complex patterns, and potential performance issues. ```typescript function regexp(options: Options['regexp'] = true): TypedFlatConfigItem[] ``` -------------------------------- ### Import YAML ESLint Parser Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the yaml-eslint-parser module for parsing YAML files, commonly used for configuration files like pnpm-workspace.yaml. ```typescript import * as yamlParser from 'yaml-eslint-parser' ``` -------------------------------- ### Ignore File Configuration Function Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/INDEX.md Use the `ignore()` function to configure file and directory ignore patterns for ESLint. This prevents linting on specified files. ```javascript import { ignore } from "eslint-config-custom"; export default [ // Add custom config here ...ignore ]; ``` -------------------------------- ### Run ESLint Config Vuetify via npm scripts Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/06-cli-reference.md Execute the ESLint Config Vuetify CLI using your npm scripts. This is a common way to integrate the linter into your project's workflow. ```bash npm run eslint-config-vuetify ``` -------------------------------- ### Advanced Usage with Options Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/README.md Customize ESLint configuration by passing options to the vuetify function, such as enabling Vue and TypeScript presets. ```js import vuetify from 'eslint-config-vuetify' export default vuetify({ vue: true, ts: { preset: 'all', }, }) ``` -------------------------------- ### Import import-lite Plugin Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the eslint-plugin-import-lite for lightweight import statement validation. ```typescript const selectedPlugin = await import('eslint-plugin-import-lite') ``` -------------------------------- ### Safe Production ESLint Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/10-usage-examples.md A comprehensive ESLint configuration suitable for production environments, enabling strict type checking, stylistic rules, and import validation. ```javascript import vuetify from 'eslint-config-vuetify' export default vuetify({ js: true, ts: { preset: 'strictTypeChecked' }, vue: true, stylistic: { severity: 'warn' }, imports: true, test: true, pnpm: { enforceCatalog: true }, ignore: { extendIgnore: ['.env*'] }, }) ``` -------------------------------- ### Load Ignore Patterns from .gitignore Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/02-options-schema.md Loads ignore patterns from .gitignore files. Can be set to true to auto-detect, or specify custom paths for .gitignore and .gitmodules files. ```typescript { gitignore: true } ``` ```typescript { gitignore: { sources: ['.gitignore', '.gitignore.local'] } } ``` -------------------------------- ### Import JSONC ESLint Parser Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/12-plugins-parsers.md Import the jsonc-eslint-parser module to enable parsing of JSON files with comments and trailing commas. ```typescript import * as jsoncParser from 'jsonc-eslint-parser' ``` -------------------------------- ### Glob Pattern for Vue Single File Components Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches Vue Single File Components recursively. Use this to target all .vue files. ```typescript export const GLOB_VUE = '**/*.vue' ``` -------------------------------- ### Auto-imports Configuration Function Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Loads auto-import globals configuration from a specified file or an inline object. It supports custom file paths and inline globals configuration. ```typescript function autoimports(options: Options['autoimports'] = true): TypedFlatConfigItem ``` -------------------------------- ### Configure Unicorn Rules Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Applies recommended rules from eslint-plugin-unicorn with sensible overrides. It disables rules related to filename case, null usage, number literal case, and more, promoting consistent coding practices. ```typescript function unicorn(options: Options['unicorn'] = true): TypedFlatConfigItem[] ``` -------------------------------- ### Glob Pattern for LESS Files Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches LESS stylesheet files recursively. Use this for targeting LESS files specifically. ```typescript export const GLOB_LESS = '**/*.less' ``` -------------------------------- ### imports Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/03-config-functions.md Enables import organization and validation using the import-lite or import-x plugin. It helps enforce rules like imports coming first, no duplicate imports, no mutable exports, and no named default exports. ```APIDOC ## imports ### Description Enables import organization and validation using import-lite or import-x plugin. ### Signature ```typescript async function imports(options: Options['imports'] = true): Promise ``` ### Parameters #### Path Parameters - **options** (boolean | { files?, plugin? }) - Required - Configuration for import validation. Defaults to true. ### Return Type `Promise` ### Plugin Options - `'import-lite'`: Default, lightweight import validation - `'import-x'`: Full-featured import plugin (optional peer dependency) ### Rules - Imports must come first - No duplicate imports (prefer-inline: false) - No mutable exports - No named default exports ``` -------------------------------- ### Glob Pattern for YAML and YML Files Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches YAML and YML files recursively. Useful for configuration and workflow files. ```typescript export const GLOB_YAML = '**/*.y?(a)ml' ``` -------------------------------- ### Glob Pattern for All Source Code Files Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches all source code files recursively based on common extensions. Use this to include all JS, TS, JSX, and TSX files in a project. ```typescript export const GLOB_SRC = '**/*.?([cm])[jt]s?(x)' ``` -------------------------------- ### Glob Pattern for Style Files (CSS, LESS, SCSS) Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches CSS, LESS, and SCSS files recursively. Useful for including all stylesheet types. ```typescript export const GLOB_STYLE = '**/*.{c,le,sc}ss' ``` -------------------------------- ### Vue.js Configuration Function Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/INDEX.md Use the `vue()` function to configure ESLint for Vue.js projects. This function integrates ESLint with Vue-specific rules and parsing. ```javascript import { vue } from "eslint-config-custom"; export default [ // Add custom config here ...vue ]; ``` -------------------------------- ### Load Auto-Imports Configuration Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/05-utilities.md Loads auto-import configuration, supporting loading from a file path, inline global objects, or using default behavior to find a configuration file. If options are false, it returns an empty object. ```typescript { src: '.eslintrc-auto-import' } ``` ```typescript { src: { globals: { Vue: 'readonly', computed: 'readonly' } } } ``` ```typescript { autoimports: true } ``` -------------------------------- ### Glob Pattern for JSON Files Source: https://github.com/vuetifyjs/eslint-config-vuetify/blob/master/_autodocs/07-glob-patterns.md Matches JSON files recursively. Use this for configuration and data files in JSON format. ```typescript export const GLOB_JSON = '**/*.json' ```