Chapter Outline

Enhancing Productivity with TypeScript Linters and Formatters

Code formatters and linters are a standard part of the tooling used within a standard development environment. Integrating linters and formatters like ESLint and Prettier can significantly enhance productivity by enforcing coding standards and automatically formatting code. This article explores how to integrate these tools into both new and existing TypeScript projects.

Setting Up Linters and Formatters in a New TypeScript Project

1. Starting a New TypeScript Project

First, initialize a new Node.js project and add TypeScript:

bash
1mkdir my-ts-project
2cd my-ts-project
3npm init -y
4npm install typescript --save-dev
5npx tsc --init

This sets up a basic TypeScript environment.

2. Adding ESLint

Install ESLint along with the TypeScript parser and plugin:

bash
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Next, create an .eslintrc.js file to configure ESLint:

.eslintrc.js
1module.exports = {
2  parser: '@typescript-eslint/parser',
3  extends: [
4    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
5  ],
6  parserOptions: {
7    ecmaVersion: 2020,
8    sourceType: 'module',
9  },
10  rules: {
11    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
12    '@typescript-eslint/no-unused-vars': 'error',
13  },
14};

3. Adding Prettier

Install Prettier and the ESLint plugin for Prettier:

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

Update the .eslintrc.js to integrate Prettier:

.eslintrc.js
1module.exports = {
2  // previous configuration...
3  extends: [
4    'plugin:@typescript-eslint/recommended',
5    'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors
6  ],
7};

Create a .prettierrc file to configure Prettier options:

.prettierrc
1{
2  "semi": true,
3  "singleQuote": true
4}

This setup enforces semicolons and uses single quotes for strings.

Integrating Linters and Formatters into an Existing TypeScript Project

Integrating ESLint and Prettier into an existing project follows similar steps, with extra care not to disrupt existing configurations.

1. Install Necessary Packages

If not already installed, add ESLint and Prettier to your project:

bash
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

2. Configure ESLint and Prettier

Follow the steps mentioned in the new project setup to create .eslintrc.js and .prettierrc. If these files already exist, you may need to merge configurations carefully. Ensure that your ESLint configuration extends plugin:@typescript-eslint/recommended and plugin:prettier/recommended.

3. Resolve Conflicts

After integration, run the linter to check for conflicts:

bash
npx eslint . --ext .ts

Resolve any linting errors that arise based on the new rules.

4. Format Existing Code

To reformat the existing codebase according to the new Prettier setup, run:

bash
npx prettier --write .

This command formats all files, applying the defined code style consistently across your project.

Running Linter and Formatter as npm Scripts

Enhance your package.json to include scripts that facilitate running ESLint and Prettier across your TypeScript codebase:

package.json
1"scripts": {
2  "lint": "eslint 'src/**/*.{ts,tsx}' --fix",
3  "format": "prettier --write 'src/**/*.{ts,tsx}'"
4}

lint: This script runs ESLint on all TypeScript files in your src directory, automatically fixing fixable issues.
format: This script formats all TypeScript files using Prettier.

Using the Scripts

To check and fix linting errors, run:

bash
npm run lint

To format your code, run:

bash
npm run format

Conclusion

Integrating tools like ESLint and Prettier into TypeScript projects standardizes coding practices, reduces bugs, and enhances code readability. This setup is invaluable in team environments, ensuring that all developers adhere to the same coding standards, which is critical for maintaining the quality of the codebase.

For more detailed information and advanced configurations, refer to the following resources:

By leveraging these tools, you can focus more on solving business problems rather than fixing trivial bugs or debating code styles. Happy coding!

TypeScript