tslint-misc-rules
v3.6.0
Published
Collection of miscellaneous TSLint rules
Downloads
2,878
Maintainers
Readme
misc-tslint-rules
Collection of miscellaneous TSLint rules
$ npm install tslint-misc-rules --save-dev
- Add the path to it to your tslint.json and add some rules:
{
"rules": {
"sort-imports": true
},
"rulesDirectory": [
"tslint-misc-rules"
]
}
Rules
- sort-imports [has autofix]
- prefer-es6-imports
- class-method-newlines [has autofix]
- jsx-attribute-spacing [has autofix]
- jsx-expression-spacing [has autofix]
- jsx-no-closing-bracket-newline [has autofix]
- jsx-no-braces-for-string-attributes [has autofix]
- react-lifecycle-order
- prefer-or-operator-over-ternary [has autofix]
- no-property-initializers
- camel-case-local-function
- declare-class-methods-after-use
- no-braces-for-single-line-arrow-functions [has autofix]
- no-unnecessary-parens-for-arrow-function-arguments
"sort-imports" ↑
Fails:
import b from "b";
import a from "a";
Passes:
import a from "a";
import b from "b";
Blocks are grouped, so this also passes:
import a from "a";
import z from "z";
testSetup();
import c from "c";
import d from "d";
Precedence is essentially *
, {
, then alpha, so:
import * as a from "a";
import { b, c } from "bc";
import d from "d";
This rule has one option, whitespace-insensitive
, that collapses all whitespace spans (including line breaks) down to one space when sorting. This provides compatibility with formatters like Prettier, which may decide to turn a single-line import into a multi-line import when it grows too long. This could otherwise introduce a lint failure. Ex:
"sort-imports": [ true, "whitespace-insensitive" ]
Fails:
import {
x,
y,
} from "xy";
import { a } from "a";
Passes:
import { a } from "a";
import {
x,
y,
} from "xy";
"prefer-es6-imports" ↑
With configuration (required):
{
"prefer-es6-imports": [
true,
"module-name"
]
}
Fails:
import mod = require("module-name");
import mod = require("path/to/module-name");
import mod = require("../module-name");
"class-method-newlines" ↑
Ensure each method in class is preceded by a newline.
Fails:
class foo {
propertyOne: any;
propertyTwo: any;
one() {
}
two() {
}
}
Passes:
class foo {
propertyOne: any;
propertyTwo: any;
one() {
}
two() {
}
}
The first method is exempt, so this also passes:
class foo {
one() {
}
two() {
}
}
"jsx-attribute-spacing" ↑
Fails:
<div prop = { value }/>
<div prop= { value }/>
<div prop ={ value }/>
Passes:
<div prop={ value }/>
"jsx-expression-spacing" ↑
Fails:
<div prop={value}/>
<div prop={ value}/>
<div prop={value }/>
<div>
{value}
{ value}
{value }
</div>
Passes:
<div prop={ value }/>
<div>
{ value }
</div>
"jsx-no-closing-bracket-newline" ↑
Fails:
<a className="asdf"
href="/foo"
/>
<div
className="qwer"
name="asdf"
>
text
</div>
Passes:
<a className="asdf"
href="/foo" />
<div
className="qwer"
name="asdf">
text
</div>
"jsx-no-braces-for-string-attributes" ↑
Fails:
<div prop={ "value" }/>
Passes:
<div prop="value"/>
"react-lifecycle-order" ↑
With configuration (optional):
{
"react-lifecycle-order": [
true,
"componentWillMount",
"render",
"componentWillUnmount"
]
}
Fails:
class extends React.Component {
componentWillMount() {
}
componentWillUnmount() {
}
render() {
}
}
Passes:
class extends React.Component {
componentWillMount() {
}
render() {
}
componentWillUnmount() {
}
}
If configuration is not specified, React's invocation order is used.
"prefer-or-operator-over-ternary" ↑
Fails:
const maybeFoo = foo ? foo : bar;
Passes:
const maybeFoo = foo || bar;
"no-property-initializers" ↑
Fails:
class foo {
bar = 42;
}
Passes:
class foo {
bar: number;
}
"camel-case-local-functions" ↑
Due to React's Stateless Functional Components, this rule checks callsites rather than declarations.
Fails:
import FooImport from 'foo';
function FooDeclaration() { }
FooImport();
FooDeclaration();
Passes:
import fooImport from 'foo';
function fooDeclaration() { }
function SomeSFC(props) { return null; }
fooImport();
fooDeclaration();
const el = </SomeSFC>;
"declare-class-methods-after-use" ↑
Fails:
class foo {
bar() {
}
foo() {
this.bar();
}
}
Passes:
class foo {
foo() {
this.bar();
}
bar() {
}
}
"no-braces-for-single-line-arrow-functions" ↑
Fails:
const add = (x, y) => { return x + y };
const btn = <button onClick={ e => { console.log(e); } } />;
Passes:
const add = (x, y) => x + y;
const btn = <button onClick={ e => console.log(e) } />;
"no-unnecessary-parens-for-arrow-function-arguments" ↑
Fails:
const log = (x) => console.log(x);
Passes:
const log = x => console.log(x);