Create a react-ts template powered by Vite

ax — Tue, 26 Jul 2022 12:19:24 +0000

Steps:

Create a project with Vite.

With PNPM:

pnpm create react-ts-vite-template --template react-ts

With NPM:

npm create react-ts-vite-template --template react-ts

Change directory to your project, initialize git with:

git init

Install packages using:

pnpm install

#or

npm install

Run the application by using:

pnpm start dev

#or

npm start dev

Once you clean up the initial setup, commit and push to a Repository.
Go to the Repository in Github -> Settings -> Check the box for Template Repository
That's it!

You can use this template to generate new Repositories with the same configs and folder struture.

Quick start with ESLint

ax — Tue, 26 Jul 2022 06:26:49 +0000

What is ESLint?
ESLint is a popular EcmaScript Linting tool, used to find and fix problems in your Javascript code.

What can ESLint find and fix?
Missing semicolon, unused variables declared, no return type for functions, no default while writing switch cases, improper indentation i.e. stylistic errors etc. These can result in bugs or bad coding style. Some of these can be automatically fixed or a warning is thrown to the developer when we use ESLint.

How does ESLint work?
ESLint uses Espree for Javascript parsing. It uses an AST to evaluate patterns in code. It does all this before runtime.. meaning, without running your Javascript code it will find the bugs, syntax and stylistic errors.

Pre-requisites:
NodeJs (^12.22.0, ^14.17.0, or >=16.0.0)

Install:

npm init @eslint/config

#or

pnpm create @eslint/config

answer the prompted questions.. and you are done!!

DEV Community: ax

Create a react-ts template powered by Vite

Steps:

Quick start with ESLint