Dr. Michael Jastram

I am trying to set up a Vue.js development environment following best practices. I need support for two distinct activities:

• Finding linting issues
• Formatting code, while fixing linting issues in the process

Problem: How do I set up my environment to support all use cases without the tools conflicting with each other? They can have a conflict, because:

• Linting can be done by ESLint and Volar
• Formatting can be done by Volar and Prettier

So here is the guide for getting this right:

Don’t install too much!

Install Volar, ESLint and Prettier:

However, do not install related extensions like “Prettier ESLint”, “Vetur” or any other extensions for formatting and linting.

Configuration

• Set Prettier as the default formatter

Personal preferences

Use package.json instead of short config files

I don’t use .browserlistrc, but instead a section in package.json:

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]

eslintConfig

Also manage this in package.json.

Use recommended linting (rather than essential):

    "extends": [
      "plugin:vue/vue3-recommended",
      "eslint:recommended"
    ],