Linting and prettifying Frontend(React) with ESLint on Husky and backend(Python) with PyLint on pre-commit.

Aleksandr Zakharov
2 min readOct 22, 2020

--

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!

--

--

Aleksandr Zakharov
Aleksandr Zakharov

Responses (1)