Prettier takes the code you write, transforms it into an AST, then prints that AST in a, well, prettier format. Its goal is to automate the work of formatting code to be super readable. While it was rapidly adopted by the React and larger JavaScript (and even CSS!) ecosystems, Vue users were initially left in the dark, due to a lack of support for Single-File Components (.vue
files). However, as of Prettier 1.10
, *.vue
files are officially supported!
In this article, you will learn how to use Prettier and ESLint with a Vue project.
To complete this tutorial, you will need:
This tutorial was verified with Node v16.5.0, npm
v7.20.0, vue
v2.6.11, eslint
v6.7.2, prettier
v2.3.2, eslint-config-prettier
v8.3.0, and eslint-plugin-vue
v6.2.2".
First, you’ll want to install prettier
globally from NPM, if you haven’t already. It can be installed on a per-project basis, but that’s not really recommended.
- npm install --global prettier@2.3.2
Then, start a new Vue project using @vue/cli
with default configurations:
- npx @vue/cli create vue-eslint-prettier-example --default
Next, navigate to the new project directory:
- cd vue-eslint-prettier-example
Finally, add the eslint-prettier
integration packages to your project:
- npm install --save-dev eslint-plugin-prettier@6.2.2 eslint-config-prettier@8.3.0
Note: You may encounter an unable to resolve dependency tree
error due to differences between the version of eslint
that @vue/cli
installs and these integration packages declare. You can use --legacy-peer-deps
to get around this error for the sake of this tutorial.
At this point, you will have a new Vue project with support for ESLint and Prettier.
If you’re using a project created with @vue/cli
, you’ll find the ESLint config inside package.json
under the eslintConfig
property.
Add "plugin:prettier/recommended",
to the extends
sub-property after "plugin:vue/essential",
, to enable Prettier support in ESLint with the default settings:
{
// ...
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
// ...
}
Otherwise, if you’re using a pre-existing project with eslint
already set up, then make the same modifications to .eslintrc.js
(or whichever ESLint configuration format you’re using):
module.exports = {
"root": true,
"extends": [
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
}
Now, ESLint is configured to use the default recommended Prettier rules.
If you don’t have eslint
installed or set up for Vue yet, we have just the guide for you! This guide also shows how to configure VSCode and Atom to lint your Vue files in real time.
With eslint
installed and configurations set, you will be able to run the following command:
- eslint --fix
This will use Prettier to reformat and prettify your JS and Vue files for you! No more worrying, arguing, or pulling out hair over code styles! They’ll be automatically enforced for everyone using eslint
.
In this article, you learned how to use Prettier and ESLint with a Vue project.
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
he dear Thank you very much for your training You have been very patient for this training and thank you :)))
Thanks for the article, but I’ve some question regarding implementation on Vue-Cli 4. I wanted to do exactly like you did here with using prettier rules inside
Eslint --fix
but also be able to change some general rules like removing semicolons.