yet-another-vscode-extension-pack

This extension pack adds features to make my life easier while working with VSCode.

Note

Please read & follow the Recommended Settings section to enable all features.

Recommended-Settings

Setup VS Code

Enable FormatOnSave & ESLint for .js and .vue files in VS Code settings:

// enable autofix for Vue files

{
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "extensions": [".js", ".vue"]
  }
}

Setup ESLint

Install following packages:

npm i -D \
    eslint \
    eslint-config-airbnb-base \
    eslint-config-contaazul \
    eslint-config-prettier \
    eslint-plugin-vue \
    eslint-plugin-prettier \
    @vue/cli-plugin-eslint \
    @vue/eslint-config-prettier \
    prettier \
    prettier-eslint \
    babel-eslint

Create/update ESLint config file (package.json, .eslintrc.js or .eslintrc.json) in your project folder:

// config ESLint and Prettier to work with Vue

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: [
    'prettier',
    'vue',
  ],
  extends: [
    'plugin:vue/recommended',
    'prettier',
    'prettier/vue',
    'contaazul',
  ],
  rules: {
    'prettier/prettier': 'error',
  },
};

Extensions Included in this pack

Auto-Close-Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Auto-Rename-Tag - Auto rename paired HTML/XML tag
Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more!
Bracket Pair Colorizer - A customizable extension for colorizing matching brackets
CodeMetrics - Computes complexity in TypeScript / JavaScript files.
EditorConfig - EditorConfig Support for Visual Studio Code
ESLint - Integrates ESLint into VS Code.
Formatting Toggle - A VS Code extension that allows you to toggle the formatter on and off with a simple click
GitLens - Supercharge the Git capabilities built into Visual Studio Code
Import Cost - Display import/require package size in the editor
indent-rainbow - Makes indentation easier to read
JavaScript (ES6) Snippets - Code snippets for JavaScript in ES6 syntax
Jest - Use Facebook's Jest With Pleasure.
npm - npm support for VS Code
npm IntelliSense - Visual Studio Code plugin that autocompletes npm modules in import statements
Path IntelliSense - Visual Studio Code plugin that autocompletes filenames
Prettier - Code formatter - VS Code plugin for prettier/prettier
Vetur - Vue tooling for VSCode
vscode-icons - Icons for Visual Studio Code

Credits

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

Happy Coding!

Yet Another VSCode Extension Pack

cirocfc