5

How To Configure ESLint and Prettier for Vue.js

 3 years ago
source link: https://www.digitalocean.com/community/tutorials/vuejs-vue-eslint-prettier
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Tutorial

How To Configure ESLint and Prettier for Vue.js

Vue.js

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:

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 [email protected]  

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 [email protected] [email protected]  

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:

package.json
{
  // ...
  "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):

.eslintrc.js
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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK