Vite+ with .oxlintrc.json / .oxfmtrc.json: keeping the CLI and the editor in sync

[dorukozerr]

A workaround for a Vite+ project where vp lint / vp fmt read their config from vite.config.ts, while an editor integration (here: Vim + coc-oxc) runs the Oxc language server and finds the config through the standalone Oxc config files.

Vite+ wants lint and format config inside vite.config.ts:

Put lint configuration directly in the lint block in the root vite.config.ts so all your
configuration stays in one place. We do not recommend using oxlint.config.ts or
.oxlintrc.json with Vite+.

As mentioned in other places vp lint/fmt commands skips the config files and uses either vite.config.ts lint/fmt configuration blocks or default settings. I found the vscode configuration for makin oxfmt use vite.config.ts fmt settings but I'm using coc-oxc and there was no option for this, also its likely that I couldn't translate that configuration

I saw multiple issues mentioning oxc config file skipping problem directly or indirectly

#2698
#826
PR #2483 for #2430
#3065
#3089
PR #2995

The workaround

This is just my temporary workaround for the vpr fmt/lint and editor auto format + lint mismatches, I'm not even exactly sure about is this issue already solved or not, I mean I saw the .vscode configuration for using vite.config.ts for oxc.fmt.configPath.

Keep .oxlintrc.json and .oxfmtrc.json as the only source of truth, then read and parse them inside vite.config.ts and pass the result to the lint and fmt blocks.

• The editor (coc-oxc / Oxc language server) finds .oxlintrc.json / .oxfmtrc.json through normal discovery. These files win over vite.config.ts in the editor anyway.
• vp lint / vp fmt / vp check / vp staged read vite.config.ts, which now holds the same objects.

Files

.
├── .oxfmtrc.json      # format config (source of truth)
├── .oxlintrc.json     # lint config (source of truth)
├── package.json       # scripts call vp fmt / vp lint
└── vite.config.ts     # reads both JSON files into fmt / lint

vite.config.ts

import { readFileSync } from 'fs'
import { resolve } from 'path'

import { cloudflare } from '@cloudflare/vite-plugin'
import tailwindcss from '@tailwindcss/vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import { defineConfig, lazyPlugins, type UserConfig } from 'vite-plus'

const parsedOxcrc = <
  T extends string,
  K = T extends '.oxlintrc.json'
    ? UserConfig['lint']
    : T extends '.oxfmtrc.json'
      ? UserConfig['fmt']
      : never
>(
  conf: T
): K =>
  JSON.parse(readFileSync(resolve(import.meta.dirname, conf), { encoding: 'utf8', flag: 'r' }))

const lintConf = parsedOxcrc('.oxlintrc.json')
const fmtConf = parsedOxcrc('.oxfmtrc.json')

const config = defineConfig({
  fmt: fmtConf,
  lint: lintConf,
  plugins: lazyPlugins(() => [
    devtools(),
    cloudflare({ viteEnvironment: { name: 'ssr' } }),
    tailwindcss(),
    tanstackStart(),
    viteReact({ compiler: true })
  ])
  // resolve: { ... },
  // run: { ... },
  // server: { ... }
})

export default config

package.json scripts

The scripts keep using the Vite+ commands. They pick the config up through vite.config.ts:

{
  "scripts": {
    "fmt": "vp fmt --check",
    "fmt:fix": "vp fmt",
    "lint": "vp lint",
    "lint:fix": "vp lint --fix",
    "type-check": "tsc --noEmit",
    "pre-commit": "vpr fmt && vpr fix && vpr type-check"
  }
}

[leaysgur]

If I recall correctly, even in coc-oxc version 0.0.4 and later, it was changed to run vp lint|fmt and search for vite.config.ts, so are you saying it's still not working?

https://github.com/oxc-project/coc-oxc/releases#release-v0.4.0

[dorukozerr]

I had this in my global coc-settings.json

"oxc.oxfmt.binPath": "/Users/dumdum/.local/share/vite-plus/bin/oxfmt",
"oxc.oxlint.binPath": "/Users/dumdum/.local/share/vite-plus/bin/oxlint",

When I disable those binPath's for oxfmt and oxlint it starts following vite.config.ts lint/fmt blocks instantly and it changes how it formats on my edits without a problem.

The reason I added those two setting to coc-settings.json was formatting standalone files that are not inside a project that has oxfmt/oxlint deps. Without that setting, formatting only works inside projects with oxc deps installed. Am I missing something again or do I need to either use node_modules oxc bin paths in each project with custom /project/.vim/coc-settings.json configurations or lose formatting for standalone files does not belong to any repo?

tldr: You're right coc-oxc uses vite.config.ts, and it even hot-reloads fmt/lint rules,

[leaysgur]

Note that Vite+ itself doesn't place oxlint / oxfmt in its bin directory.

Those shims come from a global install of the standalone oxc packages?, so they run as plain Oxc tools and look for .oxlintrc.json / .oxfmtrc.json, etc.
vite.config.ts is used only when they are launched via vp lint / vp fmt, which sets the VP_VERSION env.

As for your question, binPath takes priority over Vite+ detection by design, which is the same with other extensions.

The real gap may be that coc-oxc doesn't fall back to PATH when nothing is found in the project,
unlike others?

[dorukozerr]

It would be nice to have that, if oxfmt/oxlint enabled in global config then binPath configuration can be fully optional.

The real gap may be that coc-oxc doesn't fall back to PATH when nothing is found in the project,
unlike others?

I thought about not properly configuring coc env path but its only for node, then asked AI about possible configuration for oxc bin path similar to shell env PATH so it can use most relative one, at the end this came up and it works.

#!/bin/sh
# ~/.local/bin/resolve_oxfmt

# Use the nearest project oxfmt; fall back to the global vite-plus shim.
dir=$PWD
while [ "$dir" != "/" ]; do
if [ -x "$dir/node_modules/.bin/oxfmt" ]; then
exec "$dir/node_modules/.bin/oxfmt" "$@"
fi
dir=$(dirname "$dir")
done
exec "$HOME/.local/share/vite-plus/bin/oxfmt" "$@"

And the global coc-config.json

{
  // ...
  "oxc.oxfmt.binPath": "/Users/dumdum/.local/bin/resolve_oxfmt"
  // ...
}

I tested it and it seems working both in vite plus project with vite.config.ts configuration and standalone files. But I'm not sure about possible bin path's in node_modules folder, I have no idea for will it be in root .bin folder inside node_modules or somewhere else. Also it does not fallbacks to global executable properly, not found condition is hard-coded

[leaysgur]

Yeah, that script can work around it.
Just note that vite.config.ts is only picked up via vp fmt, which the script never runs.
So it uses .oxfmtrc.json if you have one, otherwise the defaults.

Anyway, issue created: oxc-project/coc-oxc#258