Motivation

When working with code (especially when working in a large team), we face specific difficulties and want the code to meet the following requirements:

Follows centralized formatting
Follows clean code concepts
Follows standard conventions
To be free from errors

It isn't easy to meet the above requirements manually. However, there are exceptional utilities for this, which we will talk about below.

Tools

ESLint

ESLint is a JavaScript Code Quality Tool.

Prettier

Prettier is a code formatter. It provides consistent styling by applying your own rules that take maximum line length into account, wrapping code as needed.

Project example

For example, let's create a simple typescript project with one file.

Install Node.js (https://nodejs.org/)
Create project folder typescript-hello-world
Go to typescript-hello-world
Create an src folder
Go to src folder
Create file hello.ts
Add the code to hello.ts

const hello = (): void => {
    console.log('Hello, World')
};

export {hello}

Run the "npm init -y"

Your project is ready.

Configuration

Add development dependencies

^{npm install typescript eslint prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin -D}
Add .eslintrc, .eslintignore, .prettierrc, .prettierignore files from https://github.com/kankou-aliaksei/typescript-eslint-prettier repository into root project folder
Add scripts to the package.json file

{
    ...
    "scripts": {
	...
        "format": "prettier --write \"src/**/*.{ts,js}\"",
        "lint": "eslint \"src/**/*.{ts,js}\" --fix"
    },
    ...
}

Practice

The utilities are ready to use, and you can now run automatic formatting and code quality checking.

To format code run:

npm run format

After executing this command, the code will look more expressive, correspond to the regular canons, and look like this:

const hello = () => {
    console.log('Hello, World');
};

export { hello };

To see the remaining inaccuracies, run:

npm run lint

Fix the remaining points (add the return type to the function) and enjoy clean code. :-)

const hello = (): void => {
    console.log('Hello, World');
};

export { hello };

Conclusion

With the help of the ESLint and Prettier features, you can automate the formatting of your code, make it more expressive and accurate, correspond to specific rules, and avoid errors and bottlenecks even before uploading the code to the shared source storage.

Improving the quality and formatting of the code in the TypeScript