@buildinams/lint
Advanced tools
BiA's base lint config(s).
Install this package with npm.
npm i -D @buildinams/lint
This package export six base ESLint, one Prettier and one base Stylelint configuration:
This is our base config for all React projects. It extends:
To use the shared eslint configuration, create an .eslintrc.json in your root project directory, and extend the config:
{
"extends": "./node_modules/@buildinams/lint/eslint/react-javascript"
}
This extends our base React config with parsing / linting support for TypeScript from @typescript-eslint/recommended.
To use, create a .eslintrc.json and extend the config:
{
"extends": "./node_modules/@buildinams/lint/eslint/react-typescript"
}
This is our base configuration for all Next.js projects. It extends:
To use, create a .eslintrc.json and extend the config:
{
"extends": "./node_modules/@buildinams/lint/eslint/next-javascript"
}
This extends our base Next config with parsing / linting support for TypeScript from @typescript-eslint/recommended.
To use, create a .eslintrc.json and extend the config:
{
"extends": "./node_modules/@buildinams/lint/eslint/next-typescript"
}
The idea behind this config is to enforce consistency across all projects. We've tried to keep the rules as minimal as possible, and for the most part simply inherit from the recommended rules of the plugins we use. The main exceptions are when it comes to the following. Note: We've purposely only defined rules that are auto fixable, these rules should make it easier to write code, and not get in the way. With one Typescript exception.
This is used to enforce that all imports are used in the file. This is used to prevent unused imports from being committed to the repo.
This is used to enforce a consistent import order. The following order has been defined:
react, next and @buildinams/)_ and ~ e.g. public/, _components and ~/contexts)../ and ./)Note: The biggest thing we enforce here is the use of prefixes (either _ or ~) for absolute imports. This is to make it clear that these are not external modules, and to make it easier to distinguish between the different modules when enforcing the import order.
This is used to auto fix some common inconsistencies. The following rules have been enabled:
Used to enforce type over interface, the difference between interface and type is minimal and the one additional feature it supports we shouldn't use.
TSEnumDeclaration - Error when using Enums, let's push for const Foo as const since it's more declarative that it outputs JS. Enums are in a weird in between state that they are both types and constants. This makes them confusing on how to use them and what the output will be.Note: The TSEnumDeclaration is our only rule that can't be auto-fixed by Eslint. This is because based on what we need the enum for the 'correct' approach might differ.
Our base prettier setup, it doesn't have any custom plugins at this point but we do modify two rules, explained below.
To use, create a .prettierrc.js in the root of your project and export the config from the package;
module.exports = require("./node_modules/@buildinams/lint/prettier");
Keeps the trailing comma around wherever possible. Advantages; less changes in Git when adding a row, more flexible when changing the order of entries in; arrays, objects and function arguments. Alternative value: "es5", we have a compile step so we can write "future" JS in our source code without worries.
Tabs over spaces, spaces have a fixed width and tabs can be whatever the developer wants it to be using a custom tabWidth value.
We enforce the use of "double quotes" when possible. We defined this with the intent of it being applied as a auto-fixable rule to enforce consistency with prettier.
This is our base config for all SCSS projects with CSS Modules. It extends:
For the most part we've tried to simply inherit rules from the above configs, but we've also added a few custom rules:
tab spacings.To use, create a .stylelintrc.json and extend the config:
{
"extends": "./node_modules/@buildinams/lint/stylelint"
}
Lastly, this config also enforces scss/function-no-unknown to prevent the use of unknown functions. As you define functions in your project, we recommend you add them to the ignoreFunctions array in the config. For example:
{
"extends": "./node_modules/@buildinams/lint/stylelint",
"rules": {
"scss/function-no-unknown": [true, { "ignoreFunctions": ["px-to-rem"] }]
}
}
This adds a level of type safety to your SCSS, and prevents developers from using functions that don't 'exist'.
Different developers have different preferences when it comes down to spacing sizes. To make sure everyone can have what they want visually, we've decided to enforce tabs over spaces. This means one developer can have tabs render as 4 spaces and another as 2 spaces without it effecting the codebase.
As you'll notice, this package doesn't contain any custom .pretterrc.json config to extend. We recommend not including it, and instead just inheriting the default config (by not creating / changing it).
To use Prettier on save, you'll need to install the following VSCode extensions:
To then enable format on save in VScode, open your workspace settings (Shift-Command-P and select Open Workspace Settings (JSON)), then paste the following into /.vscode/settings.json:
{
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
To use Stylelint on save, you'll need to install the stylelint.vscode-stylelint extension.
To then enable format on save in VScode, open your workspace settings (see above for how to open workspace settings), then paste the following into /.vscode/settings.json:
{
"editor.formatOnSave": false,
"scss.validate": false,
"stylelint.validate": ["scss"],
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit"
}
}
This library requires a minimum React version of 17.0.0.
Found an issue? Want a new feature? Get involved! Please contribute using our guideline here.
FAQs
BiA's base lint config(s).
The npm package @buildinams/lint receives a total of 35 weekly downloads. As such, @buildinams/lint popularity was classified as not popular.
We found that @buildinams/lint demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.