How to Setup ESLint and Prettier in a Vue Project

• ESLint is an open-source JavaScript linting utility.
• Prettier is an opinionated code formatter.

Installation

Create a Vue project and install the packages.

• eslint
• eslint-config-prettier
• eslint-plugin-vue
• prettier

pnpm create vite vue-3-eslint-prettier -- --template vue
cd vue-3-eslint-prettier
pnpm i -D eslint eslint-config-prettier eslint-plugin-vue prettier
pnpm create vite vue-3-eslint-prettier -- --template vue
cd vue-3-eslint-prettier
pnpm i -D eslint eslint-config-prettier eslint-plugin-vue prettier

Configuration

1. Create .eslintrc.js in the root. Here I will extend the officially recommended rules and prettier. You can also configure the rules from ESLint or Vue if you want.

module.exports = {
  extends: ["plugin:vue/vue3-recommended", "prettier"],

  rules: {
    "vue/comment-directive": "off",
    "vue/multi-word-component-names": "off",
    "vue/no-lone-template": "off"
  }
}
module.exports = {
  extends: ["plugin:vue/vue3-recommended", "prettier"],

  rules: {
    "vue/comment-directive": "off",
    "vue/multi-word-component-names": "off",
    "vue/no-lone-template": "off"
  }
}

2. Create .prettierrc.js in the root. Override the default options here.

module.exports = {
  semi: false,
  trailingComma: "none",
  bracketSameLine: true
}
module.exports = {
  semi: false,
  trailingComma: "none",
  bracketSameLine: true
}

Tips

This is for VSCode users:

1. Install the ESLint, Prettier - Code Formatter, and Format Files extensions. Ctrl+P and paste these:

ext install dbaeumer.vscode-eslint
ext install esbenp.prettier-vscode
ext install jbockle.jbockle-format-files
ext install dbaeumer.vscode-eslint
ext install esbenp.prettier-vscode
ext install jbockle.jbockle-format-files

2. Turn on the formatOnSave setting.

"editor.formatOnSave": true
"editor.formatOnSave": true

3. Run Start Format Files: Workspace and enjoy pretty code.