@vue/eslint-config-standard

ESLint Shareable Configuration for JavaScript Standard Style in Vue.js Projects

Package Information

• Package Name: @vue/eslint-config-standard
• Package Type: npm
• Language: JavaScript
• Installation: npm add --dev @vue/eslint-config-standard

Core Imports

import standard from "@vue/eslint-config-standard";

Basic Usage

import pluginVue from "eslint-plugin-vue";
import standard from "@vue/eslint-config-standard";

export default [
  ...pluginVue.configs["flat/essential"],
  ...standard,
]

Architecture

This ESLint configuration provides a comprehensive JavaScript Standard Style setup specifically tailored for Vue.js projects. It uses ESLint's modern flat configuration format and integrates multiple specialized rule sets through a deep merge system:

• Upstream Rules: Core JavaScript Standard Style rules from the original eslint-config-standard
• Stylistic Integration: Seamless integration with @stylistic/eslint-plugin for consistent code formatting
• Vue Template Support: Extension of JavaScript rules to Vue.js template expressions
• Import Resolution: Advanced path alias resolution through eslint-import-resolver-next

The configuration automatically handles rule conflicts and provides a unified experience across JavaScript code and Vue.js templates.

Main Configuration

ESLint Configuration Array

export default: ESLintConfig[]

The main export is an array containing a single merged ESLint configuration object. This configuration combines all rule sets and settings into a cohesive Standard Style setup for Vue.js projects.

Usage Example:

import standard from "@vue/eslint-config-standard";

// standard is an array of ESLint configuration objects
console.log(standard.length); // 1
console.log(standard[0].name); // "vue-standard"

Configuration Object Properties:

• name: "vue-standard" - Configuration identifier
• languageOptions: ECMAScript 2022, module format, JSX support
• plugins: Integrated ESLint plugins (n, promise, import-x, @stylistic)
• rules: Complete JavaScript Standard Style rule set (290+ rules including plugin rules)
• settings: Import resolver configuration with path alias support

Rule Categories

Core JavaScript Rules

The configuration includes 220+ JavaScript Standard Style rules covering:

• Code Quality: no-unused-vars, no-undef, prefer-const
• Formatting: indent, quotes, semi, comma-dangle
• Best Practices: eqeqeq, no-eval, no-with
• ES6+: arrow-spacing, template-curly-spacing, rest-spread-spacing

Plugin-Specific Rules

Import Rules (import-x plugin):

• import-x/export: Ensure named exports exist
• import-x/first: Ensure imports come first
• import-x/no-duplicates: Prevent duplicate imports

Node.js Rules (n plugin):

• n/handle-callback-err: Require error handling in callbacks
• n/no-deprecated-api: Prevent usage of deprecated Node.js APIs
• n/process-exit-as-throw: Treat process.exit() as throw

Promise Rules (promise plugin):

• promise/param-names: Enforce consistent parameter names in Promise constructors

Stylistic Rules (@stylistic plugin):

• Automatically replaces core ESLint formatting rules with @stylistic equivalents
• Provides enhanced formatting capabilities while maintaining Standard Style compliance

Vue Template Rules

JavaScript Standard Style rules are automatically extended to Vue.js template expressions:

• vue/indent: Template indentation matching JavaScript style
• vue/quotes: Consistent quote usage in templates
• vue/comma-dangle: Template expression comma handling

Language Options

interface LanguageOptions {
  ecmaVersion: 2022;
  sourceType: "module";
  parserOptions: {
    ecmaFeatures: {
      jsx: true;
    };
  };
  globals: GlobalsConfig;
}

Global Variables:

• ES2021 globals (globalThis, WeakRef, etc.)
• Node.js globals (process, Buffer, __dirname, etc.)
• Browser globals (document, navigator, window)

Plugin Integration

Required Peer Dependencies

interface PeerDependencies {
  eslint: "^9.10.0";
  "eslint-plugin-vue": "^9.28.0 || ^10.0.0";
}

Integrated Dependencies

The configuration automatically includes these plugins:

interface IntegratedPlugins {
  "@stylistic/eslint-plugin": "^4.2.0";
  "eslint-import-resolver-next": "^0.4.2";
  "eslint-plugin-import-x": "^4.6.1";
  "eslint-plugin-n": "^17.16.2";
  "eslint-plugin-promise": "^7.2.1";
  "globals": "^16.0.0";
}

Import Resolution

Path Alias Support

The configuration uses eslint-import-resolver-next to automatically resolve:

• TypeScript path mappings from tsconfig.json
• JavaScript path mappings from jsconfig.json
• Standard Node.js module resolution

interface ResolverSettings {
  "import-x/resolver-next": [
    NodeResolver,
    NextImportResolver
  ];
}

Configuration for Path Aliases

To enable import resolution for path aliases:

1. Configure aliases in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["lib/*"]
    }
  }
}

2. Or in jsconfig.json for JavaScript projects:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

The resolver will automatically detect and use these configurations.

Advanced Configuration

Extending the Configuration

import pluginVue from "eslint-plugin-vue";
import standard from "@vue/eslint-config-standard";

export default [
  ...pluginVue.configs["flat/essential"],
  ...standard,
  {
    // Override or add rules
    rules: {
      'import-x/extensions': ['error', 'ignorePackages'],
      'vue/max-attributes-per-line': ['error', { singleline: 3 }]
    }
  }
]

File Pattern Targeting

export default [
  {
    files: ['**/*.{js,mjs,jsx,vue}']
  },
  ...pluginVue.configs['flat/essential'],
  ...standard
]

Compatibility

ESLint Version Support

• Minimum: ESLint 9.10.0
• Format: Flat Configuration only (no legacy .eslintrc support)

Vue.js Version Support

• Compatible with Vue.js 2.x and 3.x projects
• Requires eslint-plugin-vue version 9.28.0 or higher

Environment Support

• Node.js: 18+ (ES2022 support required)
• Browsers: Modern browsers with ES2021 support
• Build Tools: Vite, Webpack, Rollup compatible

Migration Notes

From Legacy .eslintrc Format

This configuration requires ESLint's flat configuration format. For legacy .eslintrc support, use version ^13.0.0:

npm install @vue/eslint-config-standard@^13.0.0

From Other Standard Configs

When migrating from other JavaScript Standard Style configurations:

1. Remove conflicting ESLint configurations
2. Ensure eslint-plugin-vue is properly configured
3. Update ESLint to version 9.10.0 or higher
4. Adopt flat configuration format