vite-plugin-linter/README.MD

Plugin for linting files with Vite

# 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

```js
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

```js
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](https://github.com/micromatch/picomatch#globbing-features) 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](https://github.com/micromatch/picomatch#globbing-features) 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](https://eslint.org/docs/developer-guide/nodejs-api#parameters) 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](https://www.typescriptlang.org/tsconfig#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](https://bitbucket.org/unimorphic/vite-plugin-linter/src/master/src/Linter.ts)

See the [included linters](https://bitbucket.org/unimorphic/vite-plugin-linter/src/master/src/linters/) for examples


## Feedback

[Submit](https://bitbucket.org/unimorphic/vite-plugin-linter/issues/new) bug reports and other feedback in the [issues](https://bitbucket.org/unimorphic/vite-plugin-linter/issues?status=new&status=open) section


## License

MIT