Introduction

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:

  • Step 1: Create a React Project with TypeScript
  • Step 2: Install SonarQube
  • Step 3: Configuring SonarQube over our React + TypeScript project
  • Configure Jest to send information to SonarQube
  • Configure ESLint to send information…


Automate validation before submitting your code

Introduction

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.

Prerequisites

Node.js:You need Node version >= 10 installed. So, if you don’t have it, please go to NodeJS website, download and install it on…


Introduction

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.

Why use ESLint and Prettier?

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.

So, as the…


Introduction

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!

Prerequisites

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/)

Step 1: Create a React Project with Typescript

The following command will create a project inside a folder my-app.

On terminal:

npx create-react-app my-app --template typescript

Step 2: Install Prettier package

Inside the project directory, open a terminal.

On terminal, run:

npm install --save-dev --save-exact…

Introduction

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!

Prerequisites

Note: You need Node version >= 10 installed. So, if you don’t have it, please go to NodeJS website, download…


Written by:
@andrebnassis — https://github.com/andrebnassis
@phabh — https://github.com/phabh

Introduction

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.

Script

How to install it on a website

To install it on a website, just follow the steps on this article:
https://help.blip.ai/docs/channels/blip-chat/adicionar-bot-site-blip-chat/

How to test it as localhost

1. Install node LTS
https://nodejs.org/en/download/

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.
serve

4. Open the localhost url created (in this example, http://localhost:5000) and BLiP Chat Widget will…

André Borba Netto Assis

Just a hardworking developer | https://github.com/andrebnassis

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store