Skip to content
KitQL

💄 @kitql/eslint-config

To have linting & formatting in your project, you need 20 dep, files, … and it’s a pain to maintain in each project.

Here the idea is to reduce as much as possible the config on your end. (Of course, you can still tune things)

Installation

Section titled “Installation”
Terminal window
npm i -D @kitql/eslint-config eslint prettier

You need to install the peer dependencies you want to use (by default: eslint, prettier).

@kitql/eslint-config ships four optional tools - install only what you want to use:

| Tool | What it does | Install | | -------- | ------------------------------------------------------- | -------------------------- | | eslint | Linter (svelte rules, pnpm catalog rules, custom rules) | npm i -D eslint | | prettier | Formatter (works on every file type, incl. .svelte) | npm i -D prettier | | oxlint | Faster linter (Rust); covers most JS/TS rules | npm i -D oxlint | | tsgolint | Type-aware lint rules for oxlint | npm i -D oxlint-tsgolint | | oxfmt | Faster formatter (Rust); doesn’t speak .svelte yet | npm i -D oxfmt |

That’s it: no public-hoist-pattern and no need to list every eslint/prettier plugin in your own package.json. @kitql/eslint-config ships them all as its own dependencies and resolves them internally.

eslint config

Section titled “eslint config”
eslint.config.js
import { kitql } from '@kitql/eslint-config'


/** @type { import('eslint').Linter.Config[]} */
const config = [
  ...kitql(),
  {
    name: 'app:rules',
    rules: {
      // Some custom things?
    },
  },
]


export default config

You can check your config running this tool

Terminal window
npx @eslint/config-inspector

prettier config

Section titled “prettier config”
.prettierrc.js
import { kitql } from '@kitql/eslint-config/.prettierrc.js'


export default {
  ...kitql(),
  // Some custom things?
}

oxlint config

Section titled “oxlint config”
.oxlintrc.json
{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "extends": ["./node_modules/@kitql/eslint-config/.oxlintrc.json"],
  "rules": {
    // Some custom things?
  },
}

The shipped config enables @e18e/eslint-plugin + eslint-plugin-depend for modern-JS suggestions (prefer Array.at, Date.now, URL.canParse, …) and the correctness category at error level.

oxfmt config

Section titled “oxfmt config”
.oxfmtrc.json
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "tabWidth": 1,
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false,
  "arrowParens": "always",
  "printWidth": 100,
  "sortImports": {
    "groups": [
      "builtin",
      { "newlinesBetween": false },
      "external",
      "kitql",
      "sveltekit",
      "aliases",
      ["parent", "sibling", "index"],
      "unknown",
    ],
    "customGroups": [
      { "groupName": "kitql", "elementNamePattern": ["@kitql/**"] },
      { "groupName": "sveltekit", "elementNamePattern": ["$env", "$env/**", "$app", "$app/**"] },
      { "groupName": "aliases", "elementNamePattern": ["$*", "$*/**"] },
    ],
    "newlinesBetween": true,
  },
}

oxfmt config has no extends (yet), so the file above is what @kitql/eslint-config ships as defaults - copy it, tweak as needed.

ignore things with

Section titled “ignore things with”
.prettierignore
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example


# Ignore files for PNPM, NPM and YARN
package.json
pnpm-lock.yaml
package-lock.json
yarn.lock


# Ignore files that are project specific
/db
/src/lib/ROUTES.ts

Add this to your package.json

Section titled “Add this to your package.json”
package.json
scripts: {
  "//// ---- BEST PRACTICES ---- ////": "",
  "lint": "kitql-lint",
  "format": "kitql-lint -f",
}

Picking which tools run

Section titled “Picking which tools run”

By default, kitql-lint runs eslint + prettier. Use --tools (-t) to change that:

Terminal window
# default - eslint + prettier
kitql-lint


# add oxlint (with type-aware rules)
kitql-lint -t eslint,prettier,oxlint,tsgolint


# 🦀 svelte + full oxc - the recommended combo for kitql / sveltekit projects.
# oxc handles all the fast paths; eslint + prettier stay around for svelte.
kitql-lint -t oxlint,tsgolint,oxfmt,eslint,prettier


# 🦀 pure oxc - no eslint, no prettier.
# you lose: .svelte linting & formatting, pnpm catalog rules.
kitql-lint -t oxlint,tsgolint,oxfmt

When oxfmt is in the tool set, prettier is auto-restricted to **/*.svelte (oxfmt can’t parse svelte yet); oxfmt handles every other file type. Same logic in any mode.

In the recommended svelte combo, you’ll have oxlint and eslint both linting .ts/.js files. To avoid duplicate work, enable the oxlint integration in your eslint config:

eslint.config.js
import { kitql } from '@kitql/eslint-config'


export default [...kitql({ oxlint: { enable: true } })]

That disables in eslint every rule oxlint already covers - you only pay for the svelte/pnpm rules that oxlint can’t replace yet.