Vetur: The right way to setup vscode vetur eslint prettier
- [ yes] I have searched through existing issues
- [ yes] I have read through docs
- [ yes] I have read FAQ
Info
- Platform:
- Vetur version: 0.15.1
- VS Code version: 1.31.1
Problem
I have read the doc and use alot of time to search the answer but still can not find the RIGHT WAY to setup the vscode vetur eslint and prettier.
I tried follow the vetur doc to setup...
Test A: use vetur bundles prettier prettier-eslint and eslint-plugin-vue.
{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
],
"prettier.eslintIntegration": true,
}
"extends": [
"eslint:recommended",
"plugin:vue/essential" // do i still need this line if i have vetur and i no need configure linting rules?
],
npm install -D eslint eslint-plugin-vue
The doc said "Vetur bundles a version of eslint-plugin-vue for linting section. Linting configuration is based on eslint-plugin-vue's essential rule set"
So that mean i dont need to install it myself? if i dont install it myself, eslint show a error "Cannot find module 'eslint-plugin-vue'", that mean i need to install eslint-plugin-vue???
Ok i need to install it myself or i will stop in this step.
So i installed the "eslint-plugin-vue" from npm, and the extends, do i still need "plugin:vue/essential"? or only "eslint:recommended" like below?
"extends": [
"eslint:recommended",
],
Test B: To configure linting rules.
From the doc said, "Vetur bundles a version of eslint-plugin-vue for linting section. Linting configuration is based on eslint-plugin-vue's essential rule set.
This linting is not configurable and based on a fixed version of eslint-plugin-vue. If you would like to configure the template linting rules:"
So let tried other test,
{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
],
" vetur.validation.template": false // doc said Turn off Vetur's template validation.
"prettier.eslintIntegration": true, // this line is still need to be true???
}
"extends": [
"eslint:recommended",
"plugin:vue/recommended" // configure
],
npm install -D eslint eslint-plugin-vue
Now when i try to save the vue file,
<li>
<a href="https://vuejs.org"
target="_blank">Core Docs</a>
</li>
become
<li>
<a href="https://vuejs.org" target="_blank">Core Docs</a>
</li>
and back to below within 1 second.
<li>
<a href="https://vuejs.org"
target="_blank">Core Docs</a>
</li>
So there must have some problem, what is the right way to solved this issue?
aboutjquery
All 14 comments
I have a similar situation:
Code is like this:
<v-btn flat
icon color="primary" @click="deleteSource"
>
Then it switches to this:
<v-btn flat
icon
color="primary" @click="deleteSource"
>
Then to this:
<v-btn
flat icon color="primary" @click="deleteSource">
Then back to the first one.
I'm trying hard to just disable prettier for tag but couldn't really get it working.
These are my settings:
{
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.renderWhitespace": "all",
"files.exclude": {
"**/.git": false
},
"window.zoomLevel": 0,
"breadcrumbs.enabled": true,
"vetur.format.defaultFormatter.html": "none",
"[vue]": {
},
"eslint.enable": true,
"eslint.run": "onType",
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.postcss": "none",
"vetur.format.defaultFormatter.scss": "none",
"vetur.format.defaultFormatter.ts": "none"
}
BRafols
on 22 Feb 2019
"prettier.eslintIntegration": true, // this line is still need to be true???
No.
"eslint.autoFixOnSave": true,
Turn off this and your formatting issue will be gone. The source of those "autofixes" come from eslint-plugin-vue, and they are wrong most of the time.
octref
on 15 Mar 2019
Follow https://github.com/octref/veturpack for setup.
octref
on 15 Mar 2019
@octref If vetur doesn't respect the global project settings set in default eslintrc configs, it becomes difficult to collaborate with people not using VSCode and Vetur..
franciscolourenco
on 15 Mar 2019
@franciscolourenco https://github.com/octref/veturpack/blob/master/.eslintrc is the global project setting. Which setting doesn't Vetur follow?
It would be much easier to talk about it if you can fork and show me the code.
octref
on 15 Mar 2019
Are you saying that vetur reads eslintrc but not package.json?
franciscolourenco
on 17 Mar 2019
Vetur only reads .eslintrc for ESLint setting. That's the only reliable way of reading ESLint config. If you want to support reading config from package.json, feel free to make a PR.
octref
on 17 Mar 2019
"prettier.eslintIntegration": true, // this line is still need to be true???
No.
"eslint.autoFixOnSave": true,
Turn off this and your formatting issue will be gone. The source of those "autofixes" come from eslint-plugin-vue, and they are wrong most of the time.
But then how do you do 'auto fix on save' if you turn it off.
shumuko
on 10 May 2019
But then how do you do 'auto fix on save' if you turn it off.
Feel free to turn it on for wrong autofixes, which I'm not responsible for.
octref
on 10 May 2019
for those who suffer from Vetur's and ESLint's conficting rules, below is .eslintrc settings for Vue plugin which make Vetur and ESLint behave in the same predictable way, i.e. formatting and saving won't lead to re-formatting once again:
"vue/html-indent": ["error", 2, { "attribute": 2, "closeBracket": 0 }],
"vue/html-closing-bracket-newline": [
"error",
{
"singleline": "never",
"multiline": "never"
}
],
"vue/singleline-html-element-content-newline": ["error", {
"ignoreWhenNoAttributes": true,
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea", "p", "span", "li"]
}],
"vue/max-attributes-per-line": ["error", {
"singleline": 1,
"multiline": {
"max": 1,
"allowFirstLine": true
}
}]
bkarlson
on 25 Nov 2019
I think my problem was that vetur forced a non valid eslint/prettier formatting. So I just disabled the vetur formatting in the settings.json:
"vetur.format.enable": false
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
};
Now I got no linting or prettier issues.
KonstantinSchuette
on 8 Jul 2020
Thanks @KonstantinSchuette this was the key to fixing my issues!
settings.json:
"vetur.format.enable": false
I found it EXTREMELY complex to make eslint and prettier work with Vue. I had to install and configure vscode plugins such as vetur and eslint (but not prettier), install eslint configs and plugins in the project through npm and finally configure the actual project on the .eslintrtc (but not prettierrtc). There should be an easy way to tell Vetur to do ALL OF IT, if the tool is to make our lives easier.
lschnoller
on 19 Aug 2020
the prettier omnipresence in the js ecosystem is getting out of hand.
bamboozila
on 23 Sep 2020
For me having the vetur and eslint extension installed, this made it work (apparently):
{
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.format.enable": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
major-mayer
on 15 Oct 2020
Related issues
LawrenceQxy
路
3Comments
octref
路
3Comments
pdanpdan
路
3Comments
Dealerpriest
路
3Comments
OsterHuang
路
3Comments
Most helpful comment
Thanks @KonstantinSchuette this was the key to fixing my issues!
I found it EXTREMELY complex to make eslint and prettier work with Vue. I had to install and configure vscode plugins such as vetur and eslint (but not prettier), install eslint configs and plugins in the project through npm and finally configure the actual project on the .eslintrtc (but not prettierrtc). There should be an easy way to tell Vetur to do ALL OF IT, if the tool is to make our lives easier.