tessl/npm-vite-plugin-checker
Vite plugin that runs TypeScript type checker on a separate process.
—
Pending
eslint-checker.mddocs/
ESLint Checker
ESLint integration for JavaScript and TypeScript linting with customizable rules, file watching, and separate development and build configurations.
Capabilities
ESLint Configuration
Enable and configure ESLint linting with flexible options for different environments and use cases.
/**
* ESLint checker configuration
* - Set to `false` to disable ESLint checking
* - Provide configuration object for custom setup
*/
type EslintConfig = false | EslintConfigObject;
interface EslintConfigObject {
/** Configure path to watch files */
watchPath?: string | string[];
/**
* Lint command executed in build mode and used as default for dev mode
* when dev.overrideConfig is not provided
*/
lintCommand: string;
/**
* Use ESLint flat config format
* @default false
*/
useFlatConfig?: boolean;
/** Development-specific configuration */
dev?: Partial<EslintDevConfig>;
}
interface EslintDevConfig {
/** Override options translated from lintCommand for development mode */
overrideConfig: ESLint.Options;
/** Which diagnostic levels to emit from the plugin */
logLevel: ('error' | 'warning')[];
}Usage Examples:
// Basic ESLint configuration
checker({
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx,js,jsx}"',
},
});
// Advanced configuration with custom paths and dev options
checker({
eslint: {
watchPath: ['src', 'test'],
lintCommand: 'eslint "./src/**/*.{ts,tsx}" --max-warnings 0',
useFlatConfig: true,
dev: {
logLevel: ['error', 'warning'],
overrideConfig: {
baseConfig: {
extends: ['@typescript-eslint/recommended'],
},
useEslintrc: false,
},
},
},
});Watch Path Configuration
Configure which files and directories ESLint should monitor for changes in development mode.
interface EslintConfigObject {
/**
* Configure path to watch files
* - Single string path: 'src'
* - Multiple paths: ['src', 'test', 'lib']
* - Glob patterns: 'src/**/*.ts'
*/
watchPath?: string | string[];
}Usage Examples:
// Watch single directory
eslint: {
watchPath: 'src',
lintCommand: 'eslint src',
}
// Watch multiple directories
eslint: {
watchPath: ['src', 'test', 'lib'],
lintCommand: 'eslint src test lib',
}
// Watch with glob patterns
eslint: {
watchPath: ['src/**/*.{ts,tsx}', 'test/**/*.test.ts'],
lintCommand: 'eslint "src/**/*.{ts,tsx}" "test/**/*.test.ts"',
}Lint Command Configuration
The lintCommand defines how ESLint is executed and serves as the primary configuration.
interface EslintConfigObject {
/**
* Command executed in build mode and used as default config for dev mode
* Should include file patterns and any ESLint CLI options
*/
lintCommand: string;
}Command Examples:
// Basic TypeScript linting
lintCommand: 'eslint "./src/**/*.{ts,tsx}"'
// With specific rules and formatting
lintCommand: 'eslint "./src/**/*.{ts,tsx}" --max-warnings 0 --format unix'
// Multiple file patterns
lintCommand: 'eslint "./src/**/*.ts" "./test/**/*.test.ts" --ext .ts,.tsx'
// With configuration file
lintCommand: 'eslint "./src/**/*.{ts,tsx}" -c .eslintrc.build.json'Flat Config Support
ESLint flat config format support for modern ESLint configurations.
interface EslintConfigObject {
/**
* Use ESLint flat config format (eslint.config.js)
* @default false
*/
useFlatConfig?: boolean;
}Usage with Flat Config:
// eslint.config.js
export default [
{
files: ['src/**/*.{ts,tsx}'],
rules: {
'no-unused-vars': 'error',
'@typescript-eslint/no-unused-vars': 'error',
},
},
];
// vite.config.ts
checker({
eslint: {
lintCommand: 'eslint ./src',
useFlatConfig: true,
},
});Development Mode Configuration
Override ESLint behavior specifically for development mode with custom options and log levels.
interface EslintDevConfig {
/**
* Override ESLint options for development mode
* Takes precedence over options derived from lintCommand
*/
overrideConfig: ESLint.Options;
/**
* Control which diagnostic levels are emitted from the plugin
* @default ['error', 'warning']
*/
logLevel: ('error' | 'warning')[];
}Development Configuration Examples:
// Custom ESLint config for development
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
dev: {
overrideConfig: {
baseConfig: {
extends: [
'@typescript-eslint/recommended',
'plugin:react/recommended',
],
rules: {
// Relax some rules in development
'@typescript-eslint/no-unused-vars': 'warn',
'no-console': 'off',
},
},
useEslintrc: true,
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
// Only show errors in dev mode, ignore warnings
logLevel: ['error'],
},
}
// Completely different rule set for development
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
dev: {
overrideConfig: {
baseConfig: {
rules: {
// Development-friendly rules
'no-debugger': 'warn',
'no-console': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
},
},
},
logLevel: ['error', 'warning'],
},
}ESLint Options Interface
The overrideConfig accepts standard ESLint API options:
interface ESLint.Options {
/** Base configuration object */
baseConfig?: ESLint.ConfigData;
/** Whether to use .eslintrc.* files */
useEslintrc?: boolean;
/** File extensions to check */
extensions?: string[];
/** Patterns to ignore */
ignorePath?: string;
/** Custom rules directory */
rulePaths?: string[];
/** Fix problems automatically */
fix?: boolean;
/** Additional configuration */
[key: string]: any;
}Error Reporting
ESLint errors and warnings are reported with comprehensive information:
- Rule name: The specific ESLint rule that was violated
- Severity: Error or warning level
- File location: Exact file path and line/column numbers
- Message: Detailed description of the linting issue
- Code frame: Highlighted code snippet showing the problematic code
- Fix suggestion: Automatic fix information when available
Integration Examples
React TypeScript Project:
checker({
eslint: {
watchPath: 'src',
lintCommand: 'eslint "./src/**/*.{ts,tsx}" --max-warnings 0',
dev: {
overrideConfig: {
baseConfig: {
extends: [
'@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: { jsx: true },
},
},
},
logLevel: ['error', 'warning'],
},
},
});Vue TypeScript Project:
checker({
eslint: {
watchPath: ['src', 'components'],
lintCommand: 'eslint "./src/**/*.{ts,vue}" "./components/**/*.vue"',
dev: {
overrideConfig: {
baseConfig: {
extends: [
'@typescript-eslint/recommended',
'plugin:vue/vue3-recommended',
],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
},
},
},
},
},
});Install with Tessl CLI
npx tessl i tessl/npm-vite-plugin-checker