DEV Community

Alan Castro
Alan Castro

Posted on • Updated on

Eslint for Vue3 projects in VSCode

I'd like to share my VSCode and ESLint configuration that I use in my Vue3 projects.


Install the following extensions

  • ESLint
  • Vetur

Add the following in your vscode settings

"eslint.validate": [
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"
Enter fullscreen mode Exit fullscreen mode

Vue3 Project

After creating your vue3 project with vue create.

  • Remove any eslint configuration from your package.json file.

  • Install some packages with npm

npm install -D eslint prettier babel-eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
Enter fullscreen mode Exit fullscreen mode
  • Create a .eslintrc.js file at your project's root
module.exports = {
  root: true,
  env: {
    browser: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  extends: [
  rules: {
    'comma-dangle': 'off',
    'class-methods-use-this': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/prefer-default-export': 'off',
    "vue/component-name-in-template-casing": ["error", "kebab-case", {
      "ignores": []
    'prettier/prettier': ['error', { 'singleQuote': true, 'endOfLine': 'auto' }]
Enter fullscreen mode Exit fullscreen mode
  • Restart VsCode

Check out the repository with this configuration done:

That's it!

Top comments (0)