The default export contains all default ESLint rules for Vue3 TypeScript , including the recommended ruleset for Vue, the opinionated recommended ruleset for TypeScript and the ones listed in the rules section .
Install the package with:
npm install --dev @dsb-norge/eslint-config-dsb-vue3-ts
Now add the config to youreslint.config.mjs
file:
import dsbConfig from '@dsb-norge/eslint-config-dsb-vue3-ts'
export default [
...dsbConfig
]
This ESLint configuration comes with some fundamental assumptions:
- eslint 9 and flat config
- vue.js 3 and/or node environment
- browser and/or node environment
- vite
- TypeScript
Despite some assumptions, you can easily overwrite, extend and unset rules and any other setting in your custom eslint config.
- If installed, remove packages that are no longer needed in local package.json:
npm uninstall -D @rushstack/eslint-patch @stylistic/eslint-plugin @vue/eslint-config-typescript eslint-plugin-vue eslint-plugin-vuejs-accessibility
- The
eslint
library must be of version 9 or higher. If you are usingeslint
8, you must upgrade to version 9 or higher.
npm install eslint@latest
- Update the scripts
"scripts": {
...,
"lint": "eslint",
"lint:fix": "eslint --fix"
}
Configuration now lives in eslint.config.mjs
instead of .eslintrc.js
.
from:
// .eslintrc.js
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'@dsb-norge/dsb-vue3-ts'
],
rules: {
indent: [ 'error', 2, { SwitchCase: 1 } ]
},
parserOptions: {
ecmaVersion: 'latest'
}
}
to
// eslint.config.mjs
import dsbConfig from '@dsb-norge/eslint-config-dsb-vue3-ts'
export default [
...dsbConfig,
{
rules: {
// your custom overrides here
}
}
]
Same as over, but adding cypress for only the cypress files. Note the spread operator since we are wrapping this in a separate object, this is different from what is described in the cypress documentation.
See eslint documentation for more information.
// eslint.config.mjs
import dsbConfig from '@dsb-norge/eslint-config-dsb-vue3-ts'
import pluginCypress from 'eslint-plugin-cypress/flat'
export default [
...dsbConfig,
{
name: 'Cypress',
...pluginCypress.configs.recommended,
files: [
'**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
'cypress/support/**/*.{js,ts,jsx,tsx}'
],
rules: {
// your custom overrides for cypress here
}
},
{
rules: {
// your custom overrides here
}
}
]