tessl/npm-nuxtjs--eslint-config

ESLint configurations for Nuxt.js applications including JavaScript and TypeScript variants with Vue.js, import management, and code quality rules

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

@nuxtjs/eslint-config

Name: tessl/npm-nuxtjs--eslint-config
Author: tessl

@nuxtjs/eslint-config is a comprehensive ESLint configuration specifically designed for Nuxt.js applications. It provides a curated set of linting rules that enforce code quality standards, Vue.js best practices, and import management for modern Nuxt.js development workflows.

Package Information

Package Name: @nuxtjs/eslint-config
Package Type: npm
Language: JavaScript
Installation: npm install -D @nuxtjs/eslint-config

Core Imports

ESLint configuration packages are consumed by extending them in .eslintrc files:

{
  "extends": ["@nuxtjs"]
}

For programmatic access to the configuration object:

const config = require("@nuxtjs/eslint-config");

Basic Usage

Install the package and ESLint:

npm install -D @nuxtjs/eslint-config eslint

Create a .eslintrc file in your project root:

{
  "extends": ["@nuxtjs"]
}

Optionally add parser configuration for Babel or TypeScript:

{
  "root": true,
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "extends": ["@nuxtjs"]
}

Capabilities

ESLint Configuration Object

The package exports a complete ESLint configuration object that defines environment settings, extended configurations, plugins, and rules specifically tailored for Nuxt.js applications.

/**
 * Main ESLint configuration object for Nuxt.js applications
 * Exported as CommonJS module.exports
 */
interface ESLintConfig {
  /** Environment settings for browser and Node.js */
  env: {
    browser: boolean;
    node: boolean;
  };
  /** Extended ESLint configurations */
  extends: string[];
  /** ESLint plugins used for additional rules */
  plugins: string[];
  /** Settings for import resolution and other configurations */
  settings: {
    'import/resolver': {
      node: {
        extensions: string[];
      };
    };
  };
  /** ESLint rules configuration organized by category */
  rules: ESLintRulesConfig;
  /** File-specific rule overrides */
  overrides: ESLintOverride[];
}

Environment Configuration

Configures ESLint to recognize both browser and Node.js environment globals.

interface EnvironmentConfig {
  /** Enable browser environment globals (window, document, etc.) */
  browser: true;
  /** Enable Node.js environment globals (process, __dirname, etc.) */
  node: true;
}

Extended Configurations

The configuration extends several base ESLint configurations for comprehensive coverage.

/**
 * Extended ESLint configurations
 * These provide the foundation rules that are enhanced by custom rules
 */
type ExtendedConfigs = [
  /** ESLint Standard configuration for general JavaScript rules */
  'standard',
  /** Import plugin error rules for import statement validation */
  'plugin:import/errors',
  /** Import plugin warning rules for import statement best practices */
  'plugin:import/warnings',
  /** Vue.js recommended rules for Vue component development */
  'plugin:vue/recommended'
];

Plugin Configuration

ESLint plugins that provide additional rules beyond the standard set.

/**
 * ESLint plugins providing additional rules
 */
type PluginConfig = [
  /** Unicorn plugin for code quality and best practices */
  'unicorn',
  /** Vue plugin for Vue.js specific linting */
  'vue'
];

Import Resolver Settings

Configuration for resolving import statements in JavaScript modules.

interface ImportResolverSettings {
  'import/resolver': {
    /** Node.js resolver configuration */
    node: {
      /** File extensions to resolve */
      extensions: ['.js', '.mjs'];
    };
  };
}

Rules Configuration

Comprehensive set of ESLint rules organized by functional categories.

interface ESLintRulesConfig {
  /** Import statement ordering and validation rules */
  'import/order': 'error';
  'import/first': 'error';
  'import/no-mutable-exports': 'error';
  'import/no-unresolved': 'off';
  
  /** Arrow function and async/await rules */
  'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }];
  'generator-star-spacing': 'off';
  
  /** Development vs production environment rules */
  'no-debugger': 'error' | 'warn'; // 'error' in production, 'warn' in development
  'no-console': 'error' | 'warn';   // 'error' in production, 'warn' in development
  
  /** Variable declaration and usage rules */
  'prefer-const': ['error', { destructuring: 'any', ignoreReadBeforeAssign: false }];
  'no-lonely-if': 'error';
  'curly': ['error', 'all'];
  'require-await': 'error';
  'dot-notation': 'error';
  'no-var': 'error';
  'object-shorthand': 'error';
  'no-useless-rename': 'error';
  
  /** Unicorn plugin rules for code quality */
  'unicorn/error-message': 'error';
  'unicorn/escape-case': 'error';
  'unicorn/no-array-instanceof': 'error';
  'unicorn/no-new-buffer': 'error';
  'unicorn/no-unsafe-regex': 'off';
  'unicorn/number-literal-case': 'error';
  'unicorn/prefer-exponentiation-operator': 'error';
  'unicorn/prefer-includes': 'error';
  'unicorn/prefer-starts-ends-with': 'error';
  'unicorn/prefer-text-content': 'error';
  'unicorn/prefer-type-error': 'error';
  'unicorn/throw-new-error': 'error';
  
  /** Vue.js specific rules */
  'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }];
  'vue/max-attributes-per-line': ['error', { singleline: 5 }];
}

File Override Configuration

Special rule configurations for Nuxt.js-specific file patterns.

interface ESLintOverride {
  /** File patterns that match Nuxt.js pages, layouts, and app files */
  files: [
    '**/pages/**/*.{js,ts,vue}',
    '**/layouts/**/*.{js,ts,vue}',
    '**/app.{js,ts,vue}',
    '**/error.{js,ts,vue}'
  ];
  /** Rules to override for these specific files */
  rules: {
    /** Disable multi-word component name requirement for Nuxt.js conventions */
    'vue/multi-word-component-names': 'off';
  };
}

Rule Categories

General Code Rules

Rules for general JavaScript code quality and consistency:

Import Management: Enforces import ordering, placement, and prevents mutable exports
Arrow Functions: Controls parentheses usage in arrow functions based on body type
Development Controls: Environment-aware debugger and console statement handling
Variable Declarations: Prefers const over let, requires curly braces, enforces dot notation
Code Quality: Prevents useless patterns and enforces modern JavaScript practices

Unicorn Rules

Enhanced code quality rules from the eslint-plugin-unicorn:

Error Handling: Requires error messages and proper error throwing patterns
Modern JavaScript: Prefers modern methods like Array.isArray(), exponentiation operator
String Operations: Prefers includes() over indexOf(), startsWith/endsWith over regex
DOM Operations: Prefers textContent over innerText
Security: Prevents deprecated Buffer constructor usage

Vue.js Rules

Specialized rules for Vue.js component development:

Template Parsing: Handles Vue.js template parsing with flexibility for invalid end tags
Component Formatting: Allows up to 5 attributes per line in single-line tags
Nuxt.js Integration: Disables multi-word component names for Nuxt.js conventions

Dependencies

Runtime Dependencies

interface PackageDependencies {
  'eslint-config-standard': '^17.0.0';
  'eslint-plugin-import': '^2.26.0';
  'eslint-plugin-n': '^15.2.5';
  'eslint-plugin-node': '^11.1.0';
  'eslint-plugin-promise': '^6.0.1';
  'eslint-plugin-unicorn': '^43.0.2';
  'eslint-plugin-vue': '^9.4.0';
}

Peer Dependencies

interface PeerDependencies {
  /** ESLint core package required for configuration usage */
  eslint: '^8.23.0';
}

Configuration Usage Patterns

Basic Nuxt.js Project

{
  "root": true,
  "extends": ["@nuxtjs"]
}

With Babel Parser

{
  "root": true,
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "extends": ["@nuxtjs"]
}

With Additional Rules

{
  "root": true,
  "extends": ["@nuxtjs"],
  "rules": {
    "no-console": "off"
  }
}

Types

/**
 * ESLint rule severity levels
 */
type RuleSeverity = 'off' | 'warn' | 'error' | 0 | 1 | 2;

/**
 * ESLint rule configuration can be severity only or array with options
 */
type RuleConfig = RuleSeverity | [RuleSeverity, ...any[]];

/**
 * Complete ESLint configuration object structure
 */
interface ESLintConfig {
  env?: { [key: string]: boolean };
  extends?: string | string[];
  plugins?: string[];
  settings?: { [key: string]: any };
  rules?: { [ruleName: string]: RuleConfig };
  overrides?: ESLintOverride[];
}

/**
 * File-specific rule overrides
 */
interface ESLintOverride {
  files: string | string[];
  rules?: { [ruleName: string]: RuleConfig };
}

TypeScript Configuration

Enhanced ESLint configuration for TypeScript Nuxt.js applications, extending the base configuration with TypeScript-specific parser, plugins, and rules.

/**
 * TypeScript ESLint configuration object for Nuxt.js applications
 * Extends the base @nuxtjs configuration with TypeScript support
 */
interface TypeScriptESLintConfig {
  /** Extended configurations including the base @nuxtjs config */
  extends: ['@nuxtjs'];
  /** TypeScript-specific ESLint plugins */
  plugins: ['@typescript-eslint'];
  /** Vue ESLint parser for .vue files */
  parser: 'vue-eslint-parser';
  /** Parser options for TypeScript support */
  parserOptions: {
    parser: '@typescript-eslint/parser';
  };
  /** TypeScript-specific ESLint rules */
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }];
    'no-unused-vars': 'off';
    'no-undef': 'off';
  };
  /** TypeScript-specific import settings */
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'];
    };
    'import/resolver': {
      typescript: {};
    };
  };
}

TypeScript Configuration

Install with Tessl CLI

npx tessl i tessl/npm-nuxtjs--eslint-config

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/@nuxtjs/eslint-config@11.0.x
Publish Source: CLI
Badge