Welcome! If you're looking for ways to elevate your JavaScript/TypeScript project and streamline your workflow, you're in the right place. Today, we're going to delve into a powerful toolchain that will not only make your code cleaner and more consistent, but will also automate crucial parts of your development process.

With Eslint, Prettier, Husky, and Lint-Staged, you'll be able to focus more on crafting outstanding applications and less on fixing pesky style inconsistencies or syntax errors. Let's get started!

What are the Advantages of this Setup?

Before we get our hands dirty, let's discuss why you should consider this setup.

1. Eslint: This tool will help you catch and fix problems in your JavaScript/TypeScript code. It checks for common syntax and style errors, making your code more consistent and easy to understand.
2. Prettier: This is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules. This eliminates all original styling and guarantees consistency.
3. Husky: This tool improves your commits and more. It allows you to run scripts (like linting or tests) before committing your code, ensuring only quality code gets committed.
4. Lint-Staged: When combined with Husky, it allows you to run linters on staged changes only, making the process faster and more efficient.

Now that we understand the “why”, let's move on to the “how”.

Setting Up Your Project

Ensure that you have Node.js installed and that you've initialized a new project before beginning.

Step 1: Install the necessary packages

Begin by installing the necessary packages using npm, Node.js's package manager. In your terminal, run the following commands:

1npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier  
2npm install --save-dev husky lint-staged

Step 2: Set up Eslint

Create an .eslintrc.js file in your project's root directory with the following contents:

1module.exports = {  
2    root: true,  
3    parser: '@typescript-eslint/parser',  
4    plugins: ['@typescript-eslint'],  
5    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],  
6};

This configuration sets Eslint to use the TypeScript parser and extends some recommended configurations.

Step 3: Set up Prettier

Create a .prettierrc file in your project's root directory with the following contents:

1{  
2  "semi": true,  
3  "trailingComma": "all",  
4  "singleQuote": true,  
5  "printWidth": 80,  
6  "tabWidth": 2  
7}

You can modify these settings to match your personal preferences.

Step 4: Set up Husky

Update your package.json file with the following scripts and configurations:

1{  
2  "scripts": {  
3    "lint": "eslint --quiet --fix",  
4    "prepare": "husky install"  
5  }
6}

The prepare script is responsible for setting up Husky's git hooks.

Step 5: Set up Husky's Pre-Commit Hook

Run the following command in your terminal to set up a pre-commit hook with Husky:

1npm run prepare
2
3npx husky add .husky/pre-commit "npx lint-staged"

This command creates a pre-commit file in the .husky directory with the specified script. The pre-commit hook will trigger Lint-Staged whenever you make a commit.

Step 6: Set up Lint-Staged

Add the following configuration to your package.json file:

1{  
2  "lint-staged": {  
3    "*.{js,ts}": ["npm run lint", "prettier --write"]  
4  }  
5}

This configuration will run Eslint and Prettier on your staged files each time you make a commit.

Step 7: Test Your Configuration

Now, let's test everything to ensure it's working as expected. Make a small change in one of your files and stage it with git:

1git add .

Then, try committing the changes:

1git commit -m "Test commit"

If your setup is correct, Husky will trigger Eslint and Prettier to run on your staged files. If there are any issues, Eslint will attempt to fix them and Prettier will format your code according to its rules. If everything is in order, your commit will be successful.

Remember, the configuration for these tools lives in their respective configuration files (.eslintrc.js for Eslint, .prettierrc for Prettier, .husky/pre-commit for Husky, and lint-staged within package.json).

These are the heart of your setup and hold the rules which your code will be checked against. While we've provided a basic setup, each of these tools is highly customizable. I encourage you to explore their respective documentation to fine-tune the configurations to best fit your project's needs.

Your development environment should be a tailored suit, not a one-size-fits-all.

And voila!

You've supercharged your project with Eslint, Prettier, Husky, and Lint-Staged. Not only will this setup help you maintain a consistent coding style, but it'll also ensure that any issues are caught and fixed early. This might seem like a bit of work up front, but the boost to your productivity and code quality makes it a worthwhile investment. Here's to writing better code, catching errors earlier, and collaborating effectively with your team.

Here are some helpful links to the official documentation for each tool, as well as some additional resources to help you customize your setup:

1. Eslint: Visit the Eslint User Guide to learn more about how to customize your Eslint configuration.
2. Prettier: The Prettier documentation is a great resource for learning more about the various options available to you.
3. Husky: Check out the Husky documentation to learn more about how git hooks work and how you can use them to automate your workflow.
4. Lint-Staged: The Lint-Staged GitHub repository has a great README file with detailed instructions and examples.

To go even further and truly make this setup your own, you might also want to look into creating a shared configuration for Eslint, or learning more about advanced Prettier configuration.