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

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
}

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"
  }
}

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"
  ]
}

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:

• Prettier: https://prettier.io/docs/en/options.html
• ESLint: https://eslint.org/docs/user-guide/configuring

Ride on, partner, and keep your code clean!