eslint-config-dsb-vue3-ts

Installation

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

Usage

Now add the config to youreslint.config.mjs file:

import dsbConfig from '@dsb-norge/eslint-config-dsb-vue3-ts'

export default [
  ...dsbConfig
]

Assumptions

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.

Migrate from version 2.x to 3.x (eslint 8 to eslint 9)

Package cleanup

• 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 using eslint 8, you must upgrade to version 9 or higher.

npm install eslint@latest

package.json scripts

• Update the scripts

 "scripts": {
    ...,
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }

Configuration

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
    }
  }
]

With cypress config

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
    }
  }
]