vuejs / eslint-config-airbnb Goto Github PK
View Code? Open in Web Editor NEWESLint Shareable Configs for Airbnb JavaScript Style Guide in Vue.js Projects
License: MIT License
ESLint Shareable Configs for Airbnb JavaScript Style Guide in Vue.js Projects
License: MIT License
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
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
?
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 think it would be helpful to have at least a short explanation on how to install this module.
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!
"@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
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?
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.
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
Upgrading typescript-eslint
to v7 breaks. This blocks migrating other dependencies:
vue/eslint-config-typescript
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
Error:
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.
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.
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 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.
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?
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 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:
webpack
yarn 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.10
as 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
.
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.
Now i have to remove the entire plugin
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
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 ?
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',
},
};
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.