WIP:At the moment at beta-testing - use carefully
Linting of FeatureSliced concepts by existing eslint-plugins
- Control Isolation & Decomposition
- Control Public API
- Control Layers & Scopes
- Control Naming
Each rule has its own test cases and customization aspects
-
You'll first need to install ESLint:
$ npm install -D eslint # or by yarn $ yarn add -D eslint $ or by pnpm $ pnpm add -D eslint -
Next, install
@feature-sliced/eslint-configand dependencies:$ npm install -D @feature-sliced/eslint-config eslint-plugin-import eslint-plugin-boundaries # or by yarn $ yarn add -D @feature-sliced/eslint-config eslint-plugin-import eslint-plugin-boundaries # or by pnpm $ pnpm add -D @feature-sliced/eslint-config eslint-plugin-import eslint-plugin-boundaries
-
Add config to the
extendssection of your.eslintrcconfiguration file (for recommended rules). You can omit theeslint-configpostfix:{ "extends": ["@feature-sliced"] } -
TYPESCRIPT-ONLY:Also setup TS-parser and TS-plugin (why?)Details
Install dependencies:
$ npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript # or by yarn $ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescriptConfigure
@typescript-eslint/parseras parser and setup theeslint-import-resolver-typescriptresolver in the.eslintrcconfig file:{ "parser": "@typescript-eslint/parser", "settings": { "import/resolver": { "typescript": { "alwaysTryTypes": true } } } }
-
Support general aliases
import { Input } from "~/shared/ui/input"; import { Input } from "@/shared/ui/input"; import { Input } from "@shared/ui/input"; import { Input } from "$shared/ui/input"; // But not - import { Input } from "$UIKit/input";
-
Support relative and absolute imports (but look at recommendations)
import { ... } from "entities/foo"; // absolute imports import { ... } from "@/entities/foo"; // aliased imports import { ... } from "../entities/foo"; // relative imports
-
Case-agnostic
import { ... } from "entities/user-post"; // Support kebab-case (recommended) import { ... } from "entities/UserPost"; // Support PascalCase import { ... } from "entities/userPost"; // Support camelCase import { ... } from "entities/user_post"; // Support snake_case
-
For exceptional cases, support
⚠️ DANGEROUS-mode⚠️ (see more for specific rule)
-
You can partially use the rules
WARN: Don't use main config (
"@feature-sliced") in customization to avoid rules conflicts."extends": [ "@feature-sliced/eslint-config/rules/import-order", "@feature-sliced/eslint-config/rules/public-api", "@feature-sliced/eslint-config/rules/layers-slices", ]
-
You can use alternative experimental rules
-
Use
import-order/experimentalfor formatting with spaces between groups and reversed order of layers (why?)"extends": [ // ... Other rules or config "@feature-sliced/eslint-config/rules/import-order/experimental", ]
-
Use
public-api/litefor less strict PublicAPI boundaries (why?)"extends": [ // ... Other rules or config "@feature-sliced/eslint-config/rules/public-api/lite", ]
-
-
You can use warnings instead of errors for specific rules
"rules": { // feature-sliced/import-order "import/order": "warn" // ~ 1, // feature-sliced/public-api "import/no-internal-modules": "warn" // ~ 1, // feature-sliced/layers-slices "boundaries/element-types": "warn" // ~ 1, }
-
You can use advanced FSD-specific messages processing
# (feature-sliced/public-api) - 'Reaching to "features/search/ui" is not allowed.' + 'Violated usage of modules Public API | https://git.io/Jymjf'
- FAQ
- Releases & Changelog
- How can I help?
- ⭐ Rate us on GitHub
- 💫 Any assistance is important - from feedback to participation in the development of the methodology!