Comments (19)
lydell
commented on August 16, 2024
1
Which leads to the question: Might it be correct to have eslint-plugin-vue referenced in peerDependencies and not only in devDependencies?
Yes, that would emit a warning if the wrong version of eslint-plugin-vue is installed. But unfortunately there are a lot of users of this package who don't use vue and they would get annoying warnings.
from eslint-config-prettier.
lydell
commented on August 16, 2024
cc @michalsnik
from eslint-config-prettier.
lydell
commented on August 16, 2024
I tried to reproduce this.
.eslintrc:
{
"extends": [
"plugin:vue/recommended",
"prettier/vue"
]
}package.json
{
"private": true,
"devDependencies": {
"eslint": "5.12.0",
"eslint-config-prettier": "3.4.0",
"eslint-plugin-vue": "5.1.0"
}
}
test.vue:
<template>
<div v-if="!isFirst" class="container">content</div>
</template>
If I comment out "prettier/vue", npm test gives lint errors as expected:
/home/lydell/stuff/eslint-vue/test.vue
2:24 warning Attribute "class" should be on a new line vue/max-attributes-per-line
2:42 warning Expected 1 line break after opening tag (`<div>`), but no line breaks found vue/singleline-html-element-content-newline
2:49 warning Expected 1 line break before closing tag (`</div>`), but no line breaks found vue/singleline-html-element-content-newline
✖ 3 problems (0 errors, 3 warnings)
0 errors and 3 warnings potentially fixable with the `--fix` option.
And with "prettier/vue" there are no errors as expected.
Are you using ESLint via some other tool? Maybe the error only happens when not using the eslint CLI directly. Can you share exact steps to reproduce?
from eslint-config-prettier.
frozonfreak
commented on August 16, 2024
.eslintrc
module.exports = {
root: true,
parserOptions: {
sourceType: 'script',
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#bulb-rules
'plugin:vue/recommended',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard',
// https://github.com/prettier/eslint-config-prettier
'prettier',
'prettier/standard',
'prettier/vue',
],
rules: {
// Only allow debugger in development
'no-debugger': process.env.PRE_COMMIT ? 'error' : 'off',
// Only allow `console.log` in development
'no-console': process.env.PRE_COMMIT
? ['error', { allow: ['warn', 'error'] }]
: 'off',
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{
ignores: [
'component',
'template',
'transition',
'transition-group',
'keep-alive',
'slot',
],
},
],
},
overrides: [
{
files: ['src/**/*', 'tests/unit/**/*', 'tests/e2e/**/*'],
excludedFiles: 'app.config.js',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: {
browser: true,
},
},
{
files: ['**/*.unit.js'],
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: { jest: true },
globals: {
mount: false,
shallowMount: false,
shallowMountView: false,
createComponentMocks: false,
createModuleStore: false,
},
},
],
}
package.json
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"dev:e2e": "vue-cli-service test:e2e --mode=development",
"build": "vue-cli-service build --modern",
"build:ci": "yarn build --report",
"lint:eslint": "eslint --fix",
"lint:stylelint": "stylelint --fix",
"lint:markdownlint": "markdownlint",
"lint:prettier": "prettier --write --loglevel warn",
"lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
"lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\"",
"lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
"lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
"lint": "run-s lint:all:*",
"test:unit": "vue-cli-service test:unit",
"test:unit:file": "yarn test:unit --bail --findRelatedTests",
"test:unit:watch": "yarn test:unit --watch --notify --notifyMode change",
"test:unit:ci": "yarn test:unit --coverage --ci",
"test:e2e": "vue-cli-service test:e2e --headless",
"test": "run-s test:unit test:e2e",
"test:ci": "run-s test:unit:ci test:e2e",
"new": "hygen new",
"docs": "vuepress dev"
},
"gitHooks": {
"pre-commit": "cross-env PRE_COMMIT=true lint-staged"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "1.2.12",
"@fortawesome/free-solid-svg-icons": "5.6.3",
"@fortawesome/vue-fontawesome": "0.1.4",
"axios": "0.18.0",
"lodash": "4.17.11",
"normalize.css": "8.0.1",
"nprogress": "0.2.0",
"vue": "2.5.21",
"vue-meta": "1.5.8",
"vue-router": "3.0.2",
"vuex": "3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "3.2.x",
"@vue/cli-plugin-e2e-cypress": "3.2.x",
"@vue/cli-plugin-eslint": "3.2.x",
"@vue/cli-plugin-unit-jest": "3.2.x",
"@vue/cli-service": "3.2.x",
"@vue/eslint-config-prettier": "4.0.x",
"@vue/eslint-config-standard": "4.0.x",
"@vue/test-utils": "1.0.0-beta.28",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "23.6.x",
"cross-env": "5.2.x",
"eslint-plugin-vue": "5.0.x",
"express": "4.16.x",
"hygen": "2.0.4",
"imagemin-lint-staged": "0.3.x",
"lint-staged": "8.1.x",
"markdownlint-cli": "0.13.x",
"node-sass": "4.11.x",
"npm-run-all": "4.1.x",
"prettier": "prettier/prettier#3de36e3",
"sass-loader": "7.1.x",
"stylelint": "9.9.x",
"stylelint-config-css-modules": "1.3.x",
"stylelint-config-prettier": "4.0.x",
"stylelint-config-recess-order": "2.0.x",
"stylelint-config-standard": "18.2.x",
"stylelint-scss": "3.4.x",
"vue-template-compiler": "2.5.21",
"vuepress": "0.14.x"
},
"engines": {
"node": ">=8.9.0",
"yarn": ">=1.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Install https://github.com/chrisvfritz/vue-enterprise-boilerplate and build.
from eslint-config-prettier.
lydell
commented on August 16, 2024
Thanks!
Can you make a smaller example?
yarn has been running for several minutes, and it's still not done installing.
from eslint-config-prettier.
lydell
commented on August 16, 2024
After 7 minutes it finally finished. I ran yarn build and yarn lint they succeeded.
~/stuff/vue-enterprise-boilerplate master
❯ yarn build
yarn run v1.12.3
$ vue-cli-service build --modern
⠋ Building legacy bundle for production...
DONE Compiled successfully in 16698ms 7:47:52 PM
File Size Gzipped
dist/js/chunk-vendors-legacy.f2b23f3e. 203.30 kb 70.46 kb
js
dist/js/app-legacy.3f80a419.js 18.20 kb 6.13 kb
dist/js/chunk-6fa99d8c-legacy.8992c5eb 1.89 kb 0.92 kb
.js
dist/js/chunk-2d0ae528-legacy.68120eec 0.73 kb 0.48 kb
.js
dist/js/chunk-42e69ba1-legacy.fcb1bf7c 0.64 kb 0.45 kb
.js
dist/css/app.08d8d6d4.css 4.48 kb 1.04 kb
dist/css/chunk-vendors.8ffab17e.css 3.10 kb 1.12 kb
dist/css/chunk-6fa99d8c.4ba7590a.css 0.09 kb 0.11 kb
Images and other types of assets omitted.
⠙ Building modern bundle for production...
DONE Compiled successfully in 7843ms 7:48:00 PM
File Size Gzipped
dist/js/chunk-vendors.f2b23f3e.js 203.30 kb 70.45 kb
dist/js/app.0c9ecdde.js 18.18 kb 6.12 kb
dist/js/chunk-6fa99d8c.8992c5eb.js 1.88 kb 0.91 kb
dist/js/chunk-2d0ae528.68120eec.js 0.72 kb 0.48 kb
dist/js/chunk-42e69ba1.fcb1bf7c.js 0.63 kb 0.44 kb
dist/css/app.08d8d6d4.css 4.48 kb 1.04 kb
dist/css/chunk-vendors.8ffab17e.css 3.10 kb 1.12 kb
dist/css/chunk-6fa99d8c.4ba7590a.css 0.09 kb 0.11 kb
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Done in 27.68s.
~/stuff/vue-enterprise-boilerplate master
❯ yarn lint
yarn run v1.12.3
$ run-s lint:all:*
$ yarn lint:eslint --ext .js,.vue .
$ eslint --fix --ext .js,.vue .
$ yarn lint:stylelint "src/**/*.{vue,scss}"
$ stylelint --fix 'src/**/*.{vue,scss}'
$ yarn lint:markdownlint "docs/*.md" "*.md"
$ markdownlint 'docs/*.md' '*.md'
$ yarn lint:prettier "**/*.{js,json,css,scss,vue,html,md}"
$ prettier --write --loglevel warn '**/*.{js,json,css,scss,vue,html,md}'
Done in 27.76s.
from eslint-config-prettier.
ryuuji3
commented on August 16, 2024
I had this same issue. I downgraded to 4.0.0 and everything worked fine. But 4.0.1 fails to lint.
I can't share all my dependencies, but here's my dev dependencies:
{
"devDependencies": {
"@babel/core": "^7.2.2",
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/cli-plugin-unit-jest": "^3.3.0",
"@vue/cli-service": "^3.3.0",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/test-utils": "^1.0.0-beta.28",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"decamelize": "^2.0.0",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.0.1",
"style-resources-loader": "^1.2.1",
"vue-cli-plugin-i18n": "^0.5.1",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-template-compiler": "^2.5.21"
}
}The exception:
ERROR Error: Failed to load config "plugin:vue/no-layout-rules" to extend from.
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/eslint-config-prettier/vue.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/@vue/eslint-config-prettier/index.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/.eslintrc.js
Error: Failed to load config "plugin:vue/no-layout-rules" to extend from.
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/eslint-config-prettier/vue.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/@vue/eslint-config-prettier/index.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/.eslintrc.js
at configMissingError (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:187:19)
at loadConfigFile (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:213:27)
at loadFromDisk (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:495:18)
at load (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:559:20)
at configExtends.reduceRight (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:425:36)
at Array.reduceRight (<anonymous>)
at applyExtends (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:403:26)
at loadFromDisk (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:523:22)
at load (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:559:20)
at configExtends.reduceRight (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:425:36)
from eslint-config-prettier.
lydell
commented on August 16, 2024
4.0.0 and 4.0.1 of what package?
from eslint-config-prettier.
ryuuji3
commented on August 16, 2024
4.0.0 and 4.0.1 of what package?
Sorry! I meant that I had to downgrade "@vue/eslint-config-prettier" which fails to lint on 4.0.1, but works fine on 4.0.0
from eslint-config-prettier.
lydell
commented on August 16, 2024
Both 4.0.0 and 4.0.1 of @vue/eslint-config-prettier depend on eslint-config-prettier@^3.3.0, so 4.0.1 should be as working/broken as 4.0.0. It depends on which eslint-config-prettier version is in your package-lock.json/yarn.lock.
from eslint-config-prettier.
lydell
commented on August 16, 2024
@frozofreak I just realized that chrisvfritz/vue-enterprise-boilerplate contains [email protected] in its yarn.lock, while the it’s 3.4.0 that introduced the problem you have:
Could you (or @ryuuji3) please make a minimal example repo where we can debug? I don’t use Vue myself, so I don’t feel like spending so much time on it right now.
from eslint-config-prettier.
liaoyinglong
commented on August 16, 2024
update eslint-plugin-vue to ^5.0.0 , solved for me
from eslint-config-prettier.
lydell
commented on August 16, 2024
Thanks, @liaoyinglong. I now realize that 3.4.0 should have been released as 4.0.0 as this seems to be a breaking change :(
from eslint-config-prettier.
ldrick
commented on August 16, 2024
I get the same error, and did:
yarn why eslint-plugin-vue
yarn why v1.13.0
[1/4] Why do we have the module "eslint-plugin-vue"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
- "@vue#cli-plugin-eslint" depends on it
- Hoisted from "@vue#cli-plugin-eslint#eslint-plugin-vue"
Done in 1.53s.Which leads to the question: Might it be correct to have eslint-plugin-vue referenced in peerDependencies and not only in devDependencies?
from eslint-config-prettier.
lydell
commented on August 16, 2024
I think I'll have to revert #69 and publish a new version.
from eslint-config-prettier.
ldrick
commented on August 16, 2024
@lydell Would it be possible to somehow make it conditional? Like often used in vue-cli:
Load the package, if dependency is installed? And document it, that user can install eslint-plugin-vue and it will be used?
from eslint-config-prettier.
lydell
commented on August 16, 2024
@ldrick I don't think so, but I'm open for suggestions!
from eslint-config-prettier.
lydell
commented on August 16, 2024
Maybe we should revert that PR anyway, because sometimes there are layout rules that don't conflict with Prettier but rather complement it.
from eslint-config-prettier.
lydell
commented on August 16, 2024
I’ve published 3.5.0 that reverts back to how 3.3.0 worked. Update all the things in your repos and things should work again!
from eslint-config-prettier.
Related Issues (20)
- ESLint Flat Config HOT 1
- Prettier 3: HOT 2
- New prettier update breaking Eslint plugin? HOT 2
- Turn off only necessary rules in vue/html-self-closing HOT 1
- TypeError: prettier.getFileInfo.sync is not a function HOT 1
- max-statements-per-line HOT 4
- Compatibility with eslint config
- Definition for rule 'prettier/prettier' was not found HOT 7
- Configuration with @stylistic/eslint-plugin HOT 4
- This bug is missing information needed to diagnose the problem. Please see our [guide on how to open a good issue](https://github.com/prettier/prettier-vscode/wiki/Writing-a-Good-Issue) and provide the missing information. Most configuration-related issues can only be resolved by [providing a full repro](https://github.com/prettier/prettier-vscode/wiki/Writing-a-Good-Issue#5-provide-a-sample-github-repo). **If you don't provide a sample to reproduce your issue, your bug will most likely be closed.** HOT 1
- [meta] maintenance question HOT 6
- Docs: Clarifying when this config is useful as a config? HOT 3
- maintenance: use `changesets` for releasing automatically
- Conflict with `vue/first-attribute-linebreak` not handled HOT 2
- Remove `unicorn/template-indent` HOT 3
- Turn off `lines-between-class-members` and `@typescript-eslint/lines-between-class-members` HOT 1
- Support `@stylistic/eslint-plugin` HOT 1
- Conflict with import/newline-after-import HOT 5
- [CLI] Handle undefined computed config
- about eslint9.x HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from eslint-config-prettier.