@feature-sliced/eslint-config
v0.1.1
Published
🍰 Lint feature-sliced concepts by existing eslint plugins
Downloads
45,767
Readme
@feature-sliced/eslint-config
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
Rules
Each rule has its own test cases and customization aspects
Get Started
You'll first need to install ESLint:
$ npm install -D eslint # or by yarn $ yarn add -D eslint
Next, install
@feature-sliced/eslint-config
and 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
Add config to the
extends
section of your.eslintrc
configuration file (for recommended rules). You can omit theeslint-config
postfix:{ "extends": ["@feature-sliced"] }
TYPESCRIPT-ONLY:
Also setup TS-parser and TS-plugin (why?)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-typescript
Configure
@typescript-eslint/parser
as parser and setup theeslint-import-resolver-typescript
resolver in the.eslintrc
config file:{ "parser": "@typescript-eslint/parser", "settings": { "import/resolver": { "typescript": { "alwaysTryTypes": true } } } }
Usage
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)
Customization
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/experimental
for 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/lite
for 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'
See also
- 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!