Nervously Practice Multithreading

    eslint-config-triple

    0.5.1 • Public • Published

    eslint-config-triple

    Unified ESlint config for Triple projects

    This config is an effort to reduce duplicated configuration across projects.
    The goal is not to prescribe a fixed set of linting rules.
    This config should be considered a starting point which can be tweaked to the project needs.

    • Prettier (Use prettier formatting as base)
    • Airbnb (For remaining formatting + coding practises)
    • Typescript recommendations (Typescript coding practises)

    The rules where the config deviates from these presets are documented in eslint-config-triple source files.

    When you agree with the rule in general but not for a specific scenario use comments like:
    /* eslint-disable-next-line rulename */ (Tip: Press cmd + . or click the lightbulb in VSCode)

    Installation

    npm install --save-dev \
      concurrently \
      eslint \
      typescript \
      prettier \
      @typescript-eslint/eslint-plugin \
      @typescript-eslint/parser \
      eslint-config-airbnb-typescript \
      eslint-config-prettier \
      eslint-plugin-prettier \
      eslint-plugin-only-warn \
      eslint-plugin-import \
      eslint-import-resolver-typescript \
      eslint-config-triple

    For the React projects:

    npm install --save-dev \
      eslint-config-airbnb \
      eslint-plugin-react \
      eslint-plugin-react-hooks \
      eslint-plugin-jsx-a11y

    For the Svelte projects:

    npm install --save-dev \
      eslint-config-airbnb-base \
      eslint-plugin-svelte3

    Other projects:

    npm install --save-dev eslint-config-airbnb-base

    Usage

    The config uses the prettier integration, therefore certain config files heavily impact the formatting:

    Important!
    Remove existing .prettierrc and .editorconfig files from your project and modify your package.json to include:

    "prettier": "eslint-config-triple/.prettierrc"

    ESLint

    Create a .eslintrc with:

    {
      "extends": ["triple"],
      "env": {
        "browser": true,
        "node": true
      },
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "./tsconfig.json"
      }
    }

    For React projects change: "extends": ["triple"] into "extends": ["triple/react"]

    For Svelte projects change: "extends": ["triple"] into "extends": ["triple/svelte"] and add "extraFileExtensions": [".cjs", ".svelte"] to the parserOptions.

    Trouble with linting js files?

    Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config:

    Change "project": "./tsconfig.json" to "project": "./tsconfig.eslint.json"

    Create the tsconfig.eslint.json and add additional include paths:

    {
      "extends": "./tsconfig.json",
      "include": [
        "src/**/*.d.ts",
        "src/**/*.js",
        "src/**/*.jsx",
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.svelte",
        ".*.js",
        "**/*.js",
        "**/*.jsx",
        ".*.cjs",
        "**/*.cjs"
      ]
    }

    Automation

    package.json scripts

      "scripts": {
        "lint": "concurrently --kill-others-on-fail \"npm:lint:*\"",
        "lint:prettier": "prettier --check --loglevel=warn src",
        "lint:tsc": "tsc --noEmit",
        "lint:eslint": "eslint --ext=js,jsx,ts,tsx --max-warnings=0 src",
        "format": "prettier --write src && eslint --ext=js,jsx,ts,tsx --fix src",

    For Svelte projects add:

      "lint:svelte-check": "svelte-check --fail-on-warnings --fail-on-hints",

    This adds npm run lint to validate and npm run format to autofix where possible.

    Husky & Lint-staged

    It's recommended to add husky and lint-staged which will verify the code in a git pre-commit hook. This helps fixing linting issues before the npm run lint is run on CI.

      "lint-staged": {
        "*.(ts|tsx)": [
          "eslint --max-warnings 0 --no-ignore",
          "sh -c 'tsc -p tsconfig.json --noEmit'"
        ],
        "*.(js|cjs|mjs|jsx)": [
          "eslint --max-warnings 0 --no-ignore"
        ],
        "*.(json|scss|md)": [
          "prettier --check --loglevel=warn"
        ]
      }

    For Svelte projects add:

      "*.svelte": [
          "svelte-check --fail-on-warnings --fail-on-hints",
          "prettier --check"
        ]

    Install

    npm i eslint-config-triple

    DownloadsWeekly Downloads

    198

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    36 kB

    Total Files

    9

    Last publish

    Collaborators

    • bfanger
    • levizimmerman