Askeladden eslint config

This repo contains sets of opinionated linting rules (eslint-configs) for Askeladden projects.

Installing

npx install-peerdeps --dev @askeladden/eslint-config-askeladden -x -W

Alternatively, you can manually install correct version of each package listed by:

npm info "@askeladden/eslint-config-askeladden@latest" peerDependencies

If you have a monorepo using e.g. Yarn workspaces, it's recommended to install it in the common/root folder.

Quick start

.eslintrc

From the root directory of your (mono-)repo, create a config file .eslintrc.

{
  "parser": "@typescript-eslint/parser",
  "env": { "browser": true, "node": true },
  "extends": ["@askeladden/eslint-config-askeladden"],
  "rules": {}
}

Note: the default export extended here is adapted to a React project with Typescript, formatted with Prettier. It should also work for a non-React code base. If this does not fit your project, see Slow start.

.eslintignore

You also want an ignore-file, ignoring all dist, build and node_modules folders:

**/dist/*
**/build/*
**/node-modules/*
**/__mocks__/*
**/.cache/*
**/public/*
coverage
*.css
*.json
prettier.config.js

prettier.config.js

const commonConfig = require('@askeladden/eslint-config-askeladden/prettier.config');

module.exports = commonConfig;

These files should be placed in the root directory, also for multi-workspace mono repos

package.json – recommended tasks

"lint": "eslint .",
"lint:ignore-warnings": "eslint . --quiet",
"lint:prettier-check": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
"lint:prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\""

We recommend lint:ignore-warnings and lint:prettier-check to be run on CI test tasks, to prevent PRs with errors to be merged to master. These tasks should be placed in the root directory, also for multi-workspace mono repos

wercker.yml

If we are (still) using wercker when you read this, add steps to the test job for all branches that run the following checks:

linting:
  steps:
    - script:
      name: ESLint check
      code: npm run lint:ignore-warnings
    - script:
      name: Prettier check
      code: npm run lint:prettier-check

Commit hooks

We can use husky and lint-staged to identify errors when we commit, stopping us from commiting invalid code. This will also run prettier and fix some of the errors automatically.

# Install dependencies
yarn add -D husky lint-staged

In package.json, define which tasks to be run on commit. We recommend on-commit hooks to fix and validate both eslint and prettier, which is included in the config below:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx,css}": [
    "prettier --write",
    "eslint --quiet --fix"
  ],
  "*.{json, md}": [
    "prettier --write"
  ]
},

Slow start

@askeladden/eslint-config-askeladden consists of several small sets of rules:

• javascript
• react
• typescript
• prettier

For a given project, you will probably need several of them. For example: If you want to add javascript and react and prettier to your repo, add the following to your .eslintrc config:

{
  "env": {
    "browser": true
  },
  "extends": [
    "@askeladden/eslint-config-askeladden/javascript",
    "@askeladden/eslint-config-askeladden/react",
    "@askeladden/eslint-config-askeladden/prettier"
  ]
}

Recommended sets

Instead of adding rule sets one by one, you can use one of four collections:

• @askeladden/eslint-config-askeladden/javascript
• @askeladden/eslint-config-askeladden/react-recommended
• @askeladden/eslint-config-askeladden/typescript-recommended
• @askeladden/eslint-config-askeladden/react-typescript-recommended
• @askeladden/eslint-config-askeladden/react-native-typescript-recommended

@askeladden/eslint-config-askeladden can be used as shorthand for @askeladden/eslint-config-askeladden/react-typescript-recommended.

You use collections in the same way you add rule sets: By adding them to the extends array in .eslintrc:

{
  "env": {
    "browser": true
  },
  "parser": "@typescript-eslint/parser",
  "extends": ["@askeladden/eslint-config-askeladden/react-typescript-recommended"]
}

The following is a overview of the rules each collection includes:

| | default | react-recommended | typescript-recommended | react-typescript-recommended | | ---------- | --------- | ------------------- | ------------------------ | ------------------------------ | | javascript | ✅ | ✅ | ✅ | ✅ | | prettier | ✅ | ✅ | ✅ | ✅ | | react | ✅ | ✅ | | ✅ | | typescript | ✅ | | ✅ | ✅ |

Publishing new versions

Commits are linted with with commitizen and automatically published to npm on push to master, using semantic release.

They are automatically published to NPM on push to master branch via Wercker CI.