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?

Answer 1

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

1. Download the ESLint and Prettier extensions for VSCode.

2. 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

3. 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

4. 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

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

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

6. 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
}

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

Answer 2

Currently, I don't think Vetur works with SFC (single file components) to provide typed completion for props. This is why we're using JSX + Typescript + Vue + Eslint + AirBnB at work.

(I messaged you in Vue's #tooling Discord channel as well)