Quality/Metric Extension Pack (QPack)

QPack

Web Quality/Metric Development Essentials Extension Pack for Visual Studio Code

These are some of my favorite extensions which helped me to keep to check the quality of my code.

1-Click Setup:

1. Press ctrl+shift+p
2. Type qpack or update config
3. Click on Update Quality/Metric Extension Pack (QPack) Config to automatically add below configs to your settings.json file

{
  "cSpell.userWords": [],
  "eslint.alwaysShowStatus": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.lintTask.enable": true
}

Notes:

• To enable Sonar lint, you have to install java runtime environment(jre), which it will ask to download it when it has been installed.

• You can use Tech Debt Metrics as a complement to CodeMetrics metric checker(But it is heavy).

Extensions Included

• 1- ESLint - Integrates ESLint JavaScript into VS Code.

• 2- CodeMetrics - Computes complexity in TypeScript / JavaScript files.

• 3- SonarLint - SonarLint is an IDE extension that helps you detect and fix quality issues as you write code in JavaScript, TypeScript, Python, Java, HTML and PHP.

• 4- Code Spell Checker - Spelling checker for source code

• 5- Import Cost - Display import/require package size in the editor

Recommended Extension pack

ZPack is An Opinionated collection of the best and most used extensions for Web Developers in VSCode which has Better Developer Experience(DX) and load time in Mind.

Relevant Links

• Github
• VS Code Marketplace

Enjoy!