bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/Node.js/JS & TS Features
Node.js•JS & TS Features

Node.js Linting & Formatting

Code Quality

Consistent code quality and style is important for Node.js projects, especially in team environments.

It helps with:

Readability and maintainability of code

Early bug detection and prevention

Consistent coding style across the team

Automated code reviews

Better developer experience

Note:

This guide covers both JavaScript and TypeScript tooling, as they share similar linting and formatting ecosystems.

ESLint: JavaScript/TypeScript Linting

ESLint is the most popular JavaScript/TypeScript linting tool that helps identify and report on patterns found in your code. It's highly configurable and supports:

Custom rules and configurations

TypeScript support through

Formula

@typescript - eslint/parser

Plugin ecosystem for framework-specific rules

Automatic fixing of common issues

Formula

Installation npm install -- save - dev eslint

Comprehensive ESLint Configuration

Here's a more complete.eslintrc.json configuration for a Node.js project with TypeScript support:

{
"env": {
"node": true,
"es2021": true,
"browser": true
},
"extends": [
"eslint:recommended",

Formula

"plugin:@typescript - eslint/recommended"

],

Formula

"parser": "@typescript - eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},

Formula

"plugins": ["@typescript - eslint"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "single"],
"indent": ["error", 2],

Formula

"no - console": "warn",
"no - unused - vars": "warn"
}
}

Advanced ESLint Usage

Beyond basic linting, ESLint offers powerful features for maintaining code quality:

Common Commands

Formula

# Lint all JavaScript/TypeScript files npx eslint .
# Fix auto - fixable issues npx eslint -- fix .
# Lint specific file npx eslint src/index.js

Prettier: Code Formatter

Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules. It supports: JavaScript, TypeScript, JSX, CSS, SCSS, JSON, and more

Opinionated defaults with minimal configuration

Integration with ESLint and other tools

Support for editor integration

Tip:

Use Prettier for formatting and ESLint for catching potential errors and enforcing code patterns.

Formula

Installation npm install -- save - dev -- save - exact prettier

Comprehensive Prettier Configuration

Formula

Here's a well - documented.prettierrc configuration with common options:
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "avoid"
}

Advanced Prettier Usage

Prettier can be customized and integrated into your workflow in various ways:

Common Commands

# Format all files npx prettier --write . # Check formatting without making changes npx prettier --check .

Formula

# Format specific file npx prettier -- write src/index.js
Seamless ESLint + Prettier Integration

To avoid conflicts between ESLint and Prettier, set up proper integration:

Previous

Node.js Advanced TypeScript