Comprehensive linting rules for Flow type annotations in JavaScript projects.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Rules that enforce consistent formatting and style for Flow type annotations, including spacing, delimiters, and code organization.
Controls spacing around type annotations, colons, and generic brackets.
const rules = {
'space-before-type-colon': ESLintRule,
'space-after-type-colon': ESLintRule,
'space-before-generic-bracket': ESLintRule,
'generic-spacing': ESLintRule,
'union-intersection-spacing': ESLintRule
};
// Configuration options
type SpacingOption = 'always' | 'never';Usage Examples:
// space-before-type-colon with 'never' option
// ✓ Good
function getName(user: User): string {}
// ✗ Bad
function getName(user : User): string {}
// space-after-type-colon with 'always' option
// ✓ Good
function getName(user: User): string {}
// ✗ Bad
function getName(user:User): string {}
// space-before-generic-bracket with 'never' option
// ✓ Good
type List<T> = Array<T>;
// ✗ Bad
type List <T> = Array<T>;
// union-intersection-spacing with 'always' option
// ✓ Good
type StringOrNumber = string | number;
type Combined = TypeA & TypeB;
// ✗ Bad
type StringOrNumber = string|number;
type Combined = TypeA&TypeB;Controls formatting within object type definitions including spacing and delimiters.
const rules = {
'object-type-curly-spacing': ESLintRule,
'object-type-delimiter': ESLintRule,
'delimiter-dangle': ESLintRule
};
// Configuration options
interface ObjectSpacingOptions {
arraysInObjects?: boolean;
objectsInObjects?: boolean;
}
type DelimiterOption = 'comma' | 'semicolon' | 'none';
type DangleOption = 'always' | 'always-multiline' | 'never';Usage Examples:
// object-type-curly-spacing with 'never' option
// ✓ Good
type User = {name: string, age: number};
// ✗ Bad
type User = { name: string, age: number };
// object-type-delimiter with 'comma' option
// ✓ Good
type User = {
name: string,
age: number,
};
// ✗ Bad
type User = {
name: string;
age: number;
};
// delimiter-dangle with 'always-multiline' option
// ✓ Good - multiline requires trailing comma
type User = {
name: string,
age: number,
};
// ✓ Good - single line no trailing comma
type Point = {x: number, y: number};Controls the style of boolean and primitive type annotations.
const rules = {
'boolean-style': ESLintRule,
'quotes': ESLintRule
};
// Configuration options
type BooleanStyleOption = 'boolean' | 'bool';
type QuoteOption = 'single' | 'double';Usage Examples:
// boolean-style with 'boolean' option
// ✓ Good
type IsActive = boolean;
// ✗ Bad
type IsActive = bool;
// quotes with 'single' option
// ✓ Good
type Status = 'active' | 'inactive';
// ✗ Bad
type Status = "active" | "inactive";Controls semicolon usage in type definitions and related punctuation.
const rules = {
semi: ESLintRule
};
// Configuration options
type SemiOption = 'always' | 'never';Usage Examples:
// semi with 'always' option
// ✓ Good
type User = {name: string};
declare var user: User;
// ✗ Bad
type User = {name: string}
declare var user: UserControls parentheses around arrow function parameters when they have type annotations.
const rules = {
'arrow-parens': ESLintRule
};
// Configuration options
type ArrowParensOption = 'always' | 'as-needed';Usage Examples:
// arrow-parens with 'always' option
// ✓ Good
const process = (user: User) => user.name;
const getId = (id: number) => id;
// ✗ Bad
const process = user: User => user.name;
const getId = id: number => id;
// arrow-parens with 'as-needed' option
// ✓ Good - parentheses needed for type annotation
const process = (user: User) => user.name;
// ✓ Good - no parentheses needed for simple parameter
const simple = x => x * 2;Controls line breaks and organization of type annotations.
const rules = {
'enforce-line-break': ESLintRule,
'newline-after-flow-annotation': ESLintRule
};Usage Examples:
// enforce-line-break
// ✓ Good - line break enforced for long type annotations
type ComplexFunction = (
param1: string,
param2: number,
param3: boolean
) => string;
// ✗ Bad - should break long type annotation
type ComplexFunction = (param1: string, param2: number, param3: boolean) => string;
// newline-after-flow-annotation
// ✓ Good
// @flow
import type {User} from './types';
// ✗ Bad - no newline after @flow
// @flow
import type {User} from './types';Controls the style of Flow type imports.
const rules = {
'type-import-style': ESLintRule
};
// Configuration options
type ImportStyleOption = 'declaration' | 'identifier';Usage Examples:
// type-import-style with 'declaration' option
// ✓ Good
import type {User, Product} from './types';
// ✗ Bad
import {type User, type Product} from './types';
// type-import-style with 'identifier' option
// ✓ Good
import {type User, type Product} from './types';
// ✗ Bad
import type {User, Product} from './types';Controls sorting of keys and type members for consistent organization.
const rules = {
'sort-keys': ESLintRule,
'sort-type-union-intersection-members': ESLintRule
};
// Configuration options
interface SortKeysOptions {
caseSensitive?: boolean;
natural?: boolean;
requiredFirst?: boolean;
}Usage Examples:
// sort-keys with natural sorting
// ✓ Good
type User = {
age: number,
id: number,
name: string,
};
// ✗ Bad - keys not sorted
type User = {
name: string,
id: number,
age: number,
};
// sort-type-union-intersection-members
// ✓ Good - alphabetical order
type StringOrNumber = number | string;
// ✗ Bad - not sorted
type StringOrNumber = string | number;interface SpacingRule extends ESLintRule {
create: (context: ESLintContext) => {
[key: string]: (node: ASTNode) => void;
};
}
interface FormattingOptions {
spacing?: SpacingOption;
delimiter?: DelimiterOption;
quotes?: QuoteOption;
semicolon?: SemiOption;
}
interface ASTNode {
type: string;
range: [number, number];
loc: SourceLocation;
parent?: ASTNode;
raw?: string;
}