eslint-plugin-quintoandar
Advanced tools
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:
npm install --save-dev eslint-plugin-quintoandar
"plugins": [
"quintoandar"
],
or
"plugins": [
"eslint-plugin-quintoandar"
],
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.
Just add the code below in your rules array:
"quintoandar/no-dynamic-import-index": 2,
Do not allow the usage of target="_blank" without rel="noopener noreferrer because of a security problem.
Just add the code below in your rules array:
"quintoandar/no-target-blank": 2,
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.
Just add the code below in your rules array:
"quintoandar/no-typo-components": 2,
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).
Just add the code below in your rules array:
"quintoandar/no-block-party-colors": 2,
Don't allow usage of hardcoded rgba colors.
Use colorToRgbString instead with color and opacity. Like:
colorToRgbString(themeColor, 0.5)
Just add the code below in your rules array:
"quintoandar/no-rgba-colors": 2,
Do not import theme directly. (except for test files).
Use withTheme instead (see: https://material-ui.com/css-in-js/api/#withtheme-component-component)
Just add the code below in your rules array:
"quintoandar/no-theme-import": 2,
Do not import cozy theme. Replace it with one of the cozy tokens.
Just add the code below in your rules array:
"quintoandar/no-cozy-theme-import": 2,
Do not use theme.palette, theme.spacing, theme.elevations or theme.shape. Replace it with one of the cozy tokens.
Just add the code below in your rules array:
"quintoandar/no-theme-usage": 2,
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
:warning: Do not use id as an object name otherwise some lint errors may occur.
Just add the code below in your rules array:
"quintoandar/no-var-message-id": 2,
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)
Just add the code below in your rules array:
"quintoandar/no-themeprovider-import": 2,
Do not allow package-lock.json to contain resolved references pointed out to registry.npmjs.org.
.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 resolveds 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.
In order to fix "automatically" package-lock.json, we usually try some of this steps:
package-lock.json changes and run npm intall againnode_modules folder and repeat step 1Just add the code below in your rules array (preferable to a progressive-lint config):
"quintoandar/no-npm-registry": 2,
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).
Just add the code below in your rules array:
"quintoandar/no-block-party-login-import": 2,
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).
Just add the code below in your rules array:
"quintoandar/no-block-party-waffle-menu-import": 2,
Enforces the following custom import order:
1 - react import;
2 - external libs imports;
3 - @quintoandar imports;
4 - projects absolute imports;
5 - projects relative imports;
This rule aims in the direction of standardizing our code style. Beyond that it makes easier to find the imports.
Just add the code below in your rules array:
"quintoandar/quintoandar-import-order": 2,
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';
We use SemVer for versioning. For the versions available, see the CHANGELOG.md
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
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:
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
FAQs
An eslint-plugin for PWA-Tenants custom rules
The npm package eslint-plugin-quintoandar receives a total of 42 weekly downloads. As such, eslint-plugin-quintoandar popularity was classified as not popular.
We found that eslint-plugin-quintoandar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.