@dsb-norge/eslint-config-dsb-vue3-ts

3.0.1 • Public • Published

eslint-config-dsb-vue3-ts

npm version GitHub license

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

Package Sidebar

Install

npm i @dsb-norge/eslint-config-dsb-vue3-ts

Weekly Downloads

40

Version

3.0.1

License

ISC

Unpacked Size

7.87 kB

Total Files

4

Last publish

Collaborators

  • karl-einarb
  • chrisaurora
  • scruffy-png
  • rolvraen
  • baltom