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

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
Brazilian Portuguese - Code Spell Checker - Brazilian Portuguese dictionary extension for VS Code
Change Case - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word
Code Spell Checker - Spelling checker for source 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
Todo Tree - Show TODO, FIXME, etc. comment tags in a tree view
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
Vue VSCode Snippets - Snippets that will supercharge your Vue workflow

Credits

All credits goes to original authors of the above mentioned extensions

Happy Coding!

Yet Another VSCode Extension Pack

cirocfc