DEV Community

Cover image for Configuring Prettier and ESLint in Your VSCode TypeScript Project
Nils Whitmont
Nils Whitmont

Posted on • Updated on

Configuring Prettier and ESLint in Your VSCode TypeScript Project

Introduction

In the dynamic world of front-end development, consistency and maintainability are key. This is where Prettier and ESLint step in, acting as your code sheriffs, enforcing order and style. Today, we'll guide you through configuring these essential tools in your VSCode TypeScript project, ensuring your code stays clean, clear, and consistent.

The Sheriff's Posse:

  • Prettier: The formatting outlaw, enforcing consistent code style based on your defined rules. No more manual indentation battles!
  • ESLint: The style deputy, enforcing code quality and best practices through customizable rules. Say goodbye to linting inconsistencies!

Equipping Your Posse:

1. Installation:

Open your terminal and navigate to your project directory. Install the necessary packages using npm:

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

2. Configuration Files:

Prettier: Create a .prettierrc file at the root of your project and add your desired formatting rules. Here's a basic example:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100
}
Enter fullscreen mode Exit fullscreen mode

ESLint: Create a .eslintrc.json file and extend the eslint-config-prettier to ensure Prettier takes precedence for formatting rules:

{
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
  "plugins": ["react"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Wielding the Tools:

  • Format Document:
    • Mac: Cmd + Shift + P, type "Format Document" and select it.
    • Windows: Ctrl + Shift + P, type "Format Document" and select it.
  • Auto Save & Format:
    • Open VSCode settings (Code > Preferences > Settings).
    • Search for "auto save" and enable "Files: Auto Save".
    • Search for "format on save" and enable "Editor: Format On Save".

4. Code Marshaling:

  • Vertical Line at 80px:
    • Open VSCode settings.
    • Search for "editor.guides" and set "editor.guides.bracketPair": "true", "editor.guides.indentation": "true", and "editor.rulers": [80].

5. Posse Expansion:

  • Create a .vscode/extensions.json file at the root of your project.
  • Add the following to recommended extensions:
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Rounding Up:

With Prettier and ESLint configured, your code becomes a well-marshalled posse, ready to tackle any front-end challenge. Remember, keep these configurations fluid as your project evolves, and always refer to the official documentation for more detailed instructions and customization options:

Ride on, partner, and keep your code clean!

Top comments (0)