CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-svgr--plugin-prettier

A SVGR plugin that formats generated React components using Prettier

—

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/

@svgr/plugin-prettier

@svgr/plugin-prettier is a SVGR plugin that formats generated React components using Prettier. It integrates seamlessly with the SVGR plugin architecture to apply consistent code formatting to SVG-to-React component transformations, ensuring output follows established style guidelines.

Package Information

  • Package Name: @svgr/plugin-prettier
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @svgr/plugin-prettier

Core Imports

import prettierPlugin from "@svgr/plugin-prettier";

For CommonJS:

const prettierPlugin = require("@svgr/plugin-prettier");

Basic Usage

@svgr/plugin-prettier is typically used through SVGR's configuration system:

.svgrrc

{
  "plugins": ["@svgr/plugin-prettier"],
  "prettier": true,
  "runtimeConfig": true,
  "prettierConfig": {
    "semi": true,
    "singleQuote": true
  }
}

Direct usage (handled by SVGR internally):

import prettierPlugin from "@svgr/plugin-prettier";

const formattedCode = prettierPlugin(code, config, state);

Capabilities

Code Formatting

Formats JavaScript/JSX code using Prettier with configurable options and runtime configuration resolution.

/**
 * SVGR plugin that formats code using Prettier
 * @param code - The code string to format
 * @param config - SVGR configuration object
 * @param state - SVGR state object with component metadata
 * @returns Formatted code string, or original code if prettier is disabled
 */
function prettierPlugin(
  code: string,
  config: Config,
  state: State
): string;

interface Config {
  /** Enable/disable prettier formatting */
  prettier?: boolean;
  /** Enable runtime configuration file resolution */
  runtimeConfig?: boolean;
  /** Custom prettier configuration options */
  prettierConfig?: PrettierOptions;
  // ... other SVGR config options
}

interface State {
  /** Optional file path for configuration resolution */
  filePath?: string;
  /** Name of the React component being generated */
  componentName: string;
  /** Additional caller metadata */
  caller?: {
    name?: string;
    previousExport?: string | null;
    defaultPlugins?: ConfigPlugin[];
  };
}

type ConfigPlugin = string | Plugin;

interface PrettierOptions {
  /** Parser to use (defaults to 'babel' for React/JSX) */
  parser?: string;
  /** Whether to add semicolons */
  semi?: boolean;
  /** Use single quotes instead of double quotes */
  singleQuote?: boolean;
  /** Print width for line wrapping */
  printWidth?: number;
  /** Tab width for indentation */
  tabWidth?: number;
  /** Use tabs instead of spaces */
  useTabs?: boolean;
  /** Trailing comma configuration */
  trailingComma?: "none" | "es5" | "all";
  /** Bracket spacing in object literals */
  bracketSpacing?: boolean;
  /** Bracket line for JSX elements */
  bracketSameLine?: boolean;
  /** Arrow function parentheses */
  arrowParens?: "avoid" | "always";
  // ... other prettier options
}

Behavior:

  • Returns original code unchanged if config.prettier is false
  • Uses state.filePath or process.cwd() for prettier configuration resolution
  • Resolves prettier configuration from filesystem when config.runtimeConfig is true
  • Merges configuration in order of precedence (highest priority last):
    1. Default: { parser: 'babel' }
    2. Resolved prettier config from .prettierrc files
    3. Custom config from config.prettierConfig
  • Enables editorconfig integration during runtime configuration resolution
  • Uses prettier.format() with merged configuration options

Configuration Resolution:

// When runtimeConfig is true, the plugin resolves prettier config using:
import { resolveConfig } from 'prettier';

const prettierRcConfig = resolveConfig.sync(filePath, { 
  editorconfig: true 
});

Configuration Merging:

import deepmerge from 'deepmerge';

const finalConfig = deepmerge.all([
  { parser: 'babel' },           // Default parser for JSX
  prettierRcConfig || {},        // Runtime config from .prettierrc
  config.prettierConfig || {},   // Custom overrides
]);

Error Handling

The plugin gracefully handles configuration resolution failures:

  • Falls back to process.cwd() if state.filePath is not provided
  • Uses empty configuration if prettier config resolution fails
  • Relies on prettier's built-in error handling for formatting failures

Integration Notes

  • Peer Dependency: Requires @svgr/core for Plugin, Config, and State interfaces
  • Dependencies: Uses prettier ^2.8.7 for formatting and deepmerge ^4.3.1 for configuration merging
  • Plugin Architecture: Follows SVGR's standard plugin interface pattern
  • TypeScript Support: Fully typed with generated .d.ts files
  • Node.js Compatibility: Requires Node.js >=14

Common Configuration Examples

Minimal setup:

{
  "plugins": ["@svgr/plugin-prettier"]
}

With custom prettier config:

{
  "plugins": ["@svgr/plugin-prettier"],
  "prettier": true,
  "prettierConfig": {
    "semi": false,
    "singleQuote": true,
    "printWidth": 100
  }
}

Disable runtime config resolution:

{
  "plugins": ["@svgr/plugin-prettier"],
  "prettier": true,
  "runtimeConfig": false,
  "prettierConfig": {
    "semi": true,
    "tabWidth": 2
  }
}

docs

index.md

tile.json