yet-another-vscode-extension-pack

This extension pack adds features to make my life easier while working with VS Code

Note

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

Recommended-Settings

Setup VS Code

Change some configs for ESLint and Spell Checker in VS Code settings:

{
  .
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["javascript", "vue", "html"],
  "eslint.options": {
    "extensions": [".vue", ".js"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "cSpell.language": "pt,pt-BR,en,en-US",
}

Setup ESLint

• Install following packages:

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

or

yarn add -D \
  eslint \
  eslint-config-airbnb-base \
  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',
  ],
  rules: {
    'prettier/prettier': 'error',
  },
};

Extensions Included in this pack

• Add jsdoc comments - Adds jsdoc @param and @return tags for selected function signatures in JS and TS
• 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
• Code Spell Checker - Spelling checker for source code
• Brazilian Portuguese - Code Spell Checker - Brazilian Portuguese dictionary extension for VS Code
• CodeMetrics - Computes complexity in TypeScript / JavaScript files
• CSS-in-JS - CSS-in-JS autocomplete and conversion
• DotENV - Support for dotenv file syntax
• 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
• Jest Snippets - Code snippets for testing framework Jest
• Markdown All in One - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
• markdownlint - Markdown linting and style checking for Visual Studio Code
• 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
• Polacode - Polaroid for your code
• Prettier - Code formatter - VS Code plugin for prettier/prettier
• Svg Preview - Preview for Svg files
• Vetur - Vue tooling for VSCode
• VSCode Essentials Snippets - A collection of essentials snippets for Visual Studio Code
• vscode-icons - Icons for Visual Studio Code
• vscode-styled-components - Syntax highlighting for styled-components

Credits

All credits goes to original authors of the above mentioned extensions

Happy Coding!