<a href="https://marketplace.visualstudio.com/items?itemName=SeyyedKhandon.qpack"> <img style="margin:auto;" src="./assets/qpack.jpg" width="200px" /> </a>

Quality/Metric Extension Pack (QPack)

QPack

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

Available Commands

• Activate Quality/Metric Extension Pack (QPack) Config
• Deactivate Quality/Metric Extension Pack (QPack) Config

Note: to run commands, press ctrl+shift+p to open the command palette, and then type the command .e.g. activate qpack then select it.

<details> <summary> <i>Here are the configurations this plugin will set for you</i> </summary>

{
  "eslint.alwaysShowStatus": true,
  "eslint.lintTask.enable": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "codemetrics.nodeconfiguration.ReturnStatement": 0.1,
  "codemetrics.nodeconfiguration.SwitchStatement": 0.1,
  "codemetrics.nodeconfiguration.JsxSelfClosingElement": 0.1,
  "codemetrics.nodeconfiguration.JsxElement": 0.2,
  "codemetrics.basics.CodeLensHiddenUnder": 4,
  "sonarlint.disableTelemetry": true
}

</details>

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

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 too heavy!).

Recommended Extension pack

<a href="https://marketplace.visualstudio.com/items?itemName=SeyyedKhandon.zpack"> <img style="margin:auto;" src="./assets/zpack.jpg" alt="zpack" width="200px" /> </a>

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!