DEV Community

Cover image for Setting Up ESLint and Prettier in an Ionic Angular Project
PRINCE KUKREJA
PRINCE KUKREJA

Posted on • Updated on

Setting Up ESLint and Prettier in an Ionic Angular Project

Maintaining clean and consistent code can be challenging, especially as your project grows. Thankfully, tools like ESLint and Prettier can help. In this guide, I'll walk you through setting up these tools in your Ionic Angular project.

Step 1: Install ESLint and Prettier
First, we need to install ESLint and Prettier along with their necessary plugins.

Install ESLint:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
Enter fullscreen mode Exit fullscreen mode

Install Prettier:

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure ESLint
Create a .eslintrc.json file in the root of your project and add the following configuration:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Prettier
Create a .prettierrc file in the root of your project:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true
}
Enter fullscreen mode Exit fullscreen mode

This configuration makes Prettier format your code with single quotes, trailing commas, a maximum line width of 80 characters, a tab width of 2 spaces, and semicolons at the end of statements.

Step 4: Ignore Files
To prevent ESLint and Prettier from running on certain files or directories, create the following ignore files.

Create a .eslintignore file:

node_modules
dist
www
Enter fullscreen mode Exit fullscreen mode

Create a .prettierignore file:

node_modules
dist
www
Enter fullscreen mode Exit fullscreen mode

Step 5: Add Scripts to package.json
To make it easy to run ESLint and Prettier, add the following scripts to your package.json:

"scripts": {
  "lint": "eslint . --ext .ts,.html",
  "lint:fix": "eslint . --ext .ts,.html --fix",
  "format": "prettier --write \"src/**/*.{ts,html,scss}\""
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Optional VS Code Integration
If you are using Visual Studio Code, you can install the ESLint and Prettier extensions for a better development experience.

  1. Install ESLint Extension: Go to the Extensions view (Ctrl+Shift+X), search for "ESLint" by Dirk Baeumer, and install it.

  2. Install Prettier Extension: Go to the Extensions view, search for "Prettier - Code formatter" by Esben Petersen, and install it.
    You can also configure VS Code to auto-fix lint and format on save by adding the following to your settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Running Linting and Formatting
You can now use the scripts defined in your package.json to lint and format your code:

  • Lint the code: Run the following command to lint your code:
npm run lint
Enter fullscreen mode Exit fullscreen mode
  • Fix linting errors: To automatically fix linting errors, run:
npm run lint:fix
Enter fullscreen mode Exit fullscreen mode
  • Format the code: To format your code with Prettier, run:
npm run format
Enter fullscreen mode Exit fullscreen mode

Conclusion
By following these steps, we can set up ESLint and Prettier in our Ionic Angular project. These tools will help keep the code clean and consistent, making it easier to maintain.
Happy coding!.

Top comments (0)