CtrlK
BlogDocsLog inGet started
Tessl Logo

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

typescript-config.mddocs/

TypeScript Configuration

Enhanced ESLint configuration for TypeScript Nuxt.js applications. This package extends the base @nuxtjs/eslint-config with TypeScript-specific parser, plugins, and rules for comprehensive type-safe linting.

Package Information

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

Core Imports

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

{
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

For programmatic access to the configuration object:

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

Basic Usage

  1. Install the package and ESLint:
npm install -D @nuxtjs/eslint-config-typescript eslint
  1. Create a .eslintrc file in your project root:
{
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

Capabilities

TypeScript ESLint Configuration Object

The package exports a complete ESLint configuration object that extends the base @nuxtjs configuration with TypeScript-specific enhancements.

/**
 * TypeScript ESLint configuration object for Nuxt.js applications
 * Exported as CommonJS module.exports
 */
interface TypeScriptESLintConfig {
  /** Extended configurations including the base @nuxtjs config */
  extends: ['@nuxtjs'];
  /** TypeScript-specific ESLint plugins */
  plugins: ['@typescript-eslint'];
  /** Vue ESLint parser for .vue files with TypeScript support */
  parser: 'vue-eslint-parser';
  /** Parser options for TypeScript integration */
  parserOptions: TypeScriptParserOptions;
  /** TypeScript-specific ESLint rules */
  rules: TypeScriptRulesConfig;
  /** TypeScript-specific import settings */
  settings: TypeScriptImportSettings;
}

Parser Configuration

Configures Vue ESLint parser with TypeScript parser for comprehensive TypeScript support in Vue files.

interface TypeScriptParserOptions {
  /** TypeScript ESLint parser for processing TypeScript code */
  parser: '@typescript-eslint/parser';
}

Usage: The configuration uses vue-eslint-parser as the main parser for .vue files, with @typescript-eslint/parser as the TypeScript parser for <script> blocks.

Plugin Configuration

TypeScript-specific ESLint plugins providing additional TypeScript rules.

/**
 * TypeScript ESLint plugins
 */
type TypeScriptPluginConfig = [
  /** TypeScript ESLint plugin for TypeScript-specific rules */
  '@typescript-eslint'
];

Rules Configuration

TypeScript-specific ESLint rules that override and enhance the base configuration.

interface TypeScriptRulesConfig {
  /** 
   * TypeScript version of no-unused-vars with argument pattern support
   * Allows unused parameters starting with underscore
   */
  '@typescript-eslint/no-unused-vars': ['error', { 
    args: 'all'; 
    argsIgnorePattern: '^_'; 
  }];
  
  /** 
   * Disable base no-unused-vars rule (replaced by TypeScript version)
   * Required per TypeScript ESLint documentation
   */
  'no-unused-vars': 'off';
  
  /** 
   * Disable no-undef rule for TypeScript files
   * TypeScript compiler handles undefined variable checking
   */
  'no-undef': 'off';
}

Rule Details:

  • @typescript-eslint/no-unused-vars: Enhanced unused variable detection with TypeScript type information
  • no-unused-vars: 'off': Base rule disabled to prevent conflicts with TypeScript rule
  • no-undef: 'off': Disabled as TypeScript compiler provides superior undefined variable checking

Import Settings Configuration

TypeScript-specific import resolution settings for proper module resolution.

interface TypeScriptImportSettings {
  /** Parser configuration for TypeScript files */
  'import/parsers': {
    /** Use TypeScript parser for .ts and .tsx files */
    '@typescript-eslint/parser': ['.ts', '.tsx'];
  };
  /** Import resolver configuration */
  'import/resolver': {
    /** TypeScript import resolver for path resolution */
    typescript: {};
  };
}

Configuration Details:

  • import/parsers: Maps TypeScript parser to .ts and .tsx file extensions
  • import/resolver: Enables TypeScript-aware import resolution using eslint-import-resolver-typescript

Dependencies

Runtime Dependencies

interface TypeScriptPackageDependencies {
  /** Base Nuxt.js ESLint configuration */
  '@nuxtjs/eslint-config': '^11.0.0';
  /** TypeScript ESLint plugin for TypeScript-specific rules */
  '@typescript-eslint/eslint-plugin': '^5.36.1';
  /** TypeScript ESLint parser for parsing TypeScript code */
  '@typescript-eslint/parser': '^5.36.1';
  /** TypeScript import resolver for ESLint import plugin */
  'eslint-import-resolver-typescript': '^3.5.0';
  /** Import plugin for import statement validation */
  'eslint-plugin-import': '^2.26.0';
}

Peer Dependencies

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

Configuration Usage Patterns

Basic TypeScript Nuxt.js Project

{
  "root": true,
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

With Additional TypeScript Rules

{
  "root": true,
  "extends": ["@nuxtjs/eslint-config-typescript"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "warn"
  }
}

Multi-Environment Configuration

{
  "root": true,
  "extends": ["@nuxtjs/eslint-config-typescript"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "@typescript-eslint/strict-boolean-expressions": "error"
      }
    }
  ]
}

Types

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

/**
 * TypeScript ESLint rule configuration
 */
type TypeScriptRuleConfig = TypeScriptRuleSeverity | [TypeScriptRuleSeverity, ...any[]];

/**
 * Complete TypeScript ESLint configuration structure
 */
interface TypeScriptESLintConfig {
  extends?: string | string[];
  plugins?: string[];
  parser?: string;
  parserOptions?: { [key: string]: any };
  settings?: { [key: string]: any };
  rules?: { [ruleName: string]: TypeScriptRuleConfig };
}

Install with Tessl CLI

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

docs

index.md

typescript-config.md

tile.json