Clicktime ESLint config utilizing Airbnb, Flow/TypeScript, Prettier, Jest, React and React Native.

Plugins and configs used:

• Default config (with React and React Native):
  • Uses the Node config
  • eslint-plugin-react
  • eslint-plugin-react-native
  • eslint-plugin-react-hooks
• Node config:
  • eslint-config-prettier
  • eslint-plugin-prettier
  • eslint-plugin-jest
  • eslint-plugin-import
  • eslint-plugin-promise
  • @typescript-eslint/eslint-plugin
    • https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage-with-airbnb
  • @typescript-eslint/parser
  • eslint-config-airbnb
    • https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
  • eslint-config-airbnb-base
  • eslint-plugin-jsx-a11y
  • eslint-plugin-babel
  • eslint-restricted-globals
• AngularJS config:
  • eslint-plugin-angular
    • Follows John Papa's Guideline

Installation

1 - Add library to package.json (devDependencies)

npm install @clicktime/eslint-config --save-dev or yarn add @clicktime/eslint-config --dev

Add commands to package.json

    "lint:js": "eslint FOLDER_TO_APPLY_ESLINT --ext .js,.ts,.tsx,.jsx --cache",
    "lint:js:fix": "eslint FOLDER_TO_APPLY_ESLINT --ext .js,.ts,.tsx,.jsx --fix",
    "lint:js:errors": "eslint FOLDER_TO_APPLY_ESLINT --ext .js,.ts,.tsx,.jsx --cache --quiet",

Note: if eslint isn't recognized try using npx eslint, eg: "lint:js": "npx eslint src --ext .js,.ts,.tsx,.jsx --cache", Note: replace FOLDER_TO_APPLY_ESLINT with your source folder, eg: src

Add .eslintcache to the .gitignore file (auto-generated with the --cache option)

2 - ESLint config

Create the file .eslintrc.js or add '@clicktime' to your current ESLint config file (eg: .eslintrc.js, .eslintrc, or eslintConfig)

React and Typescript rules

// .eslintrc.js
module.exports = {
  extends: ['@clicktime'],
  parserOptions: {
    // optional if using Typescript
    project: './tsconfig.json',
    tsconfigRootDir: './',
  },
};

NodeJS and Typescript rules

// .eslintrc.js
module.exports = {
  extends: ['@clicktime/eslint-config/node'],
  parserOptions: {
    // optional if using Typescript
    project: './tsconfig.json',
    tsconfigRootDir: './',
  },
  settings: {
    jest: { version: '99' }, // add this if jest isn't installed
  },
};

AngularJS rules

// .eslintrc.js
module.exports = {
  extends: ['@clicktime/eslint-config/angularJS']
};

3 - VSCode Setup for Prettier and ESLint

Add these extensions to VSCode so it can work well with Prettier and ESLint when saving files:

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Create the following file .editorconfig

# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
root = true

[*]
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = tab
indent_size = 2

4 - CI

Bitbucket Pipelines

Create the following file bitbucket-pipelines.yml to run the linters in Bitbucket pipelines

image: node:12

pipelines:
  default:
    - step:
        name: Install and run linter
        caches:
          - node
        script:
          - node -v
          - npm install
          - npm run lint:js
        artifacts:
          - node_modules/**

Note: image: node:12 should be the version of nodejs we are using in the repository, eg: image: node:14, image: node:latest, etc

Gitlab

Create the following file gitlab-ci.yml to run the linters in Gitlab

image: node:latest

stages:
  - linter

linter:
  stage: linter
  script:
    - npm install
    - npm run lint:js

Testing a version before publishing to npm

 "@clicktime/eslint-config": "git+ssh://git@gitlab.clicktime.com:administrators/eslint-config-clicktime.git#USE_SOME_HASH",