SonarQube is a tool that helps you catch bugs and vulnerabilities in your app. Working together with ESLint and Unit tests, it provides a great code quality scan.
On this tutorial, I will show you how to set up SonarQube and run locally over a React TypeScript project. Then, we will improve SonarQube analysis by adding ESLint and Jest reports.
The topics are organized as follow:
Even if you set up tools that guarantees some code quality, it is possible that you can forget to execute them before pushing your code.
To automate and solve this problem, Husky + Lint-Staged packages help you prevent submitting code that does not follow some predefined rules (i.e: unit tests validation, code convention validation, code formatting, etc).
In this article I will teach you about Husky, Lint-Staged and how use those packages on a React TypeScript project.
This tutorial aims to be a definitive guide for setting up ESLint and Prettier working together on a React Typescript project.
After reading a lot of tutorials, and struggling myself into it, I decided to create this definitive guide to make life easier for anyone who needs it.
ESLint is one of the most popular tools for code quality rules check and code formatting.
Prettier is a code formatting tool.
So, why use Prettier if I can also format my code using just ESLint? In a short answer, because Prettier do the code formatting better than ESLint.
Prettier helps to maintain the code within some formatting rules like indentation, double or single quotes when using string, etc.
On this tutorial, I will show you how to setup and run over a React Typescript project.
So, let’s start!
Note: You need Node version >= 10 installed. So, if you don’t have it, please go to nodejs website, download and install it on your local machine. (https://nodejs.org/en/)
The following command will create a project inside a folder my-app.
npx create-react-app my-app --template typescript
Inside the project directory, open a terminal.
On terminal, run:
npm install --save-dev --save-exact…
After struggling a lot trying to install and understand ESLint on my React Typescript project, I decided to create a definitive guide to setting ESLint to a React Typescript project.
The main goal of this tutorial is to set up step-by-step and explain every line added or executed, instead of just giving you a bunch of files with a lot of configurations and expect that you will be able to understand what and how things are happening.
So, let’s start!
BLiP Chat is the messaging channel created by BLiP, used on websites and apps. On this tutorial, We will show you some tips and tricks about its use.
To install it on a website, just follow the steps on this article:
1. Install node LTS
2. Install package serve
npm -g i serve --save
3. Execute the command ‘serve’ inside the folder that the webpage script (with BLiP Chat script on it) is located.
4. Open the localhost url created (in this example, http://localhost:5000) and BLiP Chat Widget will…