Introduction
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.
Prerequisites
To complete this tutorial, you will need:
- Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
- Some familiarity with setting up a Vue.js project may be beneficial.
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".
Step 1 — Setting Up the Project
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.
Step 2 — Adding the Config
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.
Step 3 — Using ESLint with Prettier
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.
Conclusion
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.
About the author
Still looking for an answer?
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!
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.
he dear Thank you very much for your training You have been very patient for this training and thank you :)))
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.