You may think that being free is a positive thing. Sure, it has some benefits but it turns out you may want to impose you some restrictions if you don’t want to completely lose control when your codebase grows.
But this article is not about TypeScript. Today I’m gonna show you a tool which will greatly help you to find anti-patterns in your code automatically.
SonarQube empowers all developers to write cleaner and safer code.
This is their headline.
SonarQube is an open-source platform developed by SonarSource for continuous inspection of code quality to perform automatic reviews with static analysis of code
But how does it work ? Basically you spin up a SonarQube server on your computer or on a remote server and it will scan your code to detect bugs, code smells, and security vulnerabilities on each push.
I was amazed the first time I ran it by how accurate it was and by how few false positive it reported. It’s very easily pluggable into your CI pipelines and it supports up to 30 programming languages (including TypeScript).
They have a free open source tier and we’ll see how to set it up on your machine.
Installation and setup
This will cover only macOS setup but you can easily find how to do it on Windows following the official documentation at https://docs.sonarqube.org/
- Having Docker installed on your machine
- Having Homebrew installed : https://brew.sh/
First you’ll need to run the SonarQube server using docker. You can do so with the following command :
docker run -d —-name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube:latest
This will spin up the server on port 9000 of your machine. You can then open your browser and visit http://localhost:9000/. You will land on this page :
Just click login and enter the following credentials :
username : admin
In your dashboard create a new project and assign it a Project key and a Display Name (usually both your project name)
Next give a name to your token (you can use the same name as before) and generate a new token. Keep it for later and hit continue.
Now that our project is set up on SonarQube we’ll configure our React project.
Open your project in your favorite code editor and create a new file at the root called sonar-project.properties
This file will help the sonar-scanner to know what to test and how. In this file just put the following code by filling it with your values.
sonar.exclusions=.github/**, .vscode/**, android/**, assets/**, build/**, ios/**, node_modules/**sonar.projectName=deevent
Note that you’ll want to exclude certain folders from your analysis like node_modules or ios/android if you scan a React Native Project. (sonar.exclusions)
That’s it ! Now we need to run the sonar-scanner. First install it via homebrew
brew install sonar-scanner
And when it’s done, just run the command sonar-scanner from the root of your project. It will take some time and when it’s done go to the dashboard again and you’ll see your test results.
You’ll see multiple suggestion to improve your code quality and maintainability. The most interesting for me were “code smells”. These are piece of code not technically wrong but which could cause bugs upon refactoring or editing in the future.