ESLint Shareable Configs for Airbnb JavaScript Style Guide in Vue.js Projects
License: MIT License
This repo contains 2 packages:
@vue/eslint-config-airbnb@vue/eslint-config-airbnb-with-typescriptThe examples folder contains example ESLint configurations in projects created by create-vue or @vue/cli.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
The issue described here import-js/eslint-plugin-import#1826 (comment) causes a compilebreak that is fixed in eslint-import-resolver-webpack ^0.12.2.
Since this is major version 0, I think the version for eslint-import-resolver-webpack must be bumped to ^0.12.2 in the dependencies here so that npm picks up this new fixed version.
Could you please update the version?
ESLint hangs after it finishes the lint successfully:
$ vue-cli-service lint
DONE No lint errors found!
I copied the config file into my .eslint.config.js file and tried to comment lines in order to find what leads to the issue.
I find out that it's these 3 lines:
Lines 9 to 11 in cfa98d5
This is my config file:
module.exports = {
root: true,
env: {
node: true,
},
plugins: [
'import',
],
extends: [
'plugin:vue/recommended',
'@vue/airbnb', # if I remove this line, the issue is gone
'plugin:import/errors',
'plugin:import/warnings',
],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-use-before-define': 'off',
'import/extensions': 'off',
'no-param-reassign': 'off',
'prefer-destructuring': 'off',
radix: 'off',
'max-len': ['warn', 180, 2, {
ignoreUrls: true,
ignoreComments: false,
ignoreRegExpLiterals: true,
ignoreStrings: true,
ignoreTemplateLiterals: true,
}],
'import/no-extraneous-dependencies': 'off',
'no-console': 'off',
'import/no-unresolved': 'off',
eqeqeq: 'off',
'vue/this-in-template': 'off',
'func-names': 'off',
camelcase: 'off',
'vue/require-default-prop': 'off',
'vue/no-mutating-props': 'off',
'consistent-return': 'off',
'vue/no-v-html': 'off',
'no-plusplus': 'off',
'default-case': 'off',
'import/prefer-default-export': 'off',
'no-return-assign': 'off',
'no-mixed-operators': 'off',
'no-restricted-globals': 'off',
'no-useless-escape': 'off',
'vue/require-prop-types': 'off',
'vue/no-parsing-error': 'off',
'import/no-duplicates': 'off',
'no-undef': 'off',
'vue/no-unused-components': 'off',
'guard-for-in': 'off',
'no-continue': 'off',
'vue/no-use-v-if-with-v-for': 'off',
'no-shadow': 'off',
'array-callback-return': 'off',
'no-restricted-syntax': 'off',
'vue/require-v-for-key': 'off',
'no-useless-concat': 'off',
'vue/no-template-shadow': 'off',
'no-fallthrough': 'off',
'vue/no-unused-vars': 'off',
'new-cap': 'off',
'no-nested-ternary': 'off',
'vue/require-valid-default-prop': 'off',
'no-async-promise-executor': 'off',
'no-empty': 'off',
'vue/return-in-computed-property': 'off',
'vue/valid-v-for': 'off',
'no-unused-expressions': 'off',
'no-prototype-builtins': 'off',
'prefer-promise-reject-errors': 'off',
'no-case-declarations': 'off',
'import/named': 'off',
'no-underscore-dangle': 'off',
'vue/component-tags-order': 'off',
},
};I ran into a problem where a npm version wouldn't install eslint-plugin-vuejs-accessibility because it is listed as a peer dependency aswell as a devDependency.
Yes, I can fix that with a different npm version.
But it does not seem right to me to define the dependency this way. Listing the identical dependency as peer when it is already a dev dependency does not add anything.
"@vue/eslint-config-airbnb > [email protected]" has incorrect peer dependency "eslint@^5.16.0 || ^6.8.0 || ^7.2.0".
Looks like the latest eslint-config-airbnb-base supports ^8.2.0 so you just need a version bump
Here is my lint configuration:
require('@rushstack/eslint-patch/modern-module-resolution');
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'@vue/eslint-config-airbnb-with-typescript',
'@vue/eslint-config-airbnb-with-typescript/allow-js-in-vue',
],
rules: {
'vue/multi-word-component-names': 'off',
'no-plusplus': 'off',
'vue/max-len': [
'error',
{
code: 140,
ignoreUrls: true,
ignoreHTMLAttributeValues: true,
ignoreComments: true,
ignoreTemplateLiterals: true,
ignoreStrings: true,
},
],
'vue/max-attributes-per-line': [
'error',
{
singleline: 1,
multiline: 1,
},
],
'array-element-newline': [
'error',
{
ArrayExpression: 'consistent',
ArrayPattern: { minItems: 3 },
},
],
'no-underscore-dangle': 0,
'vuejs-accessibility/click-events-have-key-events': 'off',
'vuejs-accessibility/label-has-for': 'off',
'vuejs-accessibility/tabindex-no-positive': 'off',
'vuejs-accessibility/mouse-events-have-key-events': 'off',
'vuejs-accessibility/interactive-supports-focus': 'off',
'vuejs-accessibility/anchor-has-content': 'off',
'vuejs-accessibility/form-control-has-label': 'off',
'vue/no-mutating-props': 'off',
'vue/require-default-prop': 'off',
'vue/no-reserved-component-names': 'off',
'no-unsafe-optional-chaining': 'off',
'no-async-promise-executor': 'off',
'consistent-return': 'off',
'max-classes-per-file': 'off',
'default-param-last': 'off',
'@typescript-eslint/default-param-last': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'vuejs-accessibility/iframe-has-title': 'off',
'import/prefer-default-export': 'off',
'import/no-cycle': 'off',
'no-await-in-loop': 'off',
'@typescript-eslint/naming-convention': 'off',
},
};On linting a file .vue it takes almost 6 seconds to finish. While it works fine no a .js or a .ts file.
Output from command:
TIMING=1 DEBUG=eslint:cli-engine pnpm esilnt src/components/index.vue
Using create-vue to scaffold a vue3 JavaScript project with vitest using something like:
npm create [email protected]
yarn add --dev @vue/eslint-config-airbnb
vi vue-project/.eslintrc.cjs
Gives the following yarn lint error (amongst a couple of other, understandable syntax complaints):
vue-project/vitest.config.js
3:46 error Unable to resolve path to module 'vitest/config' import/no-unresolved
However, running yarn vitest works - the import is fine.
I believe this is because the node_modules file is actually vitest/config.d.ts (which exports the js file in dist).
__
As a workaround I've been able to avoid the warning by specifying and adding .d.ts to the resolver's extensions in .eslintrc.cjs:
settings: {
'import/resolver': {
node: {
extensions: ['.vue', '.js', '.jsx', '.cjs', '.mjs', '.d.ts'],
},
},
},
__
This is something that used to work without needing this extra config (I think when the vitest config in vue-create was placed directly in vite.config.js).
Is this a regression, an unsupported configuration, or have I found the correct fix and it just needs some extra documentation?
Many thanks.
I'm using:
"@vue/eslint-config-airbnb": "^6.0.0",
for an internal app but I don't want to get nagged by the tons of accessibility rules, how can I still use airbnb defaults but disable accessibility without adding every single rule?
@vue/eslint-config-airbnb page on NPM has link to vue-cli repo as a repository link:
I expect, that repository link would be https://github.com/vuejs/eslint-config-airbnb.
Came up with the issue when tried to find source code of @vue/eslint-config-airbnb.
Is there a reason that .vue isn't set to never error in the import/extensions configuration? This means that we need to import all Vue components as *.vue but all others (js, etc) without an extension
Upgrading typescript-eslint to v7 breaks. This blocks migrating other dependencies:
vue/eslint-config-typescript@typescript-eslint/eslint-plugin@typescript-eslint/parserError:
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"^7.0.0" from the root project
npm ERR! @typescript-eslint/eslint-plugin@"^6.16.0" from @vue/[email protected]
npm ERR! node_modules/@vue/eslint-config-airbnb-with-typescript
npm ERR! dev @vue/eslint-config-airbnb-with-typescript@"^8.0.0" from the root project
npm ERR! 2 more (@vue/eslint-config-typescript, eslint-config-airbnb-typescript)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"^7.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/parser
npm ERR! peer @typescript-eslint/parser@"^7.0.0" from @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"^7.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Similar to #58.
应用场景：动态require模块时如下
this.handbook = require(@/assets/md/${newVal}.md);
会出现如下报错
【(parameter) newVal: any
Calls to require() should use string literalseslintimport/no-dynamic-require
Unexpected require().eslintglobal-require】
请问如何解决
I think it would be helpful to have at least a short explanation on how to install this module.
Since Eslint 9, flat config has to be used: https://eslint.org/docs/latest/use/configure/configuration-files
Right now we have errors like this:
ESLint: 9.0.0
A config object is using the "extends" key, which is not supported in flat config system.
Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.
Please see the following page for more information:
https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs
If I use this package with the latest typescript and vue versions (ie: 5.1.x and 3.3.x) I get this message.
WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.1.0
YOUR TYPESCRIPT VERSION: 5.1.6
Please only submit bug reports when using the officially supported version.But vue's repo's packages.json do not mention any limitations regarding the typescript version to be used with.
Three weeks ago, typescript-eslint released the v6.0.0 and eslint-config-airbnb-typescript followed right after with the v17.1.0.
Unlike what eslint-config-airbnb-typescript did and because of @rushstack/eslint-patch, I personnally think this package should target the latest version only. But if so rules breaking changes should be mentionned in the release and therefore it might need a Major version bump (ie: v8.0.0).
What do you think @sodatea ?
Hey guys, I'm currently writing some Vue plugins and I've noticed this config blocks Vue for no-param-reassign:
Lines 29 to 36 in cfa98d5
It states on the documentation that if we want to apply a instance method to be globally usable we should use:
Vue.prototype.$method = ...However if we want to apply this airbnb config while building a plugin we always need disable it manually.
rules: {
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: ['Vue'],
},
],
},Since this is only applicable on a vue plugin scenario, is it an intentional behavior to block it?
I'm extending plugin:vue/vue3-recommended with vue/valid-define-props to valid use of defineProps, and when I extending with @vue/airbnb, I'll get error with defineProps it's not defined:
Eslint version: 8.8.0
Vscode eslint version: v2.2.2
I'm new to yarn and I've started a vue project with Yarn 2 (berry) with PnP and it's complaining about a missing package dependency. I'm happy to submit a pull request my proposed solution, but I figured I'd check here first.
my-package
├── webpack@^4.43.0
└── @vue/eslint-config-airbnb
├── @vue/cli-service@^3.0.0 || ^4.0.0-0 (peer)
├── @vue/[email protected] (dev)
└── eslint-import-resolver-webpack
└── webpack@>=1.11.0 (peer)
my-package depends on @vue/eslint-config-airbnb.yarn install elicits the following warning:@vue/eslint-config-airbnb@npm:5.0.2 [0c8ee] doesn't provide webpack@>=1.11.0 requested by eslint-import-resolver-webpack@npm:0.11.1
eslint-import-resolver-webpack has a peer dependency of "webpack": ">=1.11.0"@vue/eslint-config-airbnb has:
webpackyarn install in @vue/eslint-config-airbnb elicits the following response:...
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@>=1.11.0".
warning " > @vue/[email protected]" has unmet peer dependency "vue-template-compiler@^2.0.0".
[4/4] Building fresh packages...
...
Note: I'm not sure why, vue/[email protected] specifies
vue-template-compiler@^2.6.10as a resolution.
I think that the solution here is to add dev dependencies of webpack@>=1.11.0 and vue-template-compiler@^2.0.0.
Now i have to remove the entire plugin
I try to use eslint-config-airbnb in a vite vue-ts project.
There is a error when I try to run eslint.
Error: Cannot read config file: (my project path)\node_modules\@vue\eslint-config-airbnb\index.js
Error: Cannot find module '@vue/cli-service/webpack.config.js'
Since it's vite project, I think webpack.config.js isn't required ?
here is the versions for my project
"vite": "^2.4.3",
"@vue/eslint-config-airbnb": "^5.3.0",
"eslint": "^7.19.0",
Is eslint-config-airbnb current support to vue with vite?
Thanks a lot!
Per the changelog, upstream also added support for eslint v6 and dropped eslint v4, as well as updated eslint-plugin-import. This would be a breaking change.
Is Typescript support on the roadmap? There's a eslint-config-airbnb-typescript config - I wonder if you could use it instead of eslint-config-airbnb-base?
Hi,
Destructing object has error in Eslint 6.
Could you update eslint-config-airbnb-base package to latest version?
Code:
selectLocales() {
const { [this.locale]: active, ...other } = this.locales;
return other;
}Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'type' of undefined
Occurred while linting /home/user/ProjectWeb/coffee-print-account-client/src/components/Common/
SelectLanguage.vue:66
at checkDestructured (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint
/lib/rules/no-useless-rename.js:104:43)
at listeners.(anonymous function).forEach.listener (/home/user/ProjectWeb/coffee-print-acco
unt-client/node_modules/eslint/lib/linter/safe-emitter.js:45:58)
at Array.forEach (<anonymous>)
at Object.emit (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/l
inter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/home/user/ProjectWeb/coffee-print-account-client/node
_modules/eslint/lib/linter/node-event-generator.js:253:26)
at NodeEventGenerator.applySelectors (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/node-event-generator.js:282:22)
at NodeEventGenerator.enterNode (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/node-event-generator.js:296:14)
at CodePathAnalyzer.enterNode (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:646:23)
at nodeQueue.forEach.traversalInfo (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/linter.js:935:32)
at Array.forEach (<anonymous>)
at runRules (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/linter.js:930:15)
at Linter._verifyWithoutProcessors (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/linter.js:1132:31)
at preprocess.map (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/linter.js:1255:29)
at Array.map (<anonymous>)
at Linter._verifyWithProcessor (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/linter.js:1250:65)
at Linter._verifyWithConfigArray (/home/user/ProjectWeb/coffee-print-account-client/node_modules/eslint/lib/linter/linter.js:1222:25)
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Login.vue?vue&type=script&lang=js& 42:0-68 48:20-34
package.json
"devDependencies": {
...
"@vue/eslint-config-airbnb": "^4.0.1",
"eslint": "^6.5.0"
...
}Thank's
The rules from airbnb are collectively referred to as styleRulesToExtend, and only would be added if they come from eslint-config-airbnb-base/rules/style
eslint-config-airbnb/packages/eslint-config-airbnb/rules/template.js
Lines 46 to 51 in 79a1274
However, a lot of them are not from style.js, for example eqeqeq is located at eslint-config-airbnb-base/rules/best-practices, and this rule would be missing for the <template> part of .vue files.
The version currently listed in package.json (2.21.2) causes my eslint to crash with the following error:
Configuration for rule "import/no-cycle" is invalid: Value "∞" should be integer.
I've found on https://stackoverflow.com/questions/64790681/eslint-error-configuration-for-rule-import-no-cycle-is-invalid that the solution is to upgrade eslint-plugin-import.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.