CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tslint-plugin-prettier

Runs Prettier as a TSLint rule and reports differences as individual TSLint issues.

—

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

TSLint Plugin Prettier

TSLint Plugin Prettier integrates Prettier code formatting into the TSLint linting workflow. It runs Prettier as a TSLint rule and reports formatting differences as individual TSLint issues, enabling teams to enforce consistent code formatting through their existing TSLint setup with automatic fix suggestions.

Package Information

  • Package Name: tslint-plugin-prettier
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev tslint-plugin-prettier prettier

Core Imports

The package is used as a TSLint plugin, not directly imported in code. It extends TSLint's rule system:

{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

For TSLint 5.0.0+, you can also use the extends syntax:

{
  "extends": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

Basic Usage

Add the prettier rule to your tslint.json configuration:

{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

The plugin will automatically:

  1. Run Prettier formatting on your TypeScript/JavaScript files
  2. Compare the formatted output with the original source
  3. Report differences as TSLint failures with automatic fix suggestions
  4. Respect .prettierignore files to exclude files from formatting

Capabilities

TSLint Plugin Configuration

The main export provides TSLint plugin configuration that registers the prettier rule.

// Main plugin export (rules/index.js)
export = {
  rulesDirectory: string; // Value: '.'
};

Prettier Rule Implementation

The core rule that integrates Prettier formatting into TSLint.

// prettier rule (rules/prettierRule.js)
export class Rule extends tslint.Rules.AbstractRule {
  /**
   * Apply the prettier rule to a TypeScript source file
   * @param sourceFile - TypeScript source file to analyze
   * @returns Array of TSLint rule failures for formatting differences
   */
  apply(sourceFile: ts.SourceFile): tslint.RuleFailure[];
}

Rule Configuration Options

The prettier rule accepts flexible configuration options:

Basic Usage (auto-config):

{
  "rules": {
    "prettier": true
  }
}

With Prettier Options Object:

{
  "rules": {
    "prettier": [true, { "singleQuote": true, "trailingComma": "es5" }]
  }
}

With Config File Path:

{
  "rules": {
    "prettier": [true, "configs/.prettierrc"]
  }
}

With Additional Options:

{
  "rules": {
    "prettier": [true, null, { 
      "editorconfig": false, 
      "ignorePath": "custom.prettierignore" 
    }]
  }
}

Configuration Arguments

// Rule configuration signature
type PrettierRuleConfig = [
  boolean, // Enable rule
  PrettierOptions | string | null?, // Prettier config object, config file path, or null for auto-discovery
  AdditionalOptions? // Additional plugin options
];

interface PrettierOptions {
  // Standard Prettier options (singleQuote, trailingComma, etc.)
  [key: string]: any;
}

interface AdditionalOptions {
  /** Whether to load .editorconfig files (default: true) */
  editorconfig?: boolean;
  /** Path to custom .prettierignore file (default: '.prettierignore') */
  ignorePath?: string;
}

Integration Details

File Processing Logic

The rule follows this processing flow:

  1. Ignore Check: Uses prettier.getFileInfo.sync() to check if file should be ignored via .prettierignore
  2. Config Resolution: Resolves Prettier configuration from rule arguments, config files, or defaults
  3. Formatting: Runs prettier.format() with TypeScript parser on source code
  4. Comparison: Compares original source with formatted output
  5. Failure Generation: Creates TSLint failures for differences with automatic fixes

Error Handling

The rule handles two types of issues:

Syntax Errors: When Prettier encounters invalid TypeScript syntax

// Reported as TSLint failure with location information
type SyntaxErrorFailure = {
  message: `SyntaxError: ${string}`;
  position: number;
  length: 1;
};

Formatting Differences: When code doesn't match Prettier's formatting

// Three types of formatting fixes
type FormattingFailureType = 'insert' | 'delete' | 'replace';

interface FormattingFailure {
  operation: FormattingFailureType;
  message: string; // e.g., "Insert ` `", "Delete `;;`", "Replace `''` with `"";`"
  fix: tslint.Replacement; // Automatic fix suggestion
}

Dependencies Integration

The plugin integrates with several key dependencies:

  • eslint-plugin-prettier: Provides generateDifferences() and showInvisibles() utilities for comparing formatted code
  • lines-and-columns: Maps character positions to line/column coordinates for error reporting
  • prettier: Core formatting engine with TypeScript parser support
  • tslint: Extends tslint.Rules.AbstractRule and uses tslint.RuleFailure system

Usage Examples

Enforce consistent formatting:

# Run TSLint with prettier rule
npx tslint --project tsconfig.json

# Auto-fix formatting issues
npx tslint --project tsconfig.json --fix

Typical TSLint configuration with prettier:

{
  "extends": ["tslint-plugin-prettier", "tslint-config-prettier"],
  "rules": {
    "prettier": [true, {
      "singleQuote": true,
      "trailingComma": "es5",
      "printWidth": 100
    }]
  }
}

Custom ignore configuration:

{
  "rules": {
    "prettier": [true, null, {
      "ignorePath": "build/.prettierignore",
      "editorconfig": false
    }]
  }
}

Types

// TypeScript integration types
import * as ts from 'typescript';
import * as tslint from 'tslint';
import * as prettier from 'prettier';

// Rule implementation extends TSLint's AbstractRule
class Rule extends tslint.Rules.AbstractRule {
  apply(sourceFile: ts.SourceFile): tslint.RuleFailure[];
}

// Configuration types for rule arguments
type RuleArguments = [
  PrettierConfig | string | null,
  { editorconfig?: boolean; ignorePath?: string }?
];

type PrettierConfig = prettier.Options;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tslint-plugin-prettier@2.3.x
Publish Source
CLI
Badge
tessl/npm-tslint-plugin-prettier badge