Comments (21)
Hi folks.
There are potentially three issues here, based around how if you have eslint-plugin-vue enabled, eslint-plugin-html enabled, or both plugins enabled. Before I delve into the scenarios, lets talk about ESLint processors...
Processors allow ESLint read some file that has JS embedded into it (such as fenced code blocks in markdown or
<script>
tags in a html file) extract those blocks of JS and pass them into other ESLint rules. This is what eslint-plugin-html does for .vue
files - it extracts the <script> block and passes just that into ESLint. eslint-plugin-vue, however passes the whole vue file as-is into ESLint as it provides rules around formatting your <template>
block too.
This leaves eslint-plugin-prettier in a bit of a quandry - it needs to pick a parser to use to read the vue file. If you're using eslint-plugin-vue we should use the vue parser as we're acting upon a whole vue file. However if you're using eslint-plugin-html then we should use the babylon parser as we're acting upon just the JS code extracted from the script tag. If you're using both then all bets are off and I'm not sure what you'll be acting upon and you'll end up in @Gomah's state where you're inadvertently not running any linting for your vue <template>
and <style>
elements.
If you are using just eslint-plugin-vue: You should be good. eslint-plugin-prettier will receive a full vue file and will format it with the vue parser.
If you are using just eslint-plugin-html: Currently this will break as eslint-plugin-prettier will just the <script>
part and try to format it with the vue parser. We could change this to force the use of the babylon parser, but then we'd break everybody using just eslint-plugin-vue
.
If you are using both plugins: This will break for the same reason as above.
I think the correct solution to this is for eslint-plugin-html to drop their support of .vue files, and to instead tell people to use eslint-plugin-vue if they want to lint their vue files. That will also allow them to lint their template and style sections, rather than just the JS section.
from eslint-plugin-prettier.
If you're using eslint-plugin-html and NOT eslint-plugin-vue then you can force the prettier within eslint to use the babylon parser (as you're acting on a blob of javascript not a whole vue file) by customising the your prettier options within eslint:
Within your .eslintrc, modify your prettier/prettier rule to add a config that overrides the prettier parser for vue files:
{
"rules": {
"prettier/prettier": [
"error",
{
"overrides": [{ "files": "*.vue", "options": { "parser": "babylon" } }]
}
]
}
}
from eslint-plugin-prettier.
This odd because the prettier output is fine.
from eslint-plugin-prettier.
Does this still happen if you remove eslint-plugin-html
?
from eslint-plugin-prettier.
Oh I think I see what is happening, the contents of the <script>
tag are being passed to prettier
and prettier
is told it is a vue
file (from #76). Prettier will then treat the string that is JS as vue (HTML), and thus formatted as-is (minus chomping the trailing newline).
What should be happening is this plugin should pass the entire file contents to prettier
.
from eslint-plugin-prettier.
@azz yes, but I have pre-commit hook and that stop me :)
@not-an-aardvark after exclude html
from plugins start work (and vue rules start working with big amount of vue/* errors)
from eslint-plugin-prettier.
Updating eslint-plugin-html
to 4.0.2 fixes it for me 👍
from eslint-plugin-prettier.
Updating eslint-plugin-html to 4.0.2 did not solve for me unfortunately :/
Still getting this error, eslintrc is :
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2017,
sourceType: 'module'
},
env: {
browser: true,
es6: true,
},
// extends: ['prettier', ],
extends: [
'plugin:vue/essential',
'prettier',
'eslint:recommended',
],
// required to lint *.vue files
plugins: [
'html',
'prettier',
'import'
],
Also //eslint-ignore-next-line doesn't work, seems like it does think the js file is indeed html, any idea how to fix?
from eslint-plugin-prettier.
I actually removed eslint-plugin-html
(see why) & opted for the following config with vue:
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
},
env: {
browser: true,
node: true,
},
extends: [
'airbnb-base',
'plugin:prettier/recommended',
'plugin:vue/recommended',
],
plugins: ['prettier', 'vue'],
rules: {
'prettier/prettier': ['error', { singleQuote: true, trailingComma: 'es5' }],
'import/extensions': [
'error',
'always',
{
js: 'never',
vue: 'never',
},
],
'vue/max-attributes-per-line': [
2,
{
singleline: 3,
multiline: {
max: 1,
allowFirstLine: false,
},
},
],
},
settings: {
'import/core-modules': [
'vuex',
'vue',
'vue-server-renderer',
'vue-router',
'vuex-router-sync',
'webpack-node-externals',
],
'import/resolver': {
webpack: {
config: {
resolve: {
extensions: ['.js', '.vue'],
alias: {
'~': __dirname,
'@': __dirname,
},
},
},
},
},
},
};
from eslint-plugin-prettier.
I'm seeing this as well, and I'm not using eslint-plugin-html
.
.eslintrc.js
:
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
},
extends: [
"airbnb-base",
"plugin:vue/recommended",
"plugin:prettier/recommended",
],
// // required to lint *.vue files
// plugins: [
// 'html'
// ],
// check if imports actually resolve
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
rules: {
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
// disallow reassignment of function parameters
// disallow parameter object manipulation except for specific exclusions
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'state', // for vuex state
'acc', // for reduce accumulators
'e' // for e.returnvalue
]
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
}],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// ignore max length
'max-len': 0,
}
}
from eslint-plugin-prettier.
We are also having this problem. From the cli we are not seeing any error, but in our webpack build we get the following for every vue file in the project.
/Users/grahamfairweather/ProReNataJournal/Byxelkrok/Modules/Calendar/Components/ToggleLayersSelector.vue
233:3 error Delete `⏎` prettier/prettier
"babel-eslint": "^8.2.3",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-vue": "^4.4.0",
"prettier": "^1.12.0",
If I can give more information to assist, please just ask (assuming that this is the plugin that is at fault?).
from eslint-plugin-prettier.
@Xotic750 I met the same problem with you and now have solved it by changing the vue-loader option in webpack.
// wrong config
{
test: /\.vue$/,
loader: [
{
loader: 'vue-loader',
options: {
loaders: {
// ...
js: ['babel-loader', 'eslint-loader'],
},
},
},
],
},
// right config
{
test: /\.vue$/,
loader: [
{
loader: 'vue-loader',
options: {
loaders: {
// ...
},
},
},
'eslint-loader',
],
},
Do not add eslint-loader in vue-loader options but outside. May this info helps you.
from eslint-plugin-prettier.
@leeching Thanks, that's very interesting. It's quite different information to what our team gleaned several months back. Initial tests look promising, but we continue to test. May I ask where you found this information?
from eslint-plugin-prettier.
@Xotic750 This is just my personal practice.
from eslint-plugin-prettier.
I moved eslint-loader to 'pre' loader and fixed this problem.
// webpack.config.js
module.exports = {
// ... other options
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
}
see:
https://vue-loader-v14.vuejs.org/en/workflow/linting.html
https://webpack.js.org/configuration/module/#rule-enforce
from eslint-plugin-prettier.
+1,We are also having this problem.
.eslintrc.js
{
"extends": [
"plugin:prettier/recommended"
],
"plugins": [
"html"
],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"no-multiple-empty-lines": 2,
"prettier/prettier": [
"error",
{
"singleQuote": true,
"semi": false
}
]
}
}
from eslint-plugin-prettier.
same issue as frzed
from eslint-plugin-prettier.
+1
I get exactly the same issue. Moving eslint-loader to 'pre' loaders did not help, and getting rid of the loader helps but then linting rules are not applied.
from eslint-plugin-prettier.
+1
from eslint-plugin-prettier.
+1
"eslint-plugin-html": "4.0.5",
from eslint-plugin-prettier.
Going to close this as v2.7 should work with eslint-plugin-vue out the box, and people using eslint-plugin-html can force use of the babylon parser using the above config.
from eslint-plugin-prettier.
Related Issues (20)
- Synckit seems incompatible with Node 14.18.1 HOT 2
- use es6's import syntax to import eslint-plugin-prettier/recommended
- [feat] fallback `ignorePath` to `.eslintignore` if `.prettierignore` not found HOT 3
- Setting "trailingComma" to "all" does not work HOT 4
- Importing `eslint-plugin-prettier/recommended` in ESM syntax results in a lint error. HOT 1
- case study: `eslint-plugin-prettier-vue`
- Removal of eslint-config-prettier from peerDependencies HOT 1
- Prettier enforces adding unnecessary parentheses HOT 1
- Linebreak error when using with `nest new` project HOT 13
- Unable to Deploy App Due to ESLint/Prettier Errors HOT 1
- eslint-plugin-prettier version `3.1.1` and newest prettier version `3.2.5` mismatch causing issues HOT 2
- TypeError: prettier.resolveConfig is not a function HOT 2
- Delete `0` eslint(prettier/prettier) HOT 1
- 本地部署报错 3:17 error Delete `⏎⏎` prettier/prettier ✖ 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the `--fix` option. HOT 1
- feat: support other HTML related ESLint plugins HOT 1
- Customize flat config
- Does not consider overrides defined in .prettierrc
- issue with typed configs from typescript-eslint & eslint9 --fix
- Error: Unexpected key "meta" found. HOT 1
- cause endless eslint running HOT 4
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-plugin-prettier.