fix: change ESLint configuration and doc

fi3ework · Jul 17, 2021 · e825711 · e825711
1 parent e2c9408
commit e825711
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 305 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,16 @@
 # vite-plugin-checker
 
-A Vite plugin that runs TypeScript, VLS, vue-tsc and other checkers in worker thread.
+A Vite plugin that can run TypeScript, VLS, vue-tsc, ESLint in worker thread.
 
 [![npm version](https://img.shields.io/npm/v/vite-plugin-checker)](https://www.npmjs.com/package/vite-plugin-checker) [![downloads/month](https://img.shields.io/npm/dm/vite-plugin-checker)](https://www.npmtrends.com/vite-plugin-checker) [![Unit Test](https://github.com/fi3ework/vite-plugin-checker/actions/workflows/ci.yml/badge.svg)](https://github.com/fi3ework/vite-plugin-checker/actions/workflows/ci.yml)
 [![codecov](https://codecov.io/gh/fi3ework/vite-plugin-checker/branch/main/graph/badge.svg?token=YCU4HJ66RA)](https://codecov.io/gh/fi3ework/vite-plugin-checker)
 
 ## Features
 
-- ⚡️ Speeds up TypeScirpt, VLS, etc. checkers by running in worker thread in serve mode
-- 🌈 Works good with vanilla TypeScript, React, Vue2, Vue3
+- ⚡️ Speeds up TypeScript, VLS, etc. checkers by running in worker thread in serve mode
+- 🌈 Works good with vanilla JS / TS, React, Vue2, Vue3
 - ❄️ Prompt errors in Vite HMR overlay and terminal console
-- 🌗 Support serve and build mode
+- 🌗 Support both serve and build mode
 
 <p align="center">
   <img alt="screenshot" src="https://user-images.githubusercontent.com/12322740/113175704-48cf1e80-927e-11eb-9bb5-43ab1b218cb2.png">
@@ -31,15 +31,17 @@ Add it to Vite config file.
 import checker from 'vite-plugin-checker'
 
 export default {
-  plugins: [checker({ typescript: true })],
+  plugins: [checker({ typescript: true })], // e.g. use TypeScript check
 }
 ```
 
-Open localhost page and start development (it's recommended to open browser for a better terminal display, see [#27](https://github.com/fi3ework/vite-plugin-checker/pull/27)).
+Open localhost page and start development 🚀.
+
+_It's recommended to open browser for a better terminal display, see [#27](https://github.com/fi3ework/vite-plugin-checker/pull/27)._
 
 ## Configuration
 
-> See detail options in [advanced config](#advanced-config) section.
+Detailed configuration is in [advanced config](#advanced-config) section.
 
 ### React / Vanilla TypeScript
 
@@ -55,7 +57,7 @@ export default {
 
 ### Vue (use Vetur / VLS)
 
-1. Install [vls](https://www.npmjs.com/package/vls), plugin uses vls as the check server.
+1. Make sure [vls](https://www.npmjs.com/package/vls) is installed as a peer dependency, plugin will use vls as the check server.
 
 ```bash
 yarn add vls -D
@@ -64,16 +66,14 @@ yarn add vls -D
 2. Add `vls` field to plugin config.
 
 ```js
-import checker from 'vite-plugin-checker'
-
 module.exports = {
   plugins: [checker({ vls: true })],
 }
 ```
 
 ### Vue (use Volar / vue-tsc)
 
-> Only support checking in **build mode** since `vue-tsc` doesn't support watch mode for now.
+_Only support checking in **build mode** since `vue-tsc` doesn't support watch mode for now._
 
 1. Make sure [vue-tsc](https://www.npmjs.com/package/vue-tsc) is installed as a peer dependency.
 
@@ -87,6 +87,25 @@ export default {
 }
 ```
 
+### ESLint
+
+1. Make sure [eslint](https://www.npmjs.com/package/eslint) is installed as a peer dependency.
+
+2. Add `eslint` field to plugin config.
+
+```js
+export default {
+  plugins: [
+    checker({
+      eslint: {
+        files: ['./src'],
+        extensions: '.ts',
+      },
+    }),
+  ],
+}
+```
+
 ## Advanced config
 
 Plugin can accept an object configuration.
@@ -111,11 +130,12 @@ export default {
 
 ---
 
-**For config fields below:**
+**For each checker config fields below:**
 
+- If the filed is not falsy. The corresponding checker server should be installed as a peer dependency.
 - Set to `true` to use checker with it's default values
-- Leave the field blank or set to `false` to disable the checker
-- Enable with an object advanced config (all keys are optional)
+- Leave the field blank or a falsy value to disable the checker
+- Enable with an object advanced config
 
 ### config.typescript
 
@@ -126,39 +146,26 @@ export default {
 
 ### config.vls
 
-_If `vls` filed is not falsy. [vls](https://www.npmjs.com/package/vls) **must** be installed as a peer dependency to provide VLS needed dependencies._
-
-| field | Type     | Default value | Description |
-| :---- | -------- | ------------- | ----------- |
-| todo  | `string` | todo          | todo        |
+_coming soon._
 
-e.g.
-
-```js
-import checker from 'vite-plugin-checker'
+| field | Type | Default value | Description |
+| :---- | ---- | ------------- | ----------- |
+|       |      |               |             |
 
-module.exports = {
-  plugins: [
-    checker({
-      vls: {
-        /** No options for now */
-      },
-    }),
-  ],
-}
-```
+### config.vueTsc
 
-<!-- | field | Type     | Default value                                         | Description              |
-| :---- | -------- | ----------------------------------------------------- | ------------------------ |
-| root  | `string` | [Vite config](https://vitejs.dev/config/#root) `root` | Root dir for checker run | -->
+| field | Type | Default value | Description |
+| :---- | ---- | ------------- | ----------- |
+|       |      |               |             |
 
-### config.vueTsc
+### config.eslint
 
-- type: `boolean`
+_coming soon._
 
-<!-- | field | Type     | Default value                                         | Description              |
-| :---- | -------- | ----------------------------------------------------- | ------------------------ |
-| root  | `string` | [Vite config](https://vitejs.dev/config/#root) `root` | Root dir for checker run | -->
+| field      | Type                 | Default value          | Description                                                                                                                                                                             |
+| :--------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| files      | `string \| string[]` | This value is required | The lint target files. This can contain any of file paths, directory paths, and glob patterns. ([Details](https://eslint.org/docs/developer-guide/nodejs-api#parameters-1)).            |
+| extensions | `string[]`           | `['.js']`              | Specify linted file extensions, 'extensions' must be an array of non-empty strings, e.g. `['.jsx', '.js']`. ([Details](https://eslint.org/docs/developer-guide/nodejs-api#parameters)). |
 
 ## Playground
 
@@ -167,7 +174,7 @@ Run projects in [`playground/*`](./playground) to try it out.
 ```bash
 pnpm i
 npm run build
-cd ./playground/<ONE_EXAMPLE>   # ts / vls / vue-tsc
+cd ./playground/<ONE_EXAMPLE>   # ts / vls / vue-tsc / vanilla ts
 npm run dev                     # test serve
 npm run build                   # test build
 ```

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "build": "pnpm -r --filter ./packages run build",
     "build:test": "pnpm -r --filter ./packages run build:test",
     "lint": "eslint --ext .js,.ts packages/*/src/**",
-    "test": "jest --clearCache && cross-env DEBUG=pw:api jest --runInBand",
+    "test": "jest --clearCache && cross-env jest --runInBand",
     "test:coverage": "jest --clearCache && jest --runInBand --coverage=true",
     "changelog": "pnpm -r --filter ./packages run changelog",
     "test:watch": "jest -w",
@@ -49,7 +49,6 @@
     "jest-serializer-path": "^0.1.15",
     "lint-staged": "^11.0.0",
     "minimist": "^1.2.5",
-    "npm-run-all": "^4.1.5",
     "playwright-chromium": "^1.12.3",
     "prompts": "^2.4.1",
     "rimraf": "^3.0.2",

diff --git a/packages/vite-plugin-checker/src/checkers/eslint/main.ts b/packages/vite-plugin-checker/src/checkers/eslint/main.ts
@@ -1,6 +1,6 @@
 import { ESLint } from 'eslint'
 // import debounce from 'lodash.debounce'
-import os from 'os'
+// import os from 'os'
 import path from 'path'
 import invariant from 'tiny-invariant'
 import { parentPort } from 'worker_threads'
@@ -16,8 +16,6 @@ import {
 import type { CreateDiagnostic } from '../../types'
 import type { ErrorPayload } from 'vite'
 
-function findOneErrorFromCache() {}
-
 const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
   let overlay = true // Vite defaults to true
   let currErr: ErrorPayload['err'] | null = null
@@ -32,8 +30,7 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
     async configureServer({ root }) {
       if (!pluginConfig.eslint) return
 
-      const extensions = pluginConfig.eslint.ext ? pluginConfig.eslint?.ext.split(',') : undefined
-      const namedExtensions = extensions ?? ['.js']
+      const extensions = pluginConfig.eslint.extensions ?? ['.js']
       const eslint = new ESLint({
         extensions,
       })
@@ -53,7 +50,7 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
       Checker.watcher.add(paths)
       Checker.watcher.on('all', async (event, filePath) => {
         if (!['add', 'change'].includes(event)) return
-        if (!namedExtensions.includes(path.extname(filePath))) return
+        if (!extensions.includes(path.extname(filePath))) return
 
         const diagnostics = await eslint.lintFiles(filePath)
         const normalized = diagnostics.map((p) => normalizeEslintDiagnostic(p)).flat(1)
@@ -87,17 +84,17 @@ export class EslintChecker extends Checker<'eslint'> {
       absFilePath: __filename,
       build: {
         buildBin: (pluginConfig) => {
-          let ext = '.js'
+          let ext = ['.js']
           let files: string[] = []
           if (pluginConfig.eslint) {
-            ext = pluginConfig.eslint.ext ?? ext
+            ext = pluginConfig.eslint.extensions ?? ext
             files =
               typeof pluginConfig.eslint.files === 'string'
                 ? [pluginConfig.eslint.files]
                 : pluginConfig.eslint.files
           }
 
-          return ['eslint', ['--ext', ext, ...files]]
+          return ['eslint', ['--ext', ext.join(','), ...files]]
         },
       },
       createDiagnostic,

diff --git a/packages/vite-plugin-checker/src/types.ts b/packages/vite-plugin-checker/src/types.ts
@@ -31,18 +31,18 @@ export type VlsConfig =
 export type EslintConfig =
   | false
   | {
-      /** One or more glob patterns to the files that should be linted. Works the same as the eslint command. */
+      /** The lint target files. This can contain any of file paths, directory paths, and glob patterns. ([Details](https://eslint.org/docs/developer-guide/nodejs-api#parameters-1)). */
       files: string | string[]
       /**
-       * Specify JavaScript file extensions, e.g. '.jsx,.js'
-       * @defaultValue: .js
+       * Specify linted file extensions, 'extensions' must be an array of non-empty strings, e.g. `['.jsx', '.js']`. ([Details](https://eslint.org/docs/developer-guide/nodejs-api#parameters)).
+       * @defaultValue: ['.js']
        */
-      ext?: string
+      extensions?: string[]
       /**
        * millisecond for watcher to wait to trigger re-lint
        * @defaultValue: 300
        */
-      watchDelay?: number
+      // watchDelay?: number
     }
 
 /** checkers shared configuration */

diff --git a/playground/vanilla-ts/vite.config.ts b/playground/vanilla-ts/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
     checker({
       eslint: {
         files: ['./src'],
-        ext: '.ts',
+        extensions: ['.ts'],
       },
     }),
   ],