Linting and prettifying Frontend(React) with ESLint on Husky and backend(Python) with PyLint on pre-commit.
As our project was advancing we realized the need to enforce a common set of guidelines and practices throughout our team. Today I’ll show to my readers how to make the life of their colleges a little bit harder (but only at the beginning hehe:p).
Configuring frontend(React) linting.
In order to do the frontend linting we need to install the following packages:
npm install eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react husky --save-dev
This command will install the essential packages to lint our modified files on every commit.
Then we need to add a couple of configs to our package.json file:
"lint-staged": {
// here we are telling to lint js and jsx extensions
"*.js|*.jsx": [
// this will lint and reformat(prettify) the code
"eslint --fix"
]
},
// setting up pre-commit hook
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
and create .prettierrc.js file with our guidelines for prettify:
// feel free to read the docs and configure according to your needs
module.exports = {
"printWidth": 120,
"singleQuote": true,
"trailingComma": "all"
}
and create .eslintrc.js file with our rules for eslint:
module.exports = {
// setting up plugins
extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
// environment
env: {
browser: true,
commonjs: true,
es6: true,
jest: true,
node: true,
},
// here you can set and disable particular rules
rules: {
'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx'] }],
'max-len': [
'warn',
{
code: 120,
tabWidth: 2,
comments: 120,
ignoreComments: false,
ignoreTrailingComments: true,
ignoreUrls: true,
ignoreStrings: true,
ignoreTemplateLiterals: true,
ignoreRegExpLiterals: true,
},
],
},
settings: {
// setting up the source folder
'import/resolver': {
node: {
paths: ['src'],
},
},
},
};
That’s it! Now your frontend will be linted each time you are committing something.
Configuring backend(Python) linting.
First of all we need to create .pre-commit-config.yaml file:
default_language_version:
python: python3.8
repos:
- repo: https://github.com/ambv/black
rev: stable
hooks:
- id: black
# Allowed line length 120
args: ['--skip-string-normalization', '--line-length=120']
- repo: https://gitlab.com/pycqa/flake8
rev: 3.8.3
hooks:
- id: flake8
- repo: https://github.com/pre-commit/mirrors-mypy
rev: v0.740
hooks:
- id: mypy
- repo: https://github.com/pre-commit/mirrors-pylint
rev: v2.3.1
hooks:
- id: pylint
An then .pylintrc:
[MESSAGES CONTROL]
disable= #here you can disable rules
[FORMAT]
max-line-length=120
And setup.cfg:
[flake8]
max-line-length = 120
Next step is to run
pip3 install pre-commit && pre-commit install
The final step is to rename:
"hooks": {
"pre-commit": "lint-staged"
}
to:
"hooks": {
"pre-commit.legacy": "lint-staged"
}
in your package.json.
The creator of pre-commit helped me with clarification here.
Now you are good to calibrate it further to meet your needs.
Cheers!