Eslint for Vue3 projects in VSCode

#vue3 #vscode #vue #eslint

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

VsCode

Install the following extensions

ESLint
Vetur

Add the following in your vscode settings

"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"

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

Create a .eslintrc.js file at your project's root

module.exports = {
  root: true,
  env: {
    browser: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  extends: [
    'airbnb-base',
    'plugin:vue/vue3-essential',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  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' }]
  },
};