vite-plugin-linter

Vite plugin to lint files and show the linter output in the Vite output and the browser console. The main difference between this plugin and using similar Rollup plugins is that this plugin shows the output in the browser console. Note this plugin is Vite only as it uses the Vite specific hook configureServer.

Included linters: ESLint & TypeScript

Install

npm install vite-plugin-linter --save-dev

Usage

Basic

import { defineConfig } from "vite";
import { EsLinter, linterPlugin, TypeScriptLinter } from "vite-plugin-linter";

export default defineConfig((configEnv) => ({
  plugins: [
    linterPlugin({
      include: ["./src/**/*.ts", "./src/**/*.tsx"],
      linters: [new EsLinter({ configEnv: configEnv }), new TypeScriptLinter()],
    }),
  ],
}));

Fancy

import { defineConfig } from "vite";
import { EsLinter, linterPlugin, TypeScriptLinter } from "vite-plugin-linter";

export default defineConfig((configEnv) => ({
  plugins: [
    linterPlugin({
      include: ["./src/**/*.ts", "./src/**/*.tsx"],
      linters: [
        new EsLinter({
          configEnv: configEnv,
          serveOptions: { clearCacheOnStart: true },
        }),
        new TypeScriptLinter(),
      ],
      build: {
        includeMode: "filesInFolder",
      }
    }),
  ],
}));

linterPlugin Options

build.disable / serve.disable

• Type: boolean
• Default: false

If the plugin should not execute when called via the build/serve command

build.includeMode / serve.includeMode

• Type: "processedFiles" | "filesInFolder"
• Default: processedFiles

Which files to lint when called via the build/serve command processedFiles lints only the files processed by Vite filesInFolder lints all files in the project folder

exclude

• Type: String | RegExp | Array[...String|RegExp]
• Default: /node_modules/

File(s) to exclude. A valid picomatch pattern, or array of patterns. Ex: .\src\mine.ts

include

• Type: String | RegExp | Array[...String|RegExp]
• Default: undefined

File(s) to include. A valid picomatch pattern, or array of patterns. Ex: .\src\**\*.ts

injectFile

• Type: string
• Default: The first file not in node_modules

File to inject the browser console logging code into

linters

• Type: Linter[]
• Required

Linters to run

EsLinter Options

buildOptions

• Type: EsLintOptions
• Default: cache: false, fix: false

Options used when called via the build command

configEnv

• Type: ConfigEnv
• Required

The current Vite configuration environment

serveOptions

• Type: EsLintOptions
• Default: cache: true, cacheLocation: "./node_modules/.cache/.eslintcache", fix: false

Options used when called via the serve command

EsLintOptions Type

This type extends ESLint.Options with the following additional members

clearCacheOnStart

• Type: boolean
• Default: false

If the cache file should be removed before each start

formatter

• Type: string | ESLint.Formatter
• Default: stylish

Output formatter https://eslint.org/docs/user-guide/formatters/

TypeScriptLinter Options

This type extends ts.CompilerOptions with the following additional member

configFilePath

• Type: string
• Default: tsconfig.json

Path to the TypeScript config file

Command Line

A node script that executes the configured linters is included that can be run via npm, for example, in package.json: "scripts": { "lint": "vite-plugin-linter" }. A example of where this could be used is in a Git pre-commit hook. The includeMode option is always filesInFolder when running via this script.

Custom Linters

Custom linters can be created by extending the Linter interface

See the included linters for examples

Feedback

Submit bug reports and other feedback in the issues section

License

MIT