
> In the dynamic world of full-stack development, incorporating linting and formatting tools such as <a href="https://eslint.org/" target="_blank">ESLint</a> and <a href="https://prettier.io/" target="_blank">Prettier</a>, along with your <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> projects, is essential. This integration is particularly important in team settings to ensure code uniformity in syntax and style. Additionally, these tools play a vital role in early detection of errors and bugs. In this article, we'll explore how these tools automate the coding process to produce clean, consistent, and production-ready code.

## Understanding Linting: More Than Just Error Checking

Linting is a transformative process that not only identifies errors but also fosters a uniform coding style. <a href="https://eslint.org/" target="_blank">ESLint</a> and <a href="https://prettier.io/" target="_blank">Prettier</a> act like personal coding coaches, ensuring your TypeScript code remains in prime condition.

Code linting serves as an automated review of your source code, highlighting both programming and stylistic issues. This critical process significantly enhances code quality by minimizing errors, enforcing best coding practices, and ensuring a consistent coding style across projects. Integrating linting into your development workflow is, therefore, not just beneficial but necessary.

## ESLint: Your TypeScript Sentinel 🛡️

<a href="https://eslint.org/" target="_blank">ESLint</a> stands as the vigilant guardian of your TypeScript codebase. It enforces best practices and proactively identifies potential bugs, ensuring your code is not only functional but adheres to top programming standards.

This tool promotes a culture of quality and consistency. Its customizable rulesets make it adaptable for various coding scenarios, whether for individual developers or teams.

### Initial Setup for TypeScript

Start by integrating TypeScript into your project. If you haven't initialized a `package.json`, begin with:

```bash
npm init
npm install typescript --save-dev
```

Then, create a `tsconfig.json` in your project root:

```bash
npx tsc --init
```

Customize `tsconfig.json` as needed.

### Adding ESLint

Next, integrate ESLint:

```bash
npm install eslint --save-dev
```

### Configuring ESLint

Configure ESLint for TypeScript:

```bash
npx eslint --init
```

Choose the options that suit your TypeScript project.

### Example ESLint Configuration

Your `.eslintrc.js` might look something like this:

```js
module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  rules: {
    // Place to specify ESLint rules - can be used to overwrite rules specified from the extended configs
    // e.g., "@typescript-eslint/explicit-function-return-type": "off",
  },
};
```

## Prettier: The Stylist of Your Code 🎨

<a href="https://prettier.io/" target="_blank">Prettier</a> enhances your code's visual appeal and clarity. It automatically formats your code for consistency, which is invaluable in team projects.

When combined with ESLint, Prettier ensures your code is not only functionally excellent but also aesthetically pleasing.

### Installing Prettier

Add Prettier to your project:

```bash
npm install --save-dev prettier
```

### Prettier Configuration

Create a `.prettierrc` file to define your formatting preferences:

```json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true
}
```

## Harmony Between ESLint and Prettier 🤝

Integrating ESLint and Prettier is crucial for enhancing code quality and readability in TypeScript projects.

### Streamlining Their Integration

- ESLint focuses on code quality, identifying syntax errors and enforcing best practices.
- Prettier takes charge of formatting, ensuring a consistent style across the codebase.

### Compatibility and Collaboration

Use `eslint-plugin-prettier` and `eslint-config-prettier` to align ESLint with Prettier, enhancing both tools' efficiency.

This integration creates a cohesive development environment, where code not only functions well but also maintains a uniform, professional appearance, making teamwork and project maintenance more efficient and effective.

### Install Compatibility Plugins

```bash
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```

### Update ESLint Config

Modify `.eslintrc.js` to include Prettier:

```js
extends: [
  'plugin:@typescript-eslint/recommended',
  'prettier/@typescript-eslint',
  'plugin:prettier/recommended',
],
```

## Putting It All Together 🌟

Add these scripts to your `package.json` for simplified linting and formatting:

```json
"scripts": {
  "lint": "eslint --fix --color .",
  "format": "prettier --write ."
}
```

## Final Thoughts

In conclusion, integrating ESLint and Prettier into our TypeScript projects is crucial for enabling scalable growth. These tools strengthen our codebase, ensuring high-quality standards. By adopting these tools, we establish a foundation for efficient and maintainable project development. Happy coding!


Linting in TypeScript using ESLint and Prettier


> Effortlessly Kickstart Your next React Project with Vite and TypeScript: Rapid Development, Enhanced Scalability, and Seamless Tooling. Learn how to set up a project in under 2 minutes, leveraging Vite's speed, TypeScript's type safety, and a custom boilerplate for optimized build workflows, testing, linting, and Docker integration.

## Introduction

<a href="https://www.codescool.io/learning/introduction-to-react" target="_blank">React</a>, combined with <a href="https://www.codescool.io/learning/introduction-to-typescript" target="_blank">TypeScript</a>, offers a powerful way to develop scalable and maintainable web applications. TypeScript brings static typing to the world of JavaScript, making it easier to write error-free code. Meanwhile, <a href="https://vitejs.dev/" target="_blank">Vite</a> is a fast and lightweight build tool for modern web development, providing a rapid development experience focused on speed and simplicity.

Facing the complexities of tooling while striving to deliver code can often be less than enjoyable. The ideal scenario involves tools seamlessly working without becoming an obstacle. In this article, we will delve into the process of initiating your upcoming **React** project effortlessly using **Vite** and **TypeScript**, along with several other technologies, all in under 2 minutes, completely free from any setup concerns.

Traditionally, you might have considered turning to Create-React-App (CRA) for this purpose. However, imagine having access to a superior alternative that not only assists in establishing the initial structure but also configures your project with essential tools for optimized build and dev workflows, unit testing, integration testing, code formatting, linting, styling, docker configuration and more!

## What is Vite?

<a href="https://vitejs.dev/" target="_blank">Vite</a> is a build tool that aims to provide a faster and leaner development experience for modern web projects including 2 parts:

- A dev server that provides fast Hot module replacement
- A build command that bundles your code, pre-configured to output highly optimized static assets for production

## Why Vite

For years **Create React App (CRA)** and **Webpack** have been the go-to method for starting a React project. Then **Vite** came along. I started using Vite for building my React projects and I quickly realized that it’s much better in many ways. One of the reasons I really like Vite is because it resolves the unreasonably long wait time to spin up a dev server which affects developers’ productivity and happiness. This is where Vite really shines.

## Why combine TypeScript and Vite?

<a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and <a href="https://vitejs.dev/" target="_blank">Vite</a> are two powerful tools that have gained widespread popularity in the web development community. While TypeScript provides type safety and a strong foundation for building scalable applications, Vite offers a fast and efficient development experience. So, why combine these two technologies? Let’s take a look.

- **Improved type safety**: TypeScript provides optional type annotations that can catch type-related errors during development. This helps developers to write more robust and maintainable code and reduces the likelihood of bugs and unexpected behavior. With TypeScript and Vite, developers can ensure the code they write is high quality and free from type-related errors.
- **Faster development experience**: Vite was designed with speed and simplicity in mind. It offers instant reloading and optimized build times, making developing web applications more accessible and efficient. By combining TypeScript with Vite, developers can take advantage of TypeScript’s robust type system and Vite’s fast development experience for a more enjoyable and efficient development process.
- **Scalable and maintainable code**: TypeScript is a statically typed language that supports modern JavaScript features and is widely used in large-scale projects. By combining TypeScript with Vite, developers can write scalable and maintainable code that is easy to understand and modify over time.
- **Improved performance**: Vite is optimized for fast build times and minimal overhead, making it an excellent choice for large and complex applications. This results in improved performance and shorter load times for the end user. By combining TypeScript and Vite, developers can build high-performance web applications that deliver a fast and smooth user experience.

Enough talking. Let’s go and set up our **React** + **Vite** + **TypeScript** project!

## Project setup and quick start

First, ensure that you have **Node.js ≥v18** installed on your machine.

> Pro tip: <a href="https://www.codescool.io/learning/how-to-easily-manage-different-node-versions-with-nvm">Nvm</a> (Node.js Version Manager) makes it easier to install and manage multiple versions of Node.js on your local environment.

Next, download and install <a href="https://pnpm.io/" target="_blank">Pnpm</a>.

```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
```

> _PNPM is an alternative package manager for Node.js which stands for “Performant NPM”._

Then, create your project by running the following commands in the terminal:

```bash
npx degit DomenicoColandrea86/react-vite-typescript-boilerplate app
cd app
git init
nvm use
pnpm install
pnpm dev
```

This will effectively clone the boilerplate repo, navigate into the app directory, initialize a new git repository, install project dependencies, and run the dev server.

The app will be served with **Hot Reload** at <a href="http://localhost:5173" target="_blank">http://localhost:5173</a>.

<img src="https://www.codescool.io/images/react-typescript-vite-starter.jpg">

## Other available commands

### Build

Build the app for production.

```bash
pnpm build
```

### Testing the app

This setup also comes with testing baked in using <a href="https://vitest.dev/" target="_blank">Vitest</a> and <a href="https://testing-library.com/" target="_blank">Testing-library</a>. You can run tests using the following command:

```bash
pnpm test
```

### Code Formatting and Linting

Similarly, linting via <a href="https://eslint.org/" target="_blank">ESLint</a> and formatting via <a href="https://prettier.io/" target="_blank">Prettier</a> can be triggered by running the following commands:

```bash
pnpm lint
```

and

```bash
pnpm prettier
```

### Docker and NGINX

If you would like to run the app via <a href="https://www.docker.com/" target="_blank">Docker</a> and <a href="https://nginx.org/" target="_blank">NGINX</a>, you can run:

```bash
pnpm docker:build
```

and

```bash
pnpm docker:run
```

For more information on how to use this boilerplate, please visit <a href="https://github.com/DomenicoColandrea86/react-vite-typescript-boilerplate" target="_blank">this</a> GitHub repo.

## Conclusion

In this article, we discussed the many benefits of combining **React**, **TypeScript**, and **Vite**, as well as demonstrated how to quickly scaffold a new project using these technologies following a custom boilerplate, so that you can avoid _analysis paralysis_ and focus on the important stuff — writing code and creating amazing applications!


Posts with tag Eslint

Linting in TypeScript using ESLint and Prettier

Create a React app with Vite + TypeScript in under 2 minutes