or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-eslint-plugin-prettier

Runs prettier as an eslint rule

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-prettier@4.2.x

To install, run

npx @tessl/cli install tessl/npm-eslint-plugin-prettier@4.2.0

index.mddocs/

ESLint Plugin Prettier

ESLint Plugin Prettier integrates Prettier code formatting directly into the ESLint linting process. It runs Prettier as an ESLint rule and reports formatting differences as individual ESLint issues, enabling developers to enforce consistent code formatting within their existing ESLint workflow.

Package Information

  • Package Name: eslint-plugin-prettier
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev eslint-plugin-prettier
  • Peer Dependencies: eslint (>=7.28.0), prettier (>=2.0.0)
  • Optional Dependencies: eslint-config-prettier (for recommended configuration)

Core Imports

const eslintPluginPrettier = require('eslint-plugin-prettier');

For ESM environments:

import eslintPluginPrettier from 'eslint-plugin-prettier';

Module Structure

The plugin exports an object with two main properties:

module.exports = {
  configs: {
    recommended: {
      extends: ['prettier'],
      plugins: ['prettier'],
      rules: {
        'prettier/prettier': 'error',
        'arrow-body-style': 'off',
        'prefer-arrow-callback': 'off'
      }
    }
  },
  rules: {
    prettier: {
      meta: { /* ... */ },
      create: function(context) { /* ... */ }
    }
  }
};

Basic Usage

Manual Configuration

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Recommended Configuration

{
  "extends": ["plugin:prettier/recommended"]
}

With Options

{
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": false,
        "singleQuote": true
      },
      {
        "usePrettierrc": false
      }
    ]
  }
}

Architecture

ESLint Plugin Prettier consists of two main components:

  • Plugin Configuration: Pre-configured ESLint configurations including the recommended setup
  • Prettier Rule: The core ESLint rule that integrates Prettier formatting and reports differences
  • Options System: Configuration schema supporting both Prettier options and plugin-specific settings

Capabilities

Plugin Configuration

Pre-configured ESLint configurations that set up the plugin with proper defaults.

const configs = {
  recommended: {
    extends: ['prettier'],
    plugins: ['prettier'],
    rules: {
      'prettier/prettier': 'error',
      'arrow-body-style': 'off',
      'prefer-arrow-callback': 'off'
    }
  }
};

The recommended configuration:

  • Extends eslint-config-prettier to disable conflicting formatting rules
  • Registers the prettier plugin
  • Enables the prettier/prettier rule as an error
  • Disables problematic ESLint core rules (arrow-body-style, prefer-arrow-callback)

Prettier Rule

The main ESLint rule that runs Prettier formatting and reports differences.

const rules = {
  prettier: {
    meta: {
      docs: {
        url: 'https://github.com/prettier/eslint-plugin-prettier#options'
      },
      type: 'layout',
      fixable: 'code',
      schema: [ /* Prettier options schema */ ],
      messages: {
        INSERT: 'Insert `{{ insertText }}`',
        DELETE: 'Delete `{{ deleteText }}`',
        REPLACE: 'Replace `{{ deleteText }}` with `{{ insertText }}`'
      }
    },
    create: function(context) {
      // Rule implementation
      return {
        Program() {
          // Prettier formatting logic
        }
      };
    }
  }
};

Rule Configuration

Configure the prettier rule with options for both Prettier formatting and plugin behavior.

interface PrettierRuleOptions {
  // First parameter: Prettier formatting options (any valid Prettier options)
  prettierOptions?: {
    [key: string]: any;
  };
  
  // Second parameter: Plugin-specific options
  pluginOptions?: {
    usePrettierrc?: boolean;
    fileInfoOptions?: {
      [key: string]: any;
    };
  };
}

Configuration Parameters:

  • prettierOptions (optional): Any valid Prettier configuration options (semi, singleQuote, tabWidth, etc.)
  • pluginOptions (optional): Plugin-specific configuration
    • usePrettierrc (boolean, default: true): Whether to use .prettierrc configuration files
    • fileInfoOptions (object): Additional options passed to prettier.getFileInfo()

Usage Examples:

// Using Prettier options only
{
  "prettier/prettier": ["error", { "semi": false, "singleQuote": true }]
}

// Using both Prettier and plugin options
{
  "prettier/prettier": [
    "error",
    { "semi": false },
    { "usePrettierrc": false, "fileInfoOptions": { "ignorePath": ".prettierignore" } }
  ]
}

// Using plugin options only
{
  "prettier/prettier": ["error", {}, { "usePrettierrc": false }]
}

Rule Metadata

The rule metadata defines the ESLint rule characteristics and configuration schema.

interface RuleMeta {
  docs: {
    url: string;
  };
  type: 'layout';
  fixable: 'code';
  schema: [
    {
      type: 'object',
      properties: {},
      additionalProperties: true
    },
    {
      type: 'object',
      properties: {
        usePrettierrc: { type: 'boolean' },
        fileInfoOptions: {
          type: 'object',
          properties: {},
          additionalProperties: true
        }
      },
      additionalProperties: true
    }
  ];
  messages: {
    INSERT: string;
    DELETE: string;
    REPLACE: string;
  };
}

The rule metadata includes:

  • Documentation URL pointing to the GitHub repository
  • Type classification as 'layout' (formatting-related)
  • Fixable designation allowing auto-fixing via eslint --fix
  • JSON schema for validating rule configuration
  • Message templates for different types of formatting differences

Message Templates:

The rule uses three message template constants for different types of formatting differences:

const messages = {
  INSERT: 'Insert `{{ insertText }}`',
  DELETE: 'Delete `{{ deleteText }}`',
  REPLACE: 'Replace `{{ deleteText }}` with `{{ insertText }}`'
};

These correspond to the operations generated by prettier-linter-helpers when comparing original and formatted code:

  • INSERT: When Prettier determines additional text should be added
  • DELETE: When Prettier determines text should be removed
  • REPLACE: When Prettier determines text should be replaced with different text

File Type Support

The plugin automatically handles various file types and ESLint processor integrations:

  • JavaScript/TypeScript: Native support with proper parser detection
  • Markdown: Integration with markdown processors for code block formatting
  • HTML: Support for HTML processors extracting JavaScript
  • Svelte: Compatible with modern Svelte ESLint parsers (svelte-eslint-parser)
  • Vue: Handles Vue single-file components
  • GraphQL: Integration with GraphQL ESLint plugins

Processor Compatibility:

The plugin includes special logic for ESLint processors that extract JavaScript from other file types. It automatically detects when code has been processed and adjusts parser selection accordingly.

Ignored Files:

Files listed in .prettierignore are automatically skipped during processing.

Types

interface RuleContext {
  options: any[];
  getSourceCode(): SourceCode;
  getFilename(): string;
  getPhysicalFilename(): string;
  report(descriptor: ReportDescriptor): void;
}

interface SourceCode {
  text: string;
  getLocFromIndex(index: number): Location;
}

interface Location {
  line: number;
  column: number;
}

interface ReportDescriptor {
  messageId: string;
  data?: { [key: string]: string };
  loc: { start: Location; end: Location };
  fix?: (fixer: RuleFixer) => Fix;
}

interface RuleFixer {
  replaceTextRange(range: [number, number], text: string): Fix;
}

interface Fix {
  range: [number, number];
  text: string;
}

interface RuleDefinition {
  Program(): void;
}