vite-config-editor

vite-config-editor

Fluent, idempotent edits to vite.config.ts via ts-morph

Install

npm install --save-dev vite-config-editor

Quick Start

// update-vite-config.js
import { ViteConfigEditor } from 'vite-config-editor';

const editor = ViteConfigEditor.open('./vite.config.ts');

// Ensure defineConfig wrapper
editor.ensureDefineConfigWrap();

// Add plugins
editor.ensurePluginCall({
  from: '@vitejs/plugin-react',
  callee: 'react',
  importKind: 'default',
  args: { jsx: true },
});

// Set properties with type-safe methods
editor.setString('base', '/app/');
editor.setNumber('server.port', 5173);
editor.setBoolean('build.sourcemap', true);

// Save with optional formatting
await editor.save({ format: true });

Run the script:

node update-vite-config.js

Features

• Idempotent operations: Run operations multiple times without creating duplicates
• Smart import resolution: Automatically handles import aliases and conflicts
• Advanced plugin management: Add, remove, and configure Vite plugins with full control
• Type-safe property setters: Dedicated methods for strings, numbers, booleans, and objects
• Configurable formatting: Optional code formatting and import organization
• Clear error messages: Actionable errors with file context and suggestions
• TypeScript AST: Powered by ts-morph for reliable code transformations
• Multiple config shapes: Supports export default defineConfig({...}), aliased defineConfig, and plain objects

API Documentation

Import Management

ensureDefaultImport(from: string, desiredLocal: string): string

Returns the actual local identifier used, avoiding duplicates when imports already exist.

const id = editor.ensureDefaultImport('@vitejs/plugin-react', 'customReact');
// Returns 'react' if already imported as 'react', otherwise 'customReact'

ensureNamedImport(from: string, name: string, alias?: string): string

editor.ensureNamedImport('vite', 'defineConfig', 'dc');
// import { defineConfig as dc } from 'vite'

Plugin Management

ensurePluginCall(spec: PluginSpec): ViteConfigEditor

Intelligently adds plugins, detecting existing ones even with different import names.

editor.ensurePluginCall({
  from: '@vitejs/plugin-vue',
  callee: 'vue',
  importKind: 'default',
  args: { jsx: true },
});

removePluginCall(pluginName: string): ViteConfigEditor

editor.removePluginCall('react');

addToPluginArrayArg(pluginName: string, argPath: string, value: string, options?)

Supports nested paths and insertion anchoring:

// Add to nested array
editor.addToPluginArrayArg('laravel', 'build.input', 'app.js');

// Insert after specific item
editor.addToPluginArrayArg('laravel', 'input', 'app.js', {
  after: 'app.css',
});

Property Management

Type-safe setters

editor.setString('base', '/app/');
editor.setBoolean('build.sourcemap', true);
editor.setNumber('server.port', 5173);
editor.mergeObject('resolve', { alias: { '@': '/src' } });

Array management

editor.addUniqueStringToArray('resolve.extensions', '.ts');

Saving

await editor.save({
  format: true, // Format code (default: false)
  organizeImports: true, // Organize imports (default: false)
  preserveEOL: true, // Preserve line endings (default: true)
});

Advanced Usage

Import Alias Handling

The library correctly handles existing imports with different names:

// Config has: import myReact from '@vitejs/plugin-react'
editor.ensurePluginCall({
  from: '@vitejs/plugin-react',
  callee: 'react',
  importKind: 'default',
});
// Uses existing 'myReact', doesn't add duplicate import

DefineConfig Aliasing

Detects and preserves defineConfig aliases:

// Config has: import { defineConfig as dc } from 'vite'
//            export default dc({ ... })
editor.ensureDefineConfigWrap(); // Correctly uses 'dc'

Import Consolidation

editor.consolidateImports();
// Before: import { a } from 'vite'; import { b } from 'vite';
// After: import { a, b } from 'vite';

Error Handling

Clear, actionable errors with context:

try {
  ViteConfigEditor.open('./missing.ts');
} catch (error) {
  // Cannot find config file at: ./missing.ts
  // Working directory: /current/path
  // Suggested path: /current/path/missing.ts
}

Type Definitions

type PluginSpec = {
  from: string; // Module to import from
  callee: string; // Function to call
  argsText?: string; // Raw arguments (default: "()")
  importKind?: 'default' | 'named';
  importAlias?: string; // Desired import alias
  args?: any; // Arguments object
};

type FormatOptions = {
  format?: boolean; // Format file
  organizeImports?: boolean; // Organize imports
  preserveEOL?: boolean; // Preserve line endings
};