ESLint and Prettier and Vetur conflict with one another, so it is a nightmare to make all of them working together in vscode.
Here are some caveats and suggestions for setting up a customizable code styling in VSCode for a better Vue.js development experience.
First, ESLint is a linter, so it analyze your code and find out errors in your code, both syntactical ones and stylistic ones. On the other hand, Prettier is a code formatter, which only format your code so that it is more beautiful.
This document explains the difference between formatter and linter.
So the tricky part is, ESLint, as a linter, also does some of the formatting, by fixing your stylistic problems.
For example, you can get rid of semicolons using either of them.
Putting the below line under
rules in your
semi: ["error", "never"]
Putting the below line in your
By the way, there is another popular code prettifier called
but the corresponding extension
seems to be not in maintenance.
Since we are using VSCode, we normally don’t want to lint or format our code from terminal. To lint and format our code directly from VSCode, we can
Open your command palette (by default,
and search for
Eslint: Fix all auto-fixable Problems
You can of course assign a keyboard shortcut to it.
Open your command palette
and search for
Format Document (by default,
Format Selection (by default,
The former one format the whole file, while the latter one format what you selected. (Notice that the latter one actually does not work with Vetur, which we will introduce later on)
Therefore, you should not set both of them to
The above discussions are actually framework-free, and now we are going to set up for Vue.js project.
(To begin with, if you do not want to configure your custom ESLint rules (which is often not the case), then you do not need to do the following steps)
Before starting, you should read the documentation of Vetur first for the basic setup.
Then follow the steps in the section of linting which basically tells you to
Now you can add your custom ESLint rules in
(Note that the last step is dependent to project, so you need to do it everytime with all of your Vue.js projects.)
While it is recommended that you use
ESLint plugin instead of a bundled one in Vetur,
it’s easier to use the bundled Vetur Formatters.
So, instead of installing Prettier
as a VSCode extension and adding some
"prettier.xxx" in your settings.json,
we can simply use the formatters that come for free in Vetur.
It will prefer a local
.prettierrc file so it is possible to configure the bundled prettier in Vetur.
If you just want good code inspection and basic formatting for Vue.js project, the easy solution might be installing Vetur and ESLint extensions and configure them. If you really need a formatter along with a linter, then the best bet is to use the bundled formatter to reduce the pain.Written on June 24th, 2019 by Hanezu