Skip to content
This repository has been archived by the owner on Oct 28, 2024. It is now read-only.
/ tslint-config Public archive

TSLint configuration based on Airbnb's styleguide

License

Notifications You must be signed in to change notification settings

smartive/tslint-config

Repository files navigation

TSLint configuration provided by smartive

The rules in this package are based on TSLint Config Airbnb (also see Airbnb JavaScript Style Guide) and modified to fit our company's coding guidelines.

Rule extensions

Line length (max-line-length)

The maximum line length got extended to 125 characters in order to match TypeScript's demand of longer lines due to type declarations.

Member ordering (member-ordering)

Added a requirement for a meaningful ordering of class members (fields-first).

Ordered Imports

Requires that import statements be alphabetized and grouped.

Enable increment / decrement statements (no-increment-decrement)

Re-enabled incremenent (++) and decrements (--) operations to get rid of unwanted and unreadeable workarounds.

Check return type of functions (typedef)

Added call-signature rule to enforce return type definitions for functions.

Allow variables with leading underscores (variable-name)

Due to the fact that in some cases you need underscores as variable prefixes (unused variables as function parameters, private properties with getter / setter, ..) leading underscores got enabled.

Allow Boolean Literal Compare

Allows comparing boolean literal to values, like if (x === true). This rule apparently exists to prevent confusion for new developers, but can become relevant if x can be true | false | null.

This rule only works if Type Information / Checking is available.

No Strict Boolean Expressions

With strict-boolean-expressions only boolean values can be used with !, &&, ||, ternary operators, if conditions and loops. JavaScript allows quite a few neat shorthand expressions with non-boolean value, which we don't want to prohibit.

This rule only works if Type Information / Checking is available.

Member Access

Force the user to add public, protected and private information to the members of a class. This leads to better readability (despite the default of public).

Trailing Comma

Actually, the rule is set to the default value of multiline: always and singleline: never. But the additional field is set to prevent trailing commas after rest parameters (esSpecCompliant):

function withComma(
  p1: string,
  p2: string,
) {}

function withoutComma(
  p1: string,
  ...rest: string[]
) {}

The comma after a rest parameter will get a typescript compiler warning.

Usage

Install using NPM:

npm install --save-dev @smartive/tslint-config

To activate the rules, add the following extends declaration to your TSLint configuration (e.g. tslint.json):

{
   "extends": "@smartive/tslint-config",
   "rules": {
     ... // additional custom rules
   }
}

Usage with React

Install the config the same way as above, but activate the rules in your TSLint configuration like this:

{
  "extends": "@smartive/tslint-config/tslint-react",
   "rules": {
     ... // additional custom rules
   }
}

React Rule Extensions

Allow variables in PascalCase

React components are usually named in PascalCase, so this should be explicitly allowed - especially when used with Higher Order Components like const ButtonWithSpinner = withSpinner(Button);.

Allow JSX Boolean Value

The developer should be allowed to declare boolean props in appropriate ways. Values should be skipped if reasonable (<Button primary />). Also the ability to calculate values dynamically (<Button active={isActive} /> which might result in active={true}) should be possible.

Allow Multiline JSX

Multiline JSX expressions are allowed for things like map calls. jsx-no-multiline-js is too intrusive and we trust other tools, like Code Reviews, to prevent an increase in unreadable code.

Import Name

Sometimes filenames are not very meaningful and developers should be allowed to change default import statements, as they have the same possibility with aliases for named imports (import { Foo as Bar } from 'foo';).

JSX No Lambda

Since there are very little performance impacts on lambda expressions in jsx, we decided to allow lambdas in jsx props.

Function Name

If you use default exports, you can name your exported function with a capital letter. This leads to a better understanding of several IDE tools. export default function Link() ...

Release notes

The release notes can be found in the release section.