@snappymob/eslint-config-web v1.0.1

eslint-config-web

Usage

JavaScript

Install dependencies

$ yarn add -D eslint@8.3.0 \
              @babel/eslint-parser@7.16.3 \
              @snappymob/eslint-config-web

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
  extends: [
    '@snappymob/web',
  ],
  rules: {
    // Customize your rules
  },
};

TypeScript

Install dependencies

$ yarn add -D eslint@8.3.0 \
              typescript@4.5.2 \
              @typescript-eslint/parser@5.5.0 \
              @typescript-eslint/eslint-plugin@5.5.0 \
              @snappymob/eslint-config-web

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
  extends: [
    '@snappymob/web',
    '@snappymob/web/typescript'
  ],
  rules: {
    // Customize your rules
  },
};

Vue

Install dependencies

# `vue-eslint-parser` does not have Eslint 8.0 support yet
# https://github.com/vuejs/vue-cli/issues/6759
$ yarn add -D eslint@7.32.0 \
              @babel/eslint-parser@7.16.3 \
              vue-eslint-parser@8.0.1 \
              eslint-plugin-vue@8.1.1 \
              @snappymob/eslint-config-web

Create an .eslintrc.js in the root directory of your project, then copy the following content into it:

module.exports = {
  extends: [
    '@snappymob/web',
    '@snappymob/web/vue'
  ],
  rules: {
    // Customize your rules
  },
};

Setup Pre-commit Hook

You should set this up in the root directory (if you're running a monorepo)

$ yarn add -D husky@7.0.4 lint-staged@12.1.2

Setup Husky

$ yarn exec husky install
$ yarn exec husky add .husky/pre-commit "lint-staged --no-stash"

Setup lint-staged in package.json

package.json example

{
  "lint-staged": {
    "*.{vue,ts}": ["prettier --write", "eslint --fix"],
    // Monorepo
    "backend/**/*.{js,ts}": ".scripts/pre-commit.sh backend",
    "landing/**/*.{js,jsx,ts,tsx,vue}": ".scripts/pre-commit.sh landing",
    "admin-web/**/*.{js,jsx,ts,tsx,vue}": ".scripts/pre-commit.sh admin-web",
    "user-web/**/*.{js,jsx,ts,tsx,vue}": ".scripts/pre-commit.sh user-web"
  }
}

Monorepo pre-commit.sh example

#!/usr/bin/env bash
SUB_DIR=$1
shift 1
STAGED_FILES=$@

cd $SUB_DIR

case "$SUB_DIR" in
  backend | landing)
    yarn format $STAGED_FILES && yarn lint $STAGED_FILES
    ;;
  user-web | admin-web)
    yarn lint $STAGED_FILES
    ;;
esac

Local Development

yarn install
yarn link
# yarn unlink to unregister the repository

On your application

yarn link eslint-config-web
# PATH to eslint-config-web local repository
# Install dependencies
yarn add file:../eslint-config-web