Vue 3 and Prettier Integration Guide

In modern frontend development, code consistency is the cornerstone of team collaboration. Vue 3 has significantly boosted development efficiency with its Composition API and innovations in the reactive system; however, this has also led to a diversity of coding styles. Integrating Prettier, an automated code formatter, ensures that all developers adhere to the same coding standards, eliminating reading barriers caused by personal habit differences and making project maintenance easier. This article details how to successfully integrate Prettier into a Vue 3 project and configure it to adapt to Vue-specific syntax features.

Installation and Initialization of Dependencies

First, we need to install Prettier and its necessary plugins within the Vue 3 project. Prettier itself is a command-line tool, but to handle JavaScript, TypeScript, and template sections in Vue Single File Components (.vue), we need to install corresponding plugin packages additionally.

Execute the following commands in the root directory of the project for installation:

  • npm install prettier --save-dev: Install the Prettier core library.
  • npm install @prettier/plugin-vue @prettier/plugin-packagejson --save-dev: Install specialized plugins for Vue and package.json, which is crucial for correctly handling structures like <template> and <script setup>.

After installation, we need to initialize the Prettier configuration file. Create a .prettierrc file (or .prettierrc.js) in the root directory and define basic rules within it. For Vue projects, it is recommended to use concise default configurations or adjust parameters such as indentation and semicolon usage according to team preferences.

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "useTabs": false,
  "vueIndentScriptAndStyle": true
}

Configuring ESLint to Work in Synergy with Prettier

Although Prettier focuses on code formatting, in the Vue ecosystem, ESLint is typically responsible for logic checking and standard validation. To avoid conflicts between the two (e.g., one considers a semicolon necessary while the other deems it unnecessary), the best practice is to enable ESLint's prettierConfig plugin, allowing it to automatically read configurations from the .prettierrc file.

Create or update the .eslintrc.cjs file in the root directory and add the following configuration:

module.exports = {
  root: true,
  env: { browser: true, node: true },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended", // Vue 3 specific rules
    "plugin:prettier/recommended"  // Key: Ensures ESLint follows Prettier configuration
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  }
};

This step ensures that when ESLint runs, it prioritizes applying Prettier's formatting rules, thereby unifying styles during the code inspection phase.

Configuring Preprocessors for Vue Projects

Prettier has limited support for .vue files by default because it primarily handles plain text. To correctly format <template>, <script>, and <style> tags along with their content, we need to use Prettier's vue-prettier-plugin (note: this is the newer plugin name used to replace the old vue-preset-prettier).

Create a .prettierrc.vue file to override default configurations, ensuring the plugin correctly identifies Vue syntax:

{
  "plugins": ["@prettier/plugin-vue"]
}

Alternatively, reference this file directly within .prettierrc. This configuration instructs Prettier to call the corresponding preprocessor when encountering .vue files to parse HTML structures, thereby enabling intelligent formatting of tag hierarchy and attribute order.

Integrating Editor Plugins and Automated Checks

Installing the command-line tool alone is insufficient; developers' daily experience primarily relies on real-time feedback from code editors. We need to install the Prettier extension for common editors (such as VS Code) and configure prettier.config.js to point to our custom configuration files.

After installing the "Prettier - Code formatter" plugin in VS Code, create a .vscode/settings.json file:

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": [
      "fixAll",
      "showFixedCommands"
    ]
  }
}

Setting editor.formatOnSave to true causes the editor to automatically invoke Prettier for formatting every time a file is saved. For Vue 3 projects, this is particularly important as it can immediately correct syntax errors within <script setup> and template indentation issues.

Running Code Checks and Verification

To ensure the configuration takes effect and identify potential issues, custom Git Hooks can be added to the project. Utilizing husky and lint-staged, formatting checks can be automatically triggered before code commits.

First, install dependencies:

  • npm install husky lint-staged --save-dev
  • npm install -D @types/node

Create a .husky/pre-commit script file:

#!/bin/sh
npx prettier --check .

Finally, add lint-staged configuration to package.json:

{
  "lint-staged": {
    "*.{js,ts,vue}": [
      "prettier --write",
      "git add"
    ]
  }
}

In this way, whenever a developer attempts to submit changes containing .vue or JS/TS files, Prettier will automatically run the check. If formatting does not comply with standards, the Git Hook will block the submission, forcing the developer to fix the code and thereby guaranteeing code quality at the source.

Through the above steps, Vue 3 projects will possess a highly consistent and automatically maintained code style. This not only reduces the manual adjustment burden on developers but also provides the team with a clear and professional code delivery standard.