Table of Contents
Getting started
This package provides QuintoAndar's custom eslint rules, that are created by our engineers' demand.
All these rules are accessible in the eslint config that is plugged in. For example, the package eslint-config-quintoandar-pwa
uses it as a plugin.
These custom rules can be used in two ways:
- use directly, applying to everybody
- use new custom rule progressively
How to add in a project as an eslint plugin
Install
npm install --save-dev eslint-plugin-quintoandar
Usage
"plugins": [
"quintoandar"
],
or
"plugins": [
"eslint-plugin-quintoandar"
],
Rules
No dynamic import index
Do not allow dynamically importing index
files i.e. import('./index')
, import('../index')
. This rule was created because if multiple react-loadable components used the same path in the import()
call, it would cause problems during chunk resolution and a page would load more JS chunks than necessary. Since most of the problems arose with multiple files named 'index', this rules suggests to rename them with a more specific name.
How to use it
Just add the code below in your rules array:
"quintoandar/no-dynamic-import-index": 2,
No target blank
Do not allow the usage of target="_blank"
without rel="noopener noreferrer
because of a security problem.
How to use it
Just add the code below in your rules array:
"quintoandar/no-target-blank": 2,
No typo components
Create a new custom rule is also a way to move from the deprecated approach to new one. This rule does exactly this, enforce to do not use any component from the file called Typo
.
How to use it
Just add the code below in your rules array:
"quintoandar/no-typo-components": 2,
No Block-Party colors
Don't allow usage of Block-party colors.
Use withTheme instead (see: https://material-ui.com/css-in-js/api/#withtheme-component-component)\
Make sure to follow the guidelines to fix it (see: https://github.com/quintoandar/guidelines/blob/master/pwa/styling.md#theme).
How to use it
Just add the code below in your rules array:
"quintoandar/no-block-party-colors": 2,
No rgba colors
Don't allow usage of hardcoded rgba colors.
Use colorToRgbString instead with color and opacity. Like:
colorToRgbString(themeColor, 0.5)
How to use it
Just add the code below in your rules array:
"quintoandar/no-rgba-colors": 2,
No theme import
Do not import theme directly. (except for test files).
Use withTheme instead (see: https://material-ui.com/css-in-js/api/#withtheme-component-component)
How to use it
Just add the code below in your rules array:
"quintoandar/no-theme-import": 2,
No cozy theme import
Do not import cozy theme. Replace it with one of the cozy tokens.
How to use it
Just add the code below in your rules array:
"quintoandar/no-cozy-theme-import": 2,
No theme usage
Do not use theme.palette, theme.spacing, theme.elevations or theme.shape. Replace it with one of the cozy tokens.
How to use it
Just add the code below in your rules array:
"quintoandar/no-theme-usage": 2,
No variables on message id
The variable 'id' must be defined and should be a literal. This prevent us from generating messages with static code analysis.
See more: https://guidelines.quintoandar.com.br/#/pwa/internationalization
id
as an object name otherwise some lint errors may occur.
How to use it
Just add the code below in your rules array:
"quintoandar/no-var-message-id": 2,
No ThemeProvider import
Do not use ThemeProvider in components. (except for app.js)
Use withTheme instead (see: https://material-ui.com/css-in-js/api/#withtheme-component-component)
How to use it
Just add the code below in your rules array:
"quintoandar/no-themeprovider-import": 2,
No npm registry
Do not allow package-lock.json
to contain resolved
references pointed out to registry.npmjs.org
.
Why
.npmrc
file in node or pwa projects points to resolve references from nexus
registry.
Whenever using npm-cli outside our network or Nexus could not provide packages, package-lock.json
may change his resolved
s keys to point directly to npm's registry.
As described in documentation, npm-cli tries to fetch from resolved
first:
The presence of a package lock changes the installation behavior such that:
The module tree described by the package lock is reproduced. This means reproducing the structure described in the file, using the specific files referenced in “resolved” if available, falling back to normal package resolution using “version” if one isn’t.
The tree is walked and any missing dependencies are installed in the usual fashion.
Workarounds
In order to fix "automatically" package-lock.json
, we usually try some of this steps:
- Revert
package-lock.json
changes and runnpm intall
again - Remove
node_modules
folder and repeat step 1 - As a last resort (not recommended), manually replace urls
How to use it
Just add the code below in your rules array (preferable to a progressive-lint config):
"quintoandar/no-npm-registry": 2,
No Block-Party Login import
Don't allow usage of Block-party Login container. Use Biomas's Auth package instead (see: see: https://github.com/quintoandar/bioma/tree/master/packages/auth).
How to use it
Just add the code below in your rules array:
"quintoandar/no-block-party-login-import": 2,
No Block-Party WaffleMenu import
Don't allow usage of Block-party WaffleMenu containers and components. Use Biomas's waffle-menu package instead (see: see: https://github.com/quintoandar/bioma/tree/master/packages/waffle-menu).
How to use it
Just add the code below in your rules array:
"quintoandar/no-block-party-waffle-menu-import": 2,
QuintoAndar custom import order
Enforces the following custom import order:
1 - react
import;
2 - external libs imports;
3 - @quintoandar
imports;
4 - projects absolute imports;
5 - projects relative imports;
Why
This rule aims in the direction of standardizing our code style. Beyond that it makes easier to find the imports.
How to use it
Just add the code below in your rules array:
"quintoandar/quintoandar-import-order": 2,
Options
projectAbsolutePaths
With the projectAbsolutePaths
option you can pass extra paths to be evaluated as absolute paths from the project. You can use it adding the following to your rules array:
'quintoandar/quintoandar-import-order': [
2,
{
projectAbsolutePaths: ['experiments/'],
},
],
With the above configuration, all imports from experiments
will be considered internal imports from the project:
// Start with external libs
import something from 'external-lib/something-a';
import anotherThing from 'external-lib/something-b';
// Then projects absolute imports
import SomeInternalComponent from 'components/SomeComponent';
import SomeInternalContainer from 'containers/SomeContainer';
import SomeExperiment from 'experiments/someExperiment';
import someInternalHelper from 'helpers/someHelper';
import someInternalUtil from 'utils/someUtil';
You can pass the override
option too:
'quintoandar/quintoandar-import-order': [
2,
{
override: true,
projectAbsolutePaths: ['components', 'containers', 'experiments/'],
},
],
This way the default absolute paths (components/
, containers/
, helpers/
or utils/
) are overwritten. So the code above would not valid anymore, but the following would be:
// Start with external libs
import something from 'external-lib/something-a';
import anotherThing from 'external-lib/something-b';
import someInternalHelper from 'helpers/someHelper';
import someInternalUtil from 'utils/someUtil';
// Then projects absolute imports
import SomeInternalComponent from 'components/SomeComponent';
import SomeInternalContainer from 'containers/SomeContainer';
import SomeExperiment from 'experiments/someExperiment';
Versioning
We use SemVer for versioning. For the versions available, see the CHANGELOG.md
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
How to write a new custom rule
Just go to /rules
folder, create a new file and export as default one function receiving context
and write the condition.
module.exports = function(context) {
return {
....
context.report({ /*... something */ })
}
}
In order to make it easy, there're two interesting tools:
- Eslint rules generator
- AST explorer to help verify how to get what you need;
Plus: Always to remember to update this readme and create unit tests when adding a new custom rule.
Reference: https://medium.com/@btegelund/creating-an-eslint-plugin-87f1cb42767f