vite-plugin-checker icon indicating copy to clipboard operation
vite-plugin-checker copied to clipboard

How to use this in NX?

Open pongells opened this issue 2 years ago • 3 comments

Hello, I would like to use this plugin in a Nx monorepo.

I managed to make TS work by using this config into my app vite.config.ts:

plugins: [
    react(),
    checker({
      typescript: {
        root: `${process.cwd()}/apps/MYAPP`,
        tsconfigPath: "tsconfig.app.json",
      },
    }),
    tsconfigPaths({
      root: "../../",
      projects: ["tsconfig.base.json"],
    }),
  ],

Like this it correctly detects issues in the app as well as any imported local library, but I cannot find a way to make eslint work.

Any idea? Thanks

pongells avatar Feb 10 '23 12:02 pongells

@pongells my nx project is v16, by using your code I'm able to run eslint and tsc without any issue

    plugins: [
      react(),
      viteTsConfigPaths({
        root: '../../',
      }),
      checker({
        typescript: {
          root: `${process.cwd()}/apps/myapp`,
          tsconfigPath: 'tsconfig.app.json',
        },
        eslint: {
          lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
        },
      }),
    ],

adamnator92 avatar Aug 24 '23 10:08 adamnator92

@pongells my nx project is v16, by using your code I'm able to run eslint and tsc without any issue

    plugins: [
      react(),
      viteTsConfigPaths({
        root: '../../',
      }),
      checker({
        typescript: {
          root: `${process.cwd()}/apps/myapp`,
          tsconfigPath: 'tsconfig.app.json',
        },
        eslint: {
          lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
        },
      }),
    ],

does that find out eslint issues in the myapp project AND also in the libraries imported in the project?

it does not for me.. I just tested by creating an eslint error in a library and serving the app: [ESLint] Found 0 error and 0 warning

pongells avatar Aug 28 '23 12:08 pongells

@pongells, @adamnator92 it works, but i have to copy paste that plugun config for each nx project. Dont you know how to avoid this boilerplate? I need something like

checker({
        typescript: {
          //root: `${process.cwd()}/apps/myapp`,
          root: `${process.cwd()}/${PATH_TO_FOLDER_WITH_TSCONFIG}`,
          tsconfigPath: 'tsconfig.app.json',
        },
        eslint: {
          lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
        },
}),

Rusl10 avatar Feb 02 '24 17:02 Rusl10