I'm working on my first Vue project in the company that I work. I have noticed when I run the project I get warnings that they have be fixed using --fix all the warnings are related with indentation, spaces, new lines and things like that. Is there a formatter for Vue? I was using the default VS Code format on save but didn't help with the warnings.
As of this writing, the gold standard for linting JavaScript is eslint. For Vue, you can use eslint-plugin-vue.
The user guide will walk you through how to install and configure, and how to integrate it into your editor.
Related
I am using Prettier but it doesn't format the order of imports.
For example, when using Go in VS Code, I can import stuff in whatever order but Gofmt will always reorder it in the right order - I guess it is part of the official Go extension for VS Code.
How to achieve something like that in Vue in VS Code?
It looks like Volar supports this feature (Command palette + Organize Imports), it's the recommended extensions for VScode and Vue3 anyway. Vetur being for Vue2 mainly.
This can be done with Eslint too. Which is the official linter for anything related to Vue + JS.
People tend to not have a lot of imports overall in Vue3, thanks to auto-imports of Vue methods + components etc. There is maybe more magic overall, as shown by the unplugin packages.
You could use this extension I guess: https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports
I've just started using the Vetur VS Code extension for formatting .vue files. Everything seemed to work fine (syntax highlight, EMMET, etc.), but it just doesn't want to format the JavaScript code in tags. "Prettier" can't format it either. I tried to tweak my settings, tried disabling Prettier and Vetur respectively, but nothing seems to work. Code formatting is fine in and , though.
Now the project I'm going to be working on doesn't have any build steps, it uses Single File Component loader, so ESLint and Prettier in my build tooling is out of the picture. Plus, I'd rather have these tools in my IDE/Editor.
Where could the problem be? It looks like some sort of bug to me, I just don't know in which component: VS Code? Prettier? Vetur?
Thank you!
When I am editing a file with the Vue extension in VS Code I do not get Syle intellisense in the HTML. If I change the Language Mode to HTML then it works but I no longer get Vue intellisense.
Is there a way to make this work in a Vue file?
Absolutely, you can install the following extension: Vetur. It has great features like linting, formatting, snippets and of course syntax highlighting.
I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:
Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)
Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.
Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.
But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.
Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.
Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.
So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.
If you have installed the Vetur extension on VS Code,
Go to the VS Code extension area.
Find Vetur and select the gear icon to enter settings of Vetur.
Scroll down until you find
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
Select pretter-eslint from dropdown menu
(if you don't see that option you can install Prettier extension).
Now you can see it formats your code automatically whenever you save.
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.