How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?

Question

When creating a new project with Vue CLI v4.0.5 with checking the options for TypeScript and Linter / Formatter, you are given pre-configured options for linting and formatting:

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

I want to use Airbnb rules for ESLint with Prettier (format-on-save), with TypeScript parser and Vue CLI v4.

These configurations should also work well with Vetur extension for VS Code.

How to configure this combination of tooling?

Note that this is not a dupe question. There are similar questions but not with these exact requirements for Vue CLI4, TypeScript, ESLint, Airbnb, Prettier, and working along with Vetur / VS Code.

EDIT 2020/02 - The nature of this challenge has recently changed considerably, so I've opened and self-answered an another question: How to configure Vue CLI 4 with ESLint + Airbnb rules + TypeScript + Stylelint for SCSS, in VS Code editor with autofix on save?

I don't know what issue Vue, typescript and/or Vetur bring here, but the others should work in line following this tutorial: blog.echobind.com/… — mico
The main idea is to separate code formatting to Prettier only and apply Airbnb for errors. That avoids double formatting and double saving. — mico
@mico 'This question has an open bounty worth +100 reputation from ux.engineer ending in 9 hours.' — ux.engineer

mico mico · Accepted Answer · 2019-11-11T05:14:49

According to a blog post I found [1] these steps should make it sure it works:

Download the ESLint and Prettier extensions for VSCode.
Install the ESLint and Prettier libraries into our project. In your project’s root directory, you will want to run:

npm install -D eslint prettier

Install the Airbnb config. If you’re using npm 5+, you can run this shortcut to install the config and all of its dependencies:

npx install-peerdeps --dev eslint-config-airbnb

Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type)

npm install -D eslint-config-prettier eslint-plugin-prettier

Create .eslintrc.json file in your project’s root directory:

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

Create .prettierrc file in your project’s root directory. This will be where you configure your formatting settings. I have added a few of my own preferences below, but I urge you to read more about the Prettier config file

{
  "printWidth": 100,
  "singleQuote": true
}

The last step is to make sure Prettier formats on save. Insert "editor.formatOnSave": true into your User Settings in VSCode.

[1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a

How to configure Vue CLI 4 with ESLint + Prettier + Airbnb rules + TypeScript + Vetur?

2 Answers