frontend-standards

🚀 Frontend Standards

Frontend Standards is a package that automatically sets up ESLint, Prettier, and Husky in your workspace, helping you catch syntax errors and maintain consistent code style before your code reaches the pipeline.

📋 Table of Contents

• 📦 Installation
• ⚙️ Features
• 🔧 Usage
• 🔌 Recommended Extensions
• 📜 Pipeline

📦 Installation

The setup script will run automatically when you install the package, so all you need to do is:

npm install @mh-common/frontend-standards

If you can't find the husky directory and the other files like .eslintrc.cjs, .prettierrc etc. run the following command:

node node_modules/@mh-common/frontend-standards/install.js

The setup script will:

• Install ESLint, Prettier, and Husky dependencies in your workspace.
• Copy configuration files to the root of your workspace.
• Initialize Git (if not already initialized) and set up Husky with a pre-commit hook.

Once installed, Frontend Standards is ready to enforce code quality and consistency with zero additional setup.

⚙️ Features

• Consistent Formatting: Prettier ensures that your code has a uniform style, making it easier to read and maintain.
• Linting: ESLint helps you catch syntax errors and common code issues, improving overall code quality and reducing bugs.
• Git Hooks: Husky’s pre-commit hooks run checks before you commit, allowing you to catch and fix issues locally before they reach your repository or pipeline.

Why Linting?

Linting helps detect potential errors, code smells, and deviations from best practices. This prevents bugs from reaching production and makes the code easier to review and maintain.

Why Formatting?

Consistent code formatting improves readability and reduces friction between team members working on the same codebase, as it eliminates style-based diffs in version control.

Why Use This Setup?

Using this package allows you to catch issues before they reach the pipeline, saving you time and reducing the risk of failed builds. It’s better to identify errors locally than discover them after pushing code.

🔧 Usage

Automated Pre-commit Hook

Whenever you commit, a pre-commit hook will automatically run:

npx eslint --fix .

This will check your code for linting and formatting issues, automatically fixing any easy-to-solve errors before they’re committed. This ensures cleaner commits and reduces the need for manual code corrections.

🔌 Recommended Extensions

To ensure a consistent development experience, we recommend installing the following VS Code extensions:

• Prettier - Code formatter by Esben Petersen (esbenp.prettier-vscode)
• ESLint by Microsoft (dbaeumer.vscode-eslint)
• Prettier ESLint by Rebecca Vest (rvest.vs-code-prettier-eslint)

📜 Pipeline

To automate linting and formatting checks in a Bitbucket pipeline, you can add a configuration to your bitbucket-pipelines.yml file. This ensures that all code changes meet your code quality standards before being merged.

Here’s an example of a Bitbucket pipeline setup:

image: node:latest

pipelines:
  default:
    - step:
        name: Lint and Format Check
        caches:
          - node
        script:
          - npm install
          - npx eslint .

This configuration runs ESLint and Prettier checks on every push to ensure that all code follows the defined style and linting rules.