‍

In the world of software development ensuring the code quality is really important. Good code quality not only plays a vital role in minimizing errors but also it helps in enhancing the clarity and comprehensibility of the code for fellow developers. With help of this article, I am going to explain about sonarlint which will help us in following best Code practices and standards. After reading this article you will get a idea about setting up sonarlint and outline common practices to follow best practices for code smells.

‍

What is SonarLint?

SonarLint is a free and open source IDE which was brought by Sonar. It is like a spellchecker which offers quick fixes and also support rich contextual educational guidance. By detecting these issues SonarLint enables to address them promptly during the coding process ultimately saving our time and energy in the long run.

‍

Steps to install SonarLint in VS code

1. Open VS Code, navigate to the Extensions tab, and search for ‘SonarLint.’
2. Now Click on Install button.
3. After the installation is complete, Reload the IDE to restart VS code.

‍

‍

NOTE: Sonarlint currently support Node version greater than 18.18. You may need to update your Node.js version accordingly.

‍

For changing the Node version do the following steps.

‍

1. Download and install nvm

2. Check the available Node.js versions using nvm ls

‍

3. Install the desired Node.js version

nvm install 18 // or greater than 18.17.0

‍

4. Use the installed Node.js version

nvm use 18 // use your desired version, greater than 18.17.0

‍

5. Set a default Node.js version: If you want to set a default Node.js version that will be used in every new terminal session, run:-

nvm alias default 18 // your desired version

‍

6. After following steps check Node.js version:

node -v// This will display the version of Node.js that you have set.

‍

‍

How it works:

Simply open any source file, start coding, and you will start seeing issues reported by SonarLint. Issues are highlighted in your code and also listed in the ‘Problems’ panel.

Here you can see:

When sonarlint is configured it will start giving warning as you open the files. Here you can see the problems that are addressed by sonarlint.
You can access the detailed rule description directly from your editor, using the provided contextual menu.

‍

‍

after opening this it will give full context about Why is it issue? How to fix etc.

‍

Common Practices to Avoid Code Smells:

‍

1. Using Optional Chaining (?.):

‍

Issue Description:

• The . operator can cause issues if the chain is long and it's not safe, leading to runtime errors if an object in the chain is null or undefined.

‍

Best Practice:

• Use the optional chaining operator (?.) to safely access deeply nested properties without risking a runtime error.

With the optional chaining operator (?.), however, you don't have to explicitly test and short-circuit based on the state of responseData and responseData.Items[0] before trying to access responseData.Items[0]. Definitions, just directly access responseData?.Items[0]?.Definitions.

By using the ?. operator instead of just ., JavaScript knows to implicitly check to be sure responseData and responseData.Items[0] is not null or undefined before attempting to access responseData?.Items[0]?.Definitions, the expression automatically short-circuits, returning undefined.

NOTE: Optional chaining cannot be used on a non-declared root object, but can be used with a root object with value undefined.

undeclaredVar?.prop; // ReferenceError: undeclaredVar is not defined

‍

‍

2. Using Object.hasOwn()

Issue Description:

• Object.hasOwnProperty can lead to runtime errors if obj.prototype is null and obj.hasOwnProperty is undefined.

‍

Imagine we have an object structure as follows:

let role = "admin";

‍

In this case, roleResp.data.Items[0].Definitions.access is an object created with a null prototype. This means it does not inherit any properties or methods, including hasOwnProperty.

Using Object.prototype.hasOwnProperty.call would look like this:

If you run this code, it works because Object.prototype.hasOwnProperty.call uses the hasOwnProperty method from Object.prototype, which doesn't depend on the prototype of the target object (roleResp.data.Items[0].Definitions.access).

However, if someone mistakenly uses obj.hasOwnProperty directly on an object with a null prototype, it will throw an error because hasOwnProperty does not exist on roleResp.data.Items[0].Definitions.access:

‍

‍

Best Practice:

• Use Object.hasOwn() introduced in ES2022 for a safer and more concise property check.
• Now, let’s use the new Object.hasOwn method:

‍

This approach is safer and avoids potential errors, as Object.hasOwn does not depend on the prototype of the target object. It directly checks for the property on the object itself, making it robust against objects with null prototypes.

So, the replacement is straightforward:

‍

3. Simplifying Boolean Checks:

Issue Description:

• Redundant checks for boolean variables, such as variable == false, can be simplified.

‍

Best Practice:

• Use the ! operator for a cleaner and more readable boolean check.

So the above code can be simplified as: !applicationDetails.status

‍

‍

‍

4. Using for-of Loop:

Issue Description:

• Traditional for loops are less readable and more error-prone compared to for-of loops.

for (let i = 0; i < this.rows.length; ++i) {    if (!this.rows[i].selected) {        this.selectAllChecked = false;        break;    }}

Best Practice:

• Use for-of loops for iterating over arrays and other iterable objects.

‍

‍

Note: This not only improves readability but also aligns with best practices for writing maintainable JavaScript.

‍

5. Using Parameter Destructuring

Issue Description:

• Functions with more than 7 parameters can be confusing and hard to manage.

‍

Best Practice:

• Pass parameters as an object and destructure them inside the function for better readability and maintainability.

See here for Information:

‍

and check where the function is called change their also:

‍

6. Reducing Cognitive Complexity:

Issue Description:

• Functions with high cognitive complexity (more than 15) are difficult to understand and maintain.

‍

Best Practice:

• Refactor complex functions by dividing them into smaller, more manageable sub-modules.

Let’s understand this with a following example:

Consider a function that processes a list of orders, applying various discounts and taxes, and then generates an invoice. This function might have a high cognitive complexity due to multiple nested conditionals and loops.

‍

‍

After Refactoring into modules it will Reduce Cognitive Complexity:

‍

‍

Explanation:

‍

1. Separation of Concerns:

• The processOrders function has been divided into four smaller functions: calculateDiscount, calculateTax, calculateFinalAmount, and generateInvoice.
• Each function is handling a different parts of the order processing, which is helping to make the logic easier to follow.

2. Improved Readability:

• The processOrders function now look more like a sequence of high-level steps improving overall readability.

3. Reduced Cognitive Complexity:

• The cognitive complexity of the original processOrders function is reduced by dividing it into modules.

‍

Conclusion:

Sonarlint is like a helping tool which will help to write effective code. it’s like having a teacher right there with you, which will point out the ways to improve your code. But that’s not all! SonarLint is also like a security guard for your code. It watches out for any potential weak points that could let bad things happen. By learning from SonarLint, you can write better code and become more aware of keeping your code safe and secure.

‍

‍

‍

‍

‍

‍