README
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:
- AngularJS config:
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
.eslintcache
to the .gitignore
file (auto-generated with the --cache
option)
Add 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
npm
Testing a version before publishing to "@clicktime/eslint-config": "git+ssh://git@gitlab.clicktime.com:administrators/eslint-config-clicktime.git#USE_SOME_HASH",