vuejs-extension-pack vscode - An extension packf or vscode with popular VS Code extensions for Vue.js development.

Vue.js Extension Pack

This extension pack adds features for Vue.js development.

Recommended ESlint setup

ESLint with vue and typescipt

Install following packages

npm install --save-dev eslint vue-eslint-parser @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier

Create/update eslint config

// enable vue in eslint

module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  plugins: ["vue", "@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],
};

ESLint with vue and javascript

Install following packages

npm install --save-dev eslint vue-eslint-parser babel-eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier

Create/update eslint config

// enable vue in eslint

module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "babel-eslint",
  },
  plugins: ["vue"],
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],
};

Extensions Included in this pack

• vetur - Vue tooling for VSCode
• formulahendry.auto-complete-tag - Extension Packs to add close tag and rename paired tag automatically for HTML/XML
• JavaScript (ES6) Snippets - Code snippets for JavaScript in ES6 syntax
• ESLint - Integrates ESLint into VS Code.
• Prettier - Code formatter - VS Code plugin for prettier/prettier
• Formatting toggle - A VS Code extension that allows you to toggle the formatter on and off with a simple click
• Visual Studio IntelliCode - AI-assisted development
• Vue VSCode Snippets - Snippets that will supercharge your Vue workflow

Credits

All credits goes to original authors of the above mentioned extensions.

Happy Coding!