@armit/eslint-config-bases v0.1.5
@armit/eslint-config-bases
The composable eslint config bases that can be easily shared and fine-tuned by apps and packages for armitjs.
Features
- Customizable: Simply extends the bases and fine-tune them.
- Composable: Add only what you need. Less unwanted side effects, increase perf.
- Conventions: Plugins enabled on file conventions patterns to increase perf.
- Ease: No need to install all the plugins in consuming apps/packages.
- Monorepo: Change detection aware.
Install
yarn add --dev eslint @armit/eslint-config-bases:"workspace:^"
Tip the workspace:^ is supported by yarn and pnpm.
Usage
In your app or package, create an ./apps/my-app/.eslintrc.js
file that extends any of the
existing base configs. For example:
module.exports = {
// Be sure to set root to true in monorepo.
root: true,
// Will help typescript extended rules.
parserOptions: {
tsconfigRootDir: __dirname,
project: "tsconfig.json",
},
ignorePatterns: ["**/node_modules", "**/.cache", "build", ".next"],
extends: [
// It's better set vscode editor "source.organizeImports": false, because there may be competition between `source.organizeImports` and `import/order`
"@armit/eslint-config-bases/typescript",
"@armit/eslint-config-bases/sonar",
"@armit/eslint-config-bases/regexp",
"@armit/eslint-config-bases/react",
"@armit/eslint-config-bases/jest",
"@armit/eslint-config-bases/rtl",
"@armit/eslint-config-bases/graphql-schema",
"@armit/eslint-config-bases/storybook",
"@armit/eslint-config-bases/playwright",
// Add specific rules for your framework if needed.
// ie:
// - nextjs: 'plugin:@next/next/core-web-vitals',
// - remix: '@remix-run/eslint-config',
// ...
// Post configure the prettier base so there won't be
// any conficts between eslint / prettier
"@armit/eslint-config-bases/prettier",
],
rules: {
// Specific global rules for your app or package
},
overrides: [
// Specific file rules for your app or package
],
};
Tip: "@armit/eslint-config-bases/prettier" must be set at the end to disable any conflicting rules.
Bases
You can find the bases in ./src/bases.
Base | Match convention | Scope |
---|---|---|
typescript | all | Naming conventions, consistent imports, import sorting... |
sonar | *.{js,jsx,ts,tsx} | Keep levels of code complexity sane. (excl test and stories) |
regexp | *.{js,jsx,jsx,tsx} | Keep regexp consistent and safer. |
react | *.{jsx,tsx} | Recommendations for react, react-hooks and jsx projects. |
jest | **/?(*.)+(test).{js,jsx,ts,tsx} | Catch inconsistencies or error in jest tests. |
vitest | **/?(*.)+(test).{js,jsx,ts,tsx} | Catch inconsistencies or error in vitest tests. |
rtl | **/?(*.)+(test).{js,jsx,ts,tsx} | Potential errors / deprecations in react-testing-library tests. |
graphql-schema | *.graphql | Ensure validity of graphql schema files. |
storybook | *.stories.{ts,tsx,mdx} | Potential errors / deprecations in stories. |
playwright | **/e2e/**/*.test.{js,ts} | Post configure eslint for prettier compatibility. |
prettier | all | Post configure eslint for prettier compatibility. |
Notes:
The order is important. Some bases will disable or tune previously defined rules. For example the react base will tune the naming conventions for function components and increase recommended cognitive complexity. The typescript base will also relax conventions for javascript files.
Based on filename conventions some rules are relaxed or disabled to avoid false positives and keep a good level of performance. For example the sonar base won't run on test and storybook files. If you work on different conventions the patterns must be updated.
Prettier integration
To prevent conflicts between prettier and eslint, you must re-export the prettier base from @armit/eslint-config-bases
.
const { getPrettierConfig } = require("@armit/eslint-config-bases/helpers");
module.exports = {
...prettierConfig,
overrides: [
{
// optional overrides per project file match
files: ["**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
rules: {
"@typescript-eslint/naming-convention": "off",
},
},
],
};
Tip: You can tune the provided prettier.base.config for your own needs.
Notes
Typescript
Generic typescript project, mostly based on
Type/Plugin | Comment |
---|---|
eslint:recommended | The basics for code linting. |
@typescript-eslint/recommended | The basics for typescript. |
@typescript-eslint/consistent-type | Use TS 3.8+ imports/exports, helps with esbuild |
@typescript-eslint/naming-convention | |
eslint-plugin-import | Order imports |
Sonarjs
Type/Plugin | Comment |
---|---|
eslint-plugin-sonarjs/recommended | Help to keep complexity sane |
React
Type/Plugin | Comment |
---|---|
eslint-plugin-react/recommended | |
eslint-plugin-react-hooks/recommended | |
eslint-plugin-jsx-a11y/recommended | Helps to produce accessibility-ready jsx |
Jest
Type/Plugin | Comment |
---|---|
eslint-plugin-jest/recommended | Jest recommended practices. |
Vitest
Type/Plugin | Comment |
---|---|
vitest | Vitest recommended practices. |
React Testing Library
Type/Plugin | Comment |
---|---|
eslint-plugin-testing-library/recommended | Ease when using react-testing-library |
Regexp
Type/Plugin | Comment |
---|---|
eslint-plugin-regexp/recommended |
Etc
...
1 month ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago