DEV Community

Cover image for Turbocharge your Angular project: A config tutorial
Timothy Alcaide
Timothy Alcaide

Posted on

Turbocharge your Angular project: A config tutorial

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.

Open your terminal and run the following command:

ng new your_project --minimal --standalone --package-manager=pnpm
Enter fullscreen mode Exit fullscreen mode

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). 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:

bashCopy code
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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

Add to your style.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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

content: ['./src/**/*.{html,ts}']
Enter fullscreen mode Exit fullscreen mode

Adding ESLint for Code Linting

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

ng add @angular-eslint/schematics
Enter fullscreen mode Exit fullscreen mode

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:

pnpm install -D prettier
Enter fullscreen mode Exit fullscreen mode

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

pnpm install -D prettier-eslint eslint-config-prettier eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

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:

pnpm install -D prettier-plugin-tailwindcss
Enter fullscreen mode Exit fullscreen mode

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.
{
  "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": {}
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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:

{
  "recommendations": [
    "angular.ng-template",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Add to .vscode/extensions.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}
}
Enter fullscreen mode Exit fullscreen mode

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.

"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}
}
Enter fullscreen mode Exit fullscreen mode

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:

pnpm i -D husky lint-staged
npx husky init
Enter fullscreen mode Exit fullscreen mode

Add at the end of your package.json:

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

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

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

npx lint-staged
Enter fullscreen mode Exit fullscreen mode

Implementing Commit Linting

Maintain a consistent commit message format with commitlint.

pnpm i D @commitlint/cli @commitlint/config-conventional
Enter fullscreen mode Exit fullscreen mode

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

touch commitlint.config.js
Enter fullscreen mode Exit fullscreen mode

And add it:

module.exports = {
  extends: ['@commitlint/config-conventional']
};
Enter fullscreen mode Exit fullscreen mode

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

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

npx --no -- commitlint --edit ${1}
Enter fullscreen mode Exit fullscreen mode

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 or GitHub for more tips and updates on Angular development!

Top comments (0)