VSCode eslint is not using local config with vue3

Question

I just scaffold a new Vue project using npm init vue@latest , I have the eslint extension installed on VSCode and out of the box it is highlighting that many errors(even in .eslintrc.cjs) coming from the boilerplate code.

• Terminal errors
• .eslintrc.cjs
• package.json

Answer 1

create-vue does not scaffold a Prettier config, so default Prettier options are used. I agree it's surprising to discover linter warnings in scaffolded code, and I've reported the issue .

Workaround

Most of the linter warnings are regarding quotes and semicolons .

You can copy create-vue 's Prettier config (ie, create <projectRoot>/.prettierrc ) to align with the codebase:

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

Then, either restart the IDE, or restart its ESLint server to pick up the new config:

1. Open thecommand palette in VS Code by pressing ⌘ + P on macOS, or ⊞ Win + P on Windows.
2. Enter > followed by ESLint: Restart ESLint Server .

The other errors are easily fixed by running this command from a terminal:

npm run lint