docs: update README

fi3ework · Feb 7, 2022 · d3002de · d3002de
1 parent 1424f39
commit d3002de
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -13,39 +13,39 @@ A Vite plugin that can run TypeScript, VLS, vue-tsc, ESLint in worker thread.
 - 🌗 Support both serve and build mode
 
 <p align="center">
-  <img alt="screenshot" src="https://user-images.githubusercontent.com/12322740/126038209-81901247-86f1-4129-86c6-e1f8a13417e7.png">
+  <img alt="screenshot" src="https://user-images.githubusercontent.com/12322740/152739742-7444ee62-9ca7-4379-8f02-495c612ecc5c.png">
 </p>
 
-> History version documentations [0.1](https://github.com/fi3ework/vite-plugin-checker/tree/v0.1.x) | [0.2](https://github.com/fi3ework/vite-plugin-checker/tree/v0.2)
+> History version documentations [0.1](https://github.com/fi3ework/vite-plugin-checker/tree/v0.1.x), [0.2](https://github.com/fi3ework/vite-plugin-checker/tree/v0.2), [0.3](https://github.com/fi3ework/vite-plugin-checker/tree/v0.3.x). It's highly recommended to use latest version before 1.0.0, although there's some breaking changes, the plugin configuration is quite simple.
 
 ## Getting Started
 
-Install plugin.
+1. Install plugin.
 
-```bash
-yarn add vite-plugin-checker -D
-```
+   ```bash
+   pnpm add vite-plugin-checker -D
+   ```
 
-Add it to Vite config file.
+2. Add it to Vite config file. Add the checker property you need. We add TypeScript below for example.
 
-```ts
-// vite.config.js
-import checker from 'vite-plugin-checker'
+   ```ts
+   // vite.config.js
+   import checker from 'vite-plugin-checker'
 
-export default {
-  plugins: [checker({ typescript: true })], // e.g. use TypeScript check
-}
-```
+   export default {
+     plugins: [checker({ typescript: true })], // e.g. use TypeScript check
+   }
+   ```
 
-Open localhost page and start development 🚀.
+3. 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)._
+   _It's recommended to open browser for a better terminal display, see [#27](https://github.com/fi3ework/vite-plugin-checker/pull/27)._
 
-## Configuration
+## Available checkers
 
-Detailed configuration is in [advanced config](#advanced-config) section.
+You can add following supported checkers. Detailed configuration for each checker is in [advanced config](#advanced-config) section.
 
-### React / Vanilla TypeScript
+### TypeScript (React / Vanilla TS)
 
 1. Make sure [typescript](https://www.npmjs.com/package/typescript) is installed as a peer dependency.
 
@@ -61,56 +61,59 @@ export default {
 
 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
-```
+   ```bash
+   pnpm add vls -D
+   ```
 
 2. Add `vls` field to plugin config.
 
-```js
-module.exports = {
-  plugins: [checker({ vls: true })],
-}
-```
+   ```js
+   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._
 
 1. Make sure [vue-tsc](https://www.npmjs.com/package/vue-tsc) is installed as a peer dependency.
 
+   ```bash
+   pnpm add vue-tsc -D
+   ```
+
 2. Add `vueTsc` field to plugin config.
 
 3. (Optional) The type check is powered by `vue-tsc` so it supports Vue2 according to the [documentation](https://github.com/johnsoncodehk/volar#using), you need to install `@vue/runtime-dom` by yourself.
 
-```js
-export default {
-  plugins: [checker({ vueTsc: true })],
-}
-```
+   ```js
+   export default {
+     plugins: [checker({ vueTsc: true })],
+   }
+   ```
 
 ### 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'],
-      },
-    }),
-  ],
-}
-```
+   ```js
+   export default {
+     plugins: [
+       checker({
+         eslint: {
+           lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
+         },
+       }),
+     ],
+   }
+   ```
 
-## Advanced config
+## Advanced configuration
 
-Plugin can accept an object configuration.
+Plugin can accept an object with detailed configuration.
 
 ```js
 export default {
@@ -221,7 +224,7 @@ Run projects in [`playground/*`](./playground) to try it out.
 ```bash
 pnpm i
 pnpm run build
-cd ./playground/<ONE_EXAMPLE>    # choose one example
+cd ./playground/<one_exapmple>    # choose one example
 pnpm run dev                     # test in serve mode
 pnpm run build                   # test in build mode
 ```

diff --git a/packages/vite-plugin-checker/package.json b/packages/vite-plugin-checker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-checker",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.2",
   "description": "Vite plugin that runs TypeScript type checker on a separate process.",
   "main": "lib/main.js",
   "bin": {

diff --git a/packages/vite-plugin-checker/src/checkers/eslint/main.ts b/packages/vite-plugin-checker/src/checkers/eslint/main.ts
@@ -92,7 +92,6 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
       const diagnostics = await eslint.lintFiles(files)
 
       manager.initWith(diagnostics.map((p) => normalizeEslintDiagnostic(p)).flat(1))
-      // diagnosticsCache = diagnostics.map((p) => normalizeEslintDiagnostic(p)).flat(1)
       dispatchDiagnostics()
 
       // watch lint
@@ -120,8 +119,6 @@ export class EslintChecker extends Checker<'eslint'> {
         buildBin: (pluginConfig) => {
           if (pluginConfig.eslint) {
             const { lintCommand } = pluginConfig.eslint
-            // const { _ } = cmdToOptions(lintCommand)
-
             return ['eslint', lintCommand.split(' ').slice(1)]
           }
           return ['eslint', ['']]

diff --git a/packages/vite-plugin-checker/src/checkers/typescript/main.ts b/packages/vite-plugin-checker/src/checkers/typescript/main.ts
@@ -77,8 +77,6 @@ const createDiagnostic: CreateDiagnostic<'typescript'> = (pluginConfig) => {
           case 6193: // 1 Error
           case 6194: // 0 errors or 2+ errors
             if (overlay) {
-              // const normalizedDiagnostics = normalizeTsDiagnostic(diagnostic)
-              // parentPort?.postMessage(toWsPayload(currErrs))
               parentPort?.postMessage({
                 type: ACTION_TYPES.overlayError,
                 payload: toViteCustomPayload('typescript', currDiagnostics),

diff --git a/packages/vite-plugin-checker/src/main.ts b/packages/vite-plugin-checker/src/main.ts
@@ -61,7 +61,6 @@ export default function Plugin(userConfig: UserPluginConfig): Plugin {
       checkers = createCheckers(userConfig || {}, env)
       if (viteMode !== 'serve') return
 
-      // const hmr = config.server?.hmr
       checkers.forEach((checker) => {
         const workerConfig = checker.serve.config
         workerConfig({