Voozh

Oxlint and Oxfmt are next-generation, Rust-based tools from the Oxc (JavaScript Oxidation Compiler) ecosystem, designed to replace traditional JavaScript/TypeScript linters and formatters with a heavy emphasis on speed and developer experience.

Installation

Javascript projects

PNPM

Yarn

NPM

Bun

pnpm add -D oxlint oxfmt

TypeScript projects

PNPM

Yarn

NPM

Bun

pnpm add -D oxlint oxfmt oxlint-tsgolint typescript vue-tsc

Package.json scripts

/package.json

"scripts": {
 "lint": "oxfmt && oxlint --fix",
 "lint:check": "oxfmt --check && oxlint",
 "typecheck": "vue-tsc --noEmit"
}

Configuration files

Create the following files:

oxlint configuration

JS projects: /.oxlintrc.json

TypeScript projects: /oxlint.config.ts

{
 "$schema": "./node_modules/oxlint/configuration_schema.json",

 "ignorePatterns": [
 "**/node_modules/",
 "dist/",
 "quasar.config.*.temporary.compiled*",
 ".quasar/",
 "src-cordova/",
 "src-capacitor/"
 ],

 "options": {
 "maxWarnings": 10
 },

 "plugins": ["vue", "import", "eslint", "promise", "unicorn"],

 "categories": {
 "correctness": "error"
 // "style": "error",
 // "pedantic": "warn",
 // "suspicious": "error",
 // "perf": "error",
 // "restriction": "error"
 },

 "rules": {},

 "env": {
 "builtin": true
 }
}

oxfmt configuration

JS projects: /.oxfmtrc.json

TypeScript projects: /oxfmt.config.ts

{
 "$schema": "./node_modules/oxfmt/configuration_schema.json",

 "ignorePatterns": [
 "**/node_modules/",
 "dist/",
 "quasar.config.*.temporary.compiled*",
 ".quasar/",
 "src-cordova/",
 "src-capacitor/"
 ],

 "printWidth": 80,
 "arrowParens": "avoid",
 "bracketSpacing": true,
 "bracketSameLine": false,
 "htmlWhitespaceSensitivity": "strict",
 "semi": false,
 "singleQuote": true,
 "quoteProps": "as-needed",
 "trailingComma": "none",
 "useTabs": false,
 "vueIndentScriptAndStyle": false
}

VSCode configuration

/.vscode/settings.json

Javascript

TypeScript

{
 "editor.codeActionsOnSave": {
 "source.fixAll.oxc": "always"
 },
 "oxc.fmt.configPath": ".oxfmtrc.json",
 "editor.defaultFormatter": "oxc.oxc-vscode",
 "editor.formatOnSave": true
}

Play nice with other devs using your project and recommend them to install the appropriate extension. And don’t forget to install it yourself too:

/.vscode/extensions.json

{
 "recommendations": ["oxc.oxc-vscode"]
}

ESLint + Prettier

Having a code linter (like ESLint v9+) in place is highly recommended and ensures your code looks legible. It also helps you capture some errors before even running the code.

When you scaffold a Quasar project folder it will ask you if you want ESLint (also prettier as a code formatter).

Javascript projects

Needed dependencies

PNPM

Yarn

NPM

Bun

pnpm add -D @eslint/js eslint@9 eslint-plugin-vue vue-eslint-parser globals vite-plugin-checker

If you want prettier as a code formatter, then install these too:

PNPM

Yarn

NPM

Bun

pnpm add -D prettier@3 @vue/eslint-config-prettier

The quasar.config file settings

/quasar.config file

build: {
 vitePlugins: [
 [
 'vite-plugin-checker',
 {
 eslint: {
 lintCommand:
 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
 useFlatConfig: true
 }
 },
 { server: false }
 ]
 ]
}

The ESLint configuration

/eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-vite/eslint'

// the following is optional, if you want prettier too:
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
 {
 /**
 * Ignore the following files.
 * Please note that pluginQuasar.configs.recommended() already ignores
 * the "node_modules" folder for you (and all other Quasar project
 * relevant folders and files).
 *
 * ESLint requires "ignores" key to be the only one in this object
 */
 // ignores: []
 },

 ...pluginQuasar.configs.recommended(),
 js.configs.recommended,

 /**
 * https://eslint.vuejs.org
 *
 * pluginVue.configs.base
 * -> Settings and rules to enable correct ESLint parsing.
 * pluginVue.configs[ 'flat/essential']
 * -> base, plus rules to prevent errors or unintended behavior.
 * pluginVue.configs["flat/strongly-recommended"]
 * -> Above, plus rules to considerably improve code readability and/or dev experience.
 * pluginVue.configs["flat/recommended"]
 * -> Above, plus rules to enforce subjective community defaults to ensure consistency.
 */
 ...pluginVue.configs['flat/essential'],

 {
 languageOptions: {
 ecmaVersion: 'latest',
 sourceType: 'module',

 globals: {
 ...globals.browser,
 ...globals.node, // SSR, Electron, config files
 ga: 'readonly', // Google Analytics
 cordova: 'readonly',
 Capacitor: 'readonly',
 chrome: 'readonly', // BEX related
 browser: 'readonly' // BEX related
 }
 },

 // add your custom rules here
 rules: {
 'prefer-promise-reject-errors': 'off',

 // allow debugger during development only
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
 }
 },

 {
 files: ['src-pwa/sw/**/*.js'],
 languageOptions: {
 globals: {
 ...globals.serviceworker
 }
 }
 },

 prettierSkipFormatting // optional, if you want prettier
]

TypeScript projects

Dependencies

PNPM

Yarn

NPM

Bun

pnpm add -D vue-tsc @vue/eslint-config-typescript @eslint/js eslint@9 eslint-plugin-vue globals vite-plugin-checker

If you want prettier as a code formatter, then install these too:

PNPM

Yarn

NPM

Bun

pnpm add -D prettier@3 @vue/eslint-config-prettier

The quasar.config settings

/quasar.config file

build: {
 vitePlugins: [
 [
 'vite-plugin-checker',
 {
 vueTsc: true,
 eslint: {
 lintCommand:
 'eslint -c ./eslint.config.js "./src*/**/*.{ts,js,mjs,cjs,vue}"',
 useFlatConfig: true
 }
 },
 { server: false }
 ]
 ]
}

ESLint configuration file

/eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import pluginVue from 'eslint-plugin-vue'
import pluginQuasar from '@quasar/app-vite/eslint'
import {
 defineConfigWithVueTs,
 vueTsConfigs
} from '@vue/eslint-config-typescript'

// the following is optional, if you want prettier too:
import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfigWithVueTs(
 {
 /**
 * Ignore the following files.
 * Please note that pluginQuasar.configs.recommended() already ignores
 * the "node_modules" folder for you (and all other Quasar project
 * relevant folders and files).
 *
 * ESLint requires "ignores" key to be the only one in this object
 */
 // ignores: []
 },

 pluginQuasar.configs.recommended(),
 js.configs.recommended,

 /**
 * https://eslint.vuejs.org
 *
 * pluginVue.configs.base
 * -> Settings and rules to enable correct ESLint parsing.
 * pluginVue.configs[ 'flat/essential']
 * -> base, plus rules to prevent errors or unintended behavior.
 * pluginVue.configs["flat/strongly-recommended"]
 * -> Above, plus rules to considerably improve code readability and/or dev experience.
 * pluginVue.configs["flat/recommended"]
 * -> Above, plus rules to enforce subjective community defaults to ensure consistency.
 */
 pluginVue.configs['flat/essential'],

 {
 files: ['**/*.ts', '**/*.vue'],
 rules: {
 '@typescript-eslint/consistent-type-imports': [
 'error',
 { prefer: 'type-imports' }
 ]
 }
 },
 vueTsConfigs.recommendedTypeChecked,

 {
 languageOptions: {
 ecmaVersion: 'latest',
 sourceType: 'module',

 globals: {
 ...globals.browser,
 ...globals.node, // SSR, Electron, config files
 process: 'readonly', // process.env.*
 ga: 'readonly', // Google Analytics
 cordova: 'readonly',
 Capacitor: 'readonly',
 chrome: 'readonly', // BEX related
 browser: 'readonly' // BEX related
 }
 },

 // add your custom rules here
 rules: {
 'prefer-promise-reject-errors': 'off',

 // allow debugger during development only
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
 }
 },

 {
 files: ['src-pwa/sw/**/*.ts'],
 languageOptions: {
 globals: {
 ...globals.serviceworker
 }
 }
 },

 prettierSkipFormatting // optional, if you want prettier
)

Performance and ignoring files

WARNING

Please be sure to ignore unused files to increase performance. If you lint unused files/folders the UX will degrade significantly.

You can ignore files by editing your /eslint.config.js file:

/eslint.config.js

export default [
 {
 /**
 * Ignore the following files.
 * Please note that pluginQuasar.configs.recommended() already ignores
 * the "node_modules" folder for you (and all other Quasar project
 * relevant folders and files).
 *
 * ESLint requires "ignores" key to be the only one in this object
 */
 ignores: [] // <<<---- here!
 },

Notice that pluginQuasar.configs.recommended() from a few sections above will add the following to your ESLint ignores setting (no need to add them yourself too!):

// not an exhaustive list auto-added to "ignores"
;[
 'dist/*',
 'src-capacitor/*',
 'src-cordova/*',
 '.quasar/*',
 'quasar.config.*.temporary.compiled*'
]