05_ESLint & SonarLint
ESLint and SonarLint are tools to improve your development workflow by continuously enforcing minimum quality standards during the development process. While using these is technically optional, the respective rules are also applied upon opening a Pull Request, so it is mandatory to fulfill their requirements.
Thus, code fulfilling the ESLint configuration's requirements should be considered the absolute minimum for submitting a Pull Request.
ESLint is an integral tool for developing quality code. It's important to understand that fulfilling ESLint's restrictions does NOT guarantee that code is of sufficient or good quality. The aim of the provided ESLint configuration are to:
- Avoid Errors
- Improve readability
- Minimize arbitrary choices and cognitive overhead
The WebStorm IDE provides excellent integration for ESLint, and suitable configurations are included in the repository. These configuration files are named .eslintrc.js; one is present for frontend and backend; respectively. In order for these configurations to work as intended, it's important that ESLint is configured properly within your IDE's preferences:
Note that it's recommended to use manual configuration, since we have multiple configurations within the repository, so the nearest one should be use (e.g. a file in /backend/src will use the config /backend/eslintrc.js).
In addition to ESLint, we use SonarLint with SonarQube to assess code directly within the IDE during development. Going further than ESLint, SonarLint provides more in-depth analysis of code, e.g. regarding code smells, quality issues, and potential security threats. Since this is also done upon opening a PR, it's highly recommended to have SonarLint correctly configured within your IDE to avoid automatic PR rejection. SonarCloud gives feedback on your code quality on every Pull-Request. The same feedback can also be integrated into your IDE such that you don't have to correct these changes in post but get notified while you are working.
To enable this setting within WebStorm, click on "File" -> "Settings" -> "Plugins". Search for "SonarLint" and download the Plugin. You will need to restart Webstorm.
Once Webstorm is restarted, go to "File" -> "Settings" -> "Tools" -> "SonarLint" and click on the [+]-Button. In "Connection Name", enter "PolygonQube", then choose the left option: "sonarcloud". Click on "Next".
Now you are prompted to input a Token. To do this, you must log into sonarcloud.io using your github account. Then, visit the security page and generate a token called "WebStorm". Copy-Paste the token value back into WebStorm under "Token". Click on "Next".
Select "PolygonSoftware" and click "Next" again 2 times, then "Finish".
Now you are almost done. Go again to "File" -> "Tools" -> "SonarLint" -> "Project Settings". Here, under "Connection", select "PolygonQube". For the project key, enter "polygon-software_full-stack-bootstrap". Now you are good to go!
You can now see a new tab on the bottom of your WebStorm IDE called "SonarLint". It shows you linting problems of the file you have currently open. It will also show any problems directly within your code as your regular linter. However, it will not only show you code formatting problems like eslint, but also potential bugs, security vulnerabilities, code smells etc.
If you open a file for the first time, give SonarQube some time to consult the server for a security analysis. You can see that SonarQube is running if on the bottom of WebStorm, you see a "Running SolarLint Analysis on XXX". This should not take more than a few seconds per file.
Once successfully set up, your SonarLint configuration within WebStorm's preferences should look as follows:
