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?
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
npx install-peerdeps --dev eslint-config-airbnb
npm install -D eslint-config-prettier eslint-plugin-prettier
.eslintrc.json
file in your project’s root directory:{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
}
.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
}
"editor.formatOnSave": true
into your User Settings in VSCode.[1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With