`@vue/eslint-config-airbnb`

eslint-config-airbnb for Vue

This config is specifically designed to be used by @vue/cli & create-vue setups and is not meant for outside use (it can be used but some adaptations on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on other parts of @vue/cli/create-vue setups, such as eslint-plugin-vue being extended in the same resulting config.

Installation

In order to work around a known limitation in ESLint, we recommend you to use this package alongside @rushstack/eslint-patch, so that you don't have to install too many dependencies:

npm add --dev @vue/eslint-config-airbnb @rushstack/eslint-patch

Usage

An example .eslintrc.cjs:

require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-airbnb'
  ]
}

Aliases

The base airbnb config includes rules that need to actually resolve the imported module on the filesystem, such as import/no-unresolved.

If you use aliases in your project, you need to configure ESLint to resolve the aliases, and we've provided a helper function for the task.

For example, it is a widely accepted convention to use @ as an alias to the src folder in the Vue ecosystem. To enable this, you can use the following config:

require('@rushstack/eslint-patch/modern-module-resolution')

const path = require('node:path')
const createAliasSetting = require('@vue/eslint-config-airbnb/createAliasSetting')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-airbnb'
  ],
  rules: {
    'import/no-unresolved': 'error'
  },
  settings: {
    ...createAliasSetting({
      '@': `${path.resolve(__dirname, './src')}`
    })
  }
}

createAliasSetting accepts a map of aliases and their corresponding paths, and returns a settings object to be spread in to the settings field of the ESLint config.

IE 11 support

IE 11 reached End-of-Life on June 15, 2022, so this configuration doesn't include any rules that are specific to IE 11.

If your project still has to support IE 11, we recommend you to add the following 2 rules to your config:

module.exports = {
   // ...

   rules: {
    // Enforce `rel="noopener noreferrer"` on external links in `<template>`
    // https://eslint.vuejs.org/rules/no-template-target-blank.html
    'vue/no-template-target-blank': 'error',
    // Enforce `rel="noopener noreferrer"` on external links in JSX
    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md
    'react/jsx-no-target-blank': 'error',
   }
}

@vue/eslint-config-airbnb

8.0.0

Major Changes

Apply more airbnb rules to vue template

7.0.1

Patch Changes

fix: remove vue/no-setup-props-destructure rule (#59)

It's deprecated and removed from eslint-plugin-vue's preset configs since v9.17. More discussions available at https://github.com/vuejs/eslint-plugin-vue/issues/2259

7.0.0

Major Changes

All the eslint plugins are listed as dependencies, rather than peerDependencies. So when using these configs with @rushstack/eslint-patch, you no longer have to install the plugins separately.
This major version adds a lot style / accessibility rules for JSX / <template> syntaxes, adapted from the upstream eslint-plugin-airbnb. You might see many more errors if you are upgrading from older versions of this package. Luckily, most of them are auto-fixable.
In this version, we've provided a createAliasSetting helper to help users configure the path aliases used in the project for ESLint. So this package is no longer only coupled with @vue/cli. Explicitly invoking the helper function is also more reliable than the previous auto-detection feature.

Detalhes do pacote