Developing a TypeScript project can be exciting, but as your codebase grows, maintaining consistency and quality becomes crucial. To streamline your development process and making sure code integrity remains a priority, integrating tools like ESLint, Prettier, Husky pre-commit hooks, and configuring .vscode extensions.json settings can boost your workflow significantly.

Setting the Stage: Prettier Formatter

Before diving into the details, let’s assume you’ve already integrated Prettier into your project. Prettier ensures consistent code formatting and can be easily customized to fit your team’s preferences. If you haven’t added it yet, make sure to do so and configure it according to your project’s needs.
Simply install it with pnpm or npm and setup your preferred config in the .prettierrc file.

pnpm i prettier

Step 1: ESLint Setup

ESLint is a powerful tool for identifying and fixing common coding issues. To get started, install ESLint and its TypeScript parser:

npm install eslint @typescript-eslint/eslint-plugin eslint-config-standard-with-typescript eslint-plugin-import eslint-plugin-n eslint-plugin-prettier eslint-plugin-promise --save-dev

Next, create an ESLint configuration file in your project’s root directory:

npx eslint --init

Follow the prompts to set up your ESLint configuration. Ensure you select TypeScript as the project type and choose the appropriate options based on your project requirements.

Step 2: Husky Pre-commit Hooks

Husky allows you to set up Git hooks easily. Git hooks enable you to run scripts before committing changes. To integrate Husky into your project, install it using npm:

npm install husky --save-dev
npx husky add .husky/pre-commit "npm lint && npm prettier"

Once Husky is installed, add the same pre-commit hook to your package.json file:

"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm run prettier"
  }
}

This configuration runs ESLint on staged .js and .ts files, fixes any issues automatically, and stages the changes for commit.

Step 3: .vscode Extensions.json Settings

Visual Studio Code provides a powerful extension system that enhances the editor’s functionality. You can configure these extensions on a per-project basis using .vscode/extensions.json. Create this file in your project’s .vscode directory if it doesn’t exist already.

Here's an example of .vscode/extensions.json for TypeScript development:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-typescript-tslint-plugin"
  ]
}

In this configuration, I recommend three extensions:

1. dbaeumer.vscode-eslint: Integrates ESLint into VS Code, highlighting and fixing issues directly within the editor.
2. esbenp.prettier-vscode: Provides Prettier integration, ensuring consistent code formatting as you code.
3. ms-vscode.vscode-typescript-tslint-plugin: Offers TypeScript and TSLint support, aiding in identifying and fixing linting errors in your TypeScript code.

By configuring these extensions, you enhance your development environment and ensure a seamless coding experience.
Wrapping Up

Integrating ESLint, Prettier, Husky pre-commit hooks, and configuring .vscode extensions.json settings can significantly improve your TypeScript project’s quality, consistency, and overall development experience. By following these steps and customizing the configurations to fit your specific needs, you can optimize your workflow, catch errors early, and collaborate more effectively with your team.