Videos
» npm install eslint-plugin-prettier-vue
» npm install @vue/eslint-config-prettier
Getting a new project set up, and then immediately having ESlint / Prettier yell at you about conflicting things.
Then Typescript complains
Then Eslint complains about Typescript
Then Prettier is fairly certain its not supposed to be <template> 'cause that's not a thing.
Is there really no "run this template and get set up without issues immediately"?
Can you try this repo I've just created? Looks like it's working great from what I've tested.
https://github.com/kissu/stackoverflow-eslint-standard-prettier-config
Notes
- I created 2 projects and dumped the configuration of the
standardone into thePrettierone - CLI's current version of
@vue/eslint-config-standardis throwing an error (Environment key "es2021" is unknown) because it requires ESlint 7 to work, as shown in this changelog - bumping ESlint to the latest version
7.29.0, fixed the issue - to check your project's current version of ESlint, you can run
npx eslint --version - of course, you need to have the ESlint extension enabled and Prettier one disabled (if using VScode), otherwise it may conflict
I've tried to remove @vue/prettier from
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', '@vue/prettier']
and see if it's successfully removes any ; and it does!
The errors are indeed coming from ESlint (if we do remove @vue/prettier), and they're fixed by ESlint only upon save (after an ESlint server + VScode restart)!

Putting Prettier back works fine of course.
Luckly, I had a new PC, hence had the opportunity to try a whole fresh config with VScode.
I had to install ESlint only and have those settings into my settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
The formatting works perfectly and nothing more is required.
I have eslint 7.8.1 with Vue Prettier on and i don't have any problem, maybe the version of eslint that you have is not compatible with Prettier or maybe your eslint have some errors?
In each way i will put my eslint configuration and maybe it will help you!
module.exports = {
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'parser': 'babel-eslint'
},
extends: [
'@vue/standard',
'plugin:vue/recommended'
],
rules: {
"vue/html-indent": ["error", 4, {
"attribute": 1,
"closeBracket": 0,
"switchCase": 0,
"ignores": []
}],
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
'indent': ['error', 4],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/script-indent': [
'error',
4,
{ 'baseIndent': 1 }
],
'space-before-function-paren': ['error', 'never'],
'semi': [2, "never"],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off'
},
overrides: [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
]
}
Also maybe you have forgot some of the devDependecies on package.json, those are mine
"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
Hope that those will help you !
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.jsonfile in your project’s root directory:
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
}
- Create
.prettierrc filein 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": trueinto your User Settings in VSCode.
[1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a
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)
