I just ran NPM update on a project that was working fine. Now, I am getting a Prettier "Friendly Error". I'm wondering if ESLint and Prettier are not playing well together in my config.
error Replace `⏎··················Coming·Soon!⏎················` with `Coming·Soon!`
I'm not really sure what is going on here, but it looks like it's a formatting issue telling me to add backticks. The errors are on HTML markup that does not even have qoutes on it. It's literally <span>Coming Soon</span>.
.eslintrc.js:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'#nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: ['prettier'],
rules: {},
}
.prettierrc:
{
"semi": false,
"singleQuote": true,
"htmlWhitespaceSensitivity": "ignore"
}
The error isn't indicating the backticks. It's telling you the whitespace around Coming Soon! should be removed.
The config for htmlWhitespaceSensitivity can be confusing:
ignore - HTML whitespace is insignificant, so remove it
strict - HTML whitespace is significant, so ignore it
Thus you actually want to use strict. Configure ESLint as shown below (and restart IDE if using VS Code):
// .eslintrc.js
module.exports = {
rules: {
'prettier/prettier': {
htmlWhitespaceSensitivity: 'strict',
},
},
}
Note that htmlWhitespaceSensitivity config doesn't seem to have an effect in .prettierrc.
I've modified the settings.json file, but it doesn't work.
Here it is:
{
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html":"js-beautify-html"
}
In your settings.json you should have:
editor.formatOnSave: true
[vue]: {"editor.defaultFormatter": "octref.vetur"} if you have several formatters registered for .vue files you need to specify which one to use (otherwise format on save will not know which one to use and it will default to do nothing. This will select "Vetur" as the default.
"vetur.format.defaultFormatter.html": "js-beautify-html" to tell Vetur how to format the part inside <template> tags:
{
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
Note: How do you know that there are several formatters registered for .vue? If when you use the Format Document action you get the dialog There are multiple formatters for 'Vue' files. Select a default formatter to continue then it means that you have more that one formatter registed for '.vue' files.
use plugin:vue/recommended replace plugin:vue/essential
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/recommended',
'#vue/standard'
]
}
enable eslint fix on save
// .vscode/settings.json
{
"eslint.validate": [
"javascript",
"html",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"vetur.validation.template": false
}
To get the auto-save of templates to work using the combination of ESLint and Vetur, I used the following combination of VS Code settings:
{
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true
}
}
}
The "editor.formatOnSave": true did the trick for me. This lead to the problem of converting single quotes to double quotes in the script section, therefore I added the prettier singleQuote config as well.
My answer is just loosely coupled to the question but as this question is the top result for googling "vetur auto format not working" I would like to add a possible solution to that.
My template had the lang attribute set like this <template lang="">. After removing the attribute auto formatting started to work again.
I created a new nuxt app using npx create-nuxt-app <project-name> and chose to use eslint and prettier.
I opened the project's directory using vscode and installed the ESLint and Prettier - Code formatter, and Vetur extensions.
When I save a .vue file vscode formats the code, but in a way that breaks the settings in the nuxt project.
For example vscode transforms
<div
class="test"
style="background: red">
test
</div>
to
<div class="test" style="background: red">test</div>
but this breaks the vue/max-attributes-per-line rule.
How do I set up vscode to use the nuxt project's linting and prettyfying rules?
When starting a new nuxt project using npx create-nuxt-app, check both ESLint and Prettier for linting options and choose the recommended jsconfig.json option.
Then do the following:
install additional npm dev packages
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
Install VS Code extensions
Prettier
ESLint
Vetur
Formatting Toggle (optional)
Change your workplace settings (.vscode/settings.json) to the following:
{
"eslint.format.enable": true,
"vetur.format.defaultFormatter.html": "prettier"
}
You can toggle auto fixing using the Formatting Toggle extension, or if you didn't install it by changing your user settings:
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true
}
Change your .prettierrc file (optional)
{
"semi": false,
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"endOfLine": "lf"
}
Install the extensions:
Vue
Vue 2 Snippets
Vue Peek
Vetur
ESLint
Go to File > Preferences > Settings and edit the User Settings file, adding the following configuration:
{
...... ,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
}
With this configuration, VSCode will perform validation for these three file types: vue, HTML and JavaScript. Now go back to the src/App.vue file and press ctrl+alt+f on Windows or ctrl+shift+i on Linux or ctrl+options+f on Mac OS to perform the formatting of the code. ESLint will validate the code and display some errors on the screen.
Any errors can be corrected automatically, and it’s not necessary to correct each error manually. To do this, you can
press
ctrl+shift+p
and select
ESLint: Fix all problems
I have a vue file composed as followed (not really important) :
<template>
//some pseudo-html
</template>
<script>
//some javascript
</script>
<style lang='stylus'>
#import '~variables'
.card
cursor pointer
//some more stylus
</style>
I have formatOnSave activated in VSCode, I also have vetur and esLint installed.
When I use CSS code inside a classic <style> tag, I have no problem, but when I use lang='stylus', ESLint is still looking for CSS ( I get syntax errors like [css] { expected (css-lcurlyexpected) ).
Also, the auto-format on save just mess eveything up when I use stylus, it puts everything on the same line. Result after save :
<style lang='stylus'>
#import '~variables'
.card cursor pointer position relative padding //some more stylus
</style>
I tried to change the followinf settings in vscode :
vetur.format.defaultFormatter.css
vetur.format.defaultFormatter.stylus
but to no avail.
My current settings:
{
"workbench.colorTheme": "FlatUI Immersed",
"workbench.iconTheme": "material-icon-theme",
"files.trimTrailingWhitespace": true,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.formatOnPaste": false,
"editor.formatOnType": true,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.minimap.enabled": false,
"editor.mouseWheelScrollSensitivity": 2,
"editor.tabSize": 4,
"editor.fontSize": 15,
"window.zoomLevel": -1,
"workbench.startupEditor": "newUntitledFile",
"markdown.extension.preview.autoShowPreviewToSide": true,
"markdown.preview.breaks": true,
}
And workspace specific settings :
"settings": {
"files.associations": {
"*.vue": "html"
},
"editor.tabSize": 2,
"editor.formatOnSave": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
// Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// Eslint options
"eslint.enable": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
// An array of language ids which should be validated by ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
],
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onSave",
// Turns auto fix on save on or off.
"eslint.autoFixOnSave": true,
}
It would be absolutely awesome if someone knows how to have the formatter and the linter correctly take that into account, but after 2 hours digging, i would honestly settle for a way to disable the formatter and the linter just for the <style> tag.
So, after digging some more, i found a solution :
delete this part of the settings :
"files.associations": {
"*.vue": "html"
},
And replace html by vue in this part :
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
And also add :
"vetur.format.defaultFormatter.js": "none"
in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly.
For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide. How can I figure out what is forcing my markup elements onto exactly one line?
I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.
Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when 'vue/max-attributes-per-line': 'off'. Every time I save, it forces the long line of markup to be all on one line.
<template>
<font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>
If I set 'vue/max-attributes-per-line': 2, it formats like so, with one line break(which is quite wrong as well).
<font-awesome-icon
v-if="statusOptions.icon"
:icon="statusOptions.icon"
:spin="statusOptions.isIconSpin"
:class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>
If I try to reformat it manually, it just reverts to the above when I save.
Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results. Any ideas? What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?
VS Code workspace settings:
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"[vue]": {
"editor.tabSize": 2
},
"[csharp]": {
"editor.tabSize": 4
},
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.referencesCodeLens.enabled": true,
"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"vue-html",
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.rulers": [
80,
100
]
}
.eslintrc.js:
module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
jest: true
},
globals: {
expect: true
},
extends: [
'prettier',
'plugin:vue/recommended', // /base, /essential, /strongly-recommended, /recommended
'plugin:prettier/recommended', // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier.
'eslint:recommended'
],
plugins: ['vue', 'prettier'],
rules: {
'vue/max-attributes-per-line': 'off',
'prettier/prettier': [ // customizing prettier rules (not many of them are customizable)
'error',
{
singleQuote: true,
semi: false,
tabWidth: 2
},
],
'no-console': 'off'
}
}
Without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?
To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.
Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.
I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:
In the VS Code settings, I need:
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true },
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true }
]
In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.
With 'vue/max-attributes-per-line': 'off' the rule is disabled so VSCode does not try to fix the long line on autosave. Other eslint fixes are applied, as expected.
With 'vue/max-attributes-per-line': 1 VSCode fixes only one error per save. This is a known limitation of vscode-eslint
vscode-eslint only does a single pass in order to keep to a minimum the amount of edits generated by the plugin. The goal is to keep as many markers (like break points) in the file as possible.
VSCode has a time limit of 1 second for all the plugins to compute the change set on save. If one of the plugins causes the other plugins to not run for 3 times in a row, it will be disabled.
eslint --fix runs all the rules in a loop until there are no more linting errors. I think it has a limit of 10 iterations maximum.
See these links for more details:
https://github.com/Microsoft/vscode-eslint/issues/154
I've created a minimal setup to demonstrate this issue:
https://github.com/kenjiru/vscode-eslint-onsave-issue
I know this is old but in case anyone should find this and not have success with the posted solutions, the fix for me was to add:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
I did not need "editor.formatOnSave": true for some reason. I do not have Prettier installed - only ESLint - but this now performs any fixes automatically when I save.
This is the setup I ended up going with in VSC settings.json file.
Works perfectly for locally set up eslint disabling the default vetur settings (if the plugin is installed).
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
I tried this things and it didn't worked.
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
but it at last i tried this. and worked
"diffEditor.wordWrap": "off",
I bumped into the same issue, and surprisingly found that prettier and vetur were conflicting. I had to disable vetur formatter and it now works as expected.
If you have this section in your editor's settings.json and you have prettier installed,
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
},
}
chances are, these two formatters are conflicting and thus the unexpected behaviour.
A quick workaround is to comment it as below, or simply delete it permanently.
{
"[vue]": {
// "editor.defaultFormatter": "octref.vetur",
},
}
I've struggled through a similar problem. I tried the solution above but didn't work for me, unfortunately. I'm using eslint and Vetur, didn't install prettier plugin but configured it via eslint and enabled "eslint.autoFixOnSave": true. I finally got the correct autoformat on save by removing the following configuration in settings.json. Not sure why but it's working for me.
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
Will update this answer if I get other issues related to this.