Turbocharge your Angular project: A config tutorial
Tags: angular, configuration
Published: 2024-05-09 17:56:45

---
title: Turbocharge your Angular project: A config tutorial
published: true
description: Learn how to turbocharge your Angular project with essential configurations and tools like Tailwind CSS, ESLint, and Prettier. Elevate your development workflow for smoother coding experiences!
tags: [Angular, Configuration]
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55v4hiuecaj7oo443s98.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-05-09 17:03 +0000
---

## Introduction

Welcome aboard, Angular aficionados! You've embarked on a journey to supercharge your Angular project with some configurations and tools I like to use.

In this tutorial, we'll guide you through setting up essential configurations, integrating handy tools, and optimizing your workflow for a smoother development experience. Get ready to elevate your Angular game to the next level!

## Setting Up Your Angular Project

To kick things off, let's create a new Angular project using the [Angular CLI](https://angular.io/cli).

Open your terminal and run the following command:

```bash
ng new your_project --minimal --standalone --package-manager=pnpm
```

This command initializes a new Angular project named 'your_project' with minimal setup (without tests) using standalone and 'pnpm' as the package manager ([pnpm site](https://pnpm.io/)). Ignore this flag if you prefer using **`npm`** or **`yarn`**.

## **Integrating Tailwind CSS**

Tailwind CSS offers a utility-first approach to styling your applications. Let's integrate it into our project. Run the following commands in your terminal:

```bash
bashCopy code
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

These commands install Tailwind CSS and its dependencies and initialize a Tailwind configuration file.

Add to your **`style.scss`**:

```scss
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Don't forget to add to **`tailwind.config.js`**:

```jsx
content: ['./src/**/*.{html,ts}']
```

## **Adding ESLint for Code Linting**

Code quality matters! Let's add ESLint, a popular code linter, to our project. Execute the following command:

```bash
ng add @angular-eslint/schematics
```

This command integrates ESLint into your Angular project seamlessly.

## **Incorporating Prettier for Code Formatting**

Next up, let's enhance code formatting using Prettier. Run the following command to install Prettier:

```bash
pnpm install -D prettier
```

Additionally, we need to prevent conflicts between Prettier and ESLint. Execute the following commands to install necessary plugins:

```bash
pnpm install -D prettier-eslint eslint-config-prettier eslint-plugin-prettier
```

## **Fine-tuning Tailwind CSS with Prettier**

Tailwind CSS and Prettier can work harmoniously together. Let's ensure Tailwind classes are formatted correctly. Install the Tailwind Prettier plugin using the command:

```bash
pnpm install -D prettier-plugin-tailwindcss
```

## **Optimizing Configuration Files**

Now, let's optimize our configuration files for a seamless development experience. Follow the steps below:

1. Add a **`.prettierignore`** file and copy-paste the contents of your **`.gitignore`** file into it.
2. Ignore **`node_modules`** in ESLint by echoing **`"node_modules" > .eslintignore`** into your terminal.
3. Verify and update your **`.eslintrc`** file with the provided JSON configuration.

```json
{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:@angular-eslint/template/accessibility",
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}
```

## **Enhancing Visual Studio Code Setup**

Visual Studio Code is our development playground. Let's configure it for optimal productivity. Update your **`.vscode/extensions.json`** and **`.vscode/settings.json`** files with the provided configurations.

Add to **`.vscode/extensions.json`** to recommend and install extensions:

```json
{
  "recommendations": [
    "angular.ng-template",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}
```

Add to **`.vscode/extensions.json`**:

```json
{
  "editor.formatOnSave": true,
  "eslint.validate": ["json"],
  "files.autoSave": "onFocusChange",
  "[html, scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true},
  "files.exclude": {
    "node_modules/": true,
    "dist/": false,
    ".angular/": true}
}
```

The **`files.exclude`** true option helps to save memory during builds.

## **Optimizing Angular Schematics**

Customize Angular schematics to generate elements in the format that interests us. Update your **`angular.json`** file with the provided schematics configurations.

```json
"schematics": {
  "@schematics/angular:component": {
    "inlineTemplate": false,
    "inlineStyle": false,
    "style": "scss",
    "skipTests": true,
    "standalone": true,
    "changeDetection": "OnPush"
  },
  "@schematics/angular:class": {
    "skipTests": true},
  "@schematics/angular:directive": {
    "skipTests": true,
    "standalone": true},
  "@schematics/angular:guard": {
    "skipTests": true,
    "functional": true},
  "@schematics/angular:interceptor": {
    "skipTests": true},
  "@schematics/angular:pipe": {
    "skipTests": true,
    "standalone": true},
  "@schematics/angular:resolver": {
    "skipTests": true,
    "functional": true},
  "@schematics/angular:service": {
    "skipTests": true}
}
```

## **Adding Pre-commit Hooks and lint-staged**

Ensure code quality before each commit using pre-commit hooks. Install Husky and lint-staged with the commands:

```bash
pnpm i -D husky lint-staged
npx husky init
```

Add at the end of your **`package.json`**:

```json
"lint-staged": {
  "*.(ts|js|html|css|scss|json|md)": [
    "prettier --write"
  ],
  "*.(ts|js)": [
    "eslint --fix"
  ]
}
```

Then, update your **`.husky/pre-commit`** file with the provided script:

```bash
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
```

## **Implementing Commit Linting**

Maintain a consistent commit message format with commitlint.

```bash
pnpm i D @commitlint/cli @commitlint/config-conventional
```

Create a **`commitlint.config.js`** file with the provided configuration.

```bash
touch commitlint.config.js
```

And add it:

```jsx
module.exports = {
  extends: ['@commitlint/config-conventional']
};
```

Additionally, update your **`.husky/commit-msg`** file with the provided script:

```bash
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}
```

## **Conclusion**

Congratulations! You've successfully configured your Angular project with essential tools and optimizations. With Tailwind CSS for styling, ESLint and Prettier for code quality, and seamless integration of pre-commit hooks and commit linting, your development workflow is now smoother and more efficient than ever.

Let us know in the comments if there are any tools or configurations you like to use in your projects?

Happy coding!

🚀 Follow me on [X.com](https://twitter.com/alcaidio) or [GitHub](https://github.com/alcaidio) for more tips and updates on Angular development!