CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxtjs--eslint-config-typescript

ESLint config used for Nuxt with TypeScript support

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@nuxtjs/eslint-config-typescript

@nuxtjs/eslint-config-typescript provides a TypeScript-specific ESLint configuration for Nuxt.js projects. It extends the base @nuxtjs/eslint-config with TypeScript-specific rules and plugins, offering comprehensive TypeScript linting capabilities including Vue.js single-file component support.

Package Information

  • Package Name: @nuxtjs/eslint-config-typescript
  • Package Type: npm
  • Language: JavaScript (ESLint configuration)
  • Installation: npm install --save-dev @nuxtjs/eslint-config-typescript eslint

Core Imports

This package exports a single ESLint configuration object using CommonJS:

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

ES modules (when using bundlers that support CommonJS imports):

import config from "@nuxtjs/eslint-config-typescript";

Basic Usage

ESLint Configuration File

The most common usage is extending this configuration in your ESLint configuration:

// .eslintrc.js
module.exports = {
  extends: ["@nuxtjs/eslint-config-typescript"]
};
// .eslintrc.json
{
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

Direct Configuration Object Access

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

// Access configuration properties
console.log(nuxtTsConfig.extends);    // ['@nuxtjs', 'plugin:@typescript-eslint/recommended']
console.log(nuxtTsConfig.plugins);    // ['@typescript-eslint']
console.log(nuxtTsConfig.parser);     // 'vue-eslint-parser'

Architecture

@nuxtjs/eslint-config-typescript is built around a layered configuration approach:

  • Base Extension: Extends @nuxtjs (base Nuxt ESLint config) and plugin:@typescript-eslint/recommended
  • Parser Strategy: Uses vue-eslint-parser as primary parser with @typescript-eslint/parser for TypeScript code blocks
  • Plugin Integration: Integrates @typescript-eslint plugin for TypeScript-specific linting rules
  • Migration-Friendly Rules: Disables strict TypeScript rules to ease JavaScript-to-TypeScript migration
  • Import Resolution: Configures TypeScript-aware import resolution for .ts and .tsx files

Capabilities

ESLint Configuration Export

The package exports a complete ESLint configuration object optimized for TypeScript projects in the Nuxt.js ecosystem.

/**
 * Complete ESLint configuration object for TypeScript projects
 * @returns ESLintConfig - Configuration object with extends, plugins, parser, rules, and settings
 */
module.exports: ESLintConfig;

interface ESLintConfig {
  /** Base configurations to extend - ["@nuxtjs", "plugin:@typescript-eslint/recommended"] */
  extends: ["@nuxtjs", "plugin:@typescript-eslint/recommended"];
  /** ESLint plugins to load - ["@typescript-eslint"] */
  plugins: ["@typescript-eslint"];
  /** Parser for JavaScript/TypeScript/Vue files - "vue-eslint-parser" */
  parser: "vue-eslint-parser";
  /** Parser configuration options */
  parserOptions: ParserOptions;
  /** ESLint rule configuration */
  rules: Rules;
  /** Additional plugin settings */
  settings: Settings;
}

interface ParserOptions {
  /** TypeScript parser for script blocks in Vue files - set to "@typescript-eslint/parser" */
  parser: "@typescript-eslint/parser";
}

interface Rules {
  /** TypeScript-specific unused variables rule - configured as error with options */
  "@typescript-eslint/no-unused-vars": ["error", UnusedVarsOptions];
  /** Disabled base no-unused-vars rule - set to "off" */
  "no-unused-vars": "off";
  /** Disabled no-undef rule for TypeScript - set to "off" */
  "no-undef": "off";
  /** TypeScript rules disabled for easier migration - all set to "off" */
  "@typescript-eslint/ban-ts-comment": "off";
  "@typescript-eslint/consistent-indexed-object-style": "off";
  "@typescript-eslint/naming-convention": "off";
  "@typescript-eslint/explicit-function-return-type": "off";
  "@typescript-eslint/explicit-member-accessibility": "off";
  "@typescript-eslint/no-explicit-any": "off";
  "@typescript-eslint/parameter-properties": "off";
  "@typescript-eslint/no-empty-interface": "off";
  "@typescript-eslint/ban-ts-ignore": "off";
  "@typescript-eslint/no-empty-function": "off";
  "@typescript-eslint/no-non-null-assertion": "off";
  "@typescript-eslint/explicit-module-boundary-types": "off";
  "@typescript-eslint/ban-types": "off";
  "@typescript-eslint/no-namespace": "off";
  "@typescript-eslint/triple-slash-reference": "off";
}

interface UnusedVarsOptions {
  /** Check all arguments - set to "all" */
  args: "all";
  /** Ignore arguments starting with underscore - regex pattern "^_" */
  argsIgnorePattern: "^_";
}

interface Settings {
  /** Import parser configuration for TypeScript files */
  "import/parsers": ImportParsers;
  /** Import resolver configuration */
  "import/resolver": ImportResolver;
}

interface ImportParsers {
  /** TypeScript parser for .ts and .tsx files - configured for [".ts", ".tsx"] */
  "@typescript-eslint/parser": [".ts", ".tsx"];
}

interface ImportResolver {
  /** TypeScript import resolution - empty configuration object enables default TypeScript resolution */
  typescript: {};
}

Configuration Details

Base Extensions

The configuration extends two base configurations:

  • @nuxtjs: Base Nuxt.js ESLint configuration
  • plugin:@typescript-eslint/recommended: Recommended TypeScript ESLint rules

Plugins

  • @typescript-eslint: TypeScript-specific ESLint plugin

Parser Configuration

  • Primary Parser: vue-eslint-parser - Handles Vue single-file components
  • Script Parser: @typescript-eslint/parser - Handles TypeScript code within Vue files

Key Rules

Enabled Rules:

  • @typescript-eslint/no-unused-vars: Error for unused variables with argument checking

Disabled Rules:

  • no-unused-vars: Disabled in favor of TypeScript-specific rule
  • no-undef: Disabled as TypeScript handles undefined variable checking
  • Multiple TypeScript strict rules disabled for easier JavaScript-to-TypeScript migration

Import Resolution

Configured to handle TypeScript imports:

  • .ts and .tsx file parsing via @typescript-eslint/parser
  • TypeScript-aware import resolution

Dependencies

Required Dependencies

These dependencies are automatically installed with the package:

  • @nuxtjs/eslint-config (^12.0.0): Base Nuxt ESLint configuration
  • @typescript-eslint/eslint-plugin (^6.5.0): TypeScript ESLint plugin
  • @typescript-eslint/parser (^6.5.0): TypeScript parser
  • eslint-import-resolver-typescript (^3.6.0): TypeScript import resolver
  • eslint-plugin-import (^2.28.1): Import/export linting
  • eslint-plugin-vue (^9.17.0): Vue.js linting support

Peer Dependencies

  • eslint (^8.48.0): ESLint engine (must be installed separately)

Development Dependencies

  • typescript (^5.2.2): TypeScript compiler for development

Usage with Package Manager Scripts

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

docs

index.md

tile.json