@vincent0119/eslint-config-typescript

npm install --save-dev @h3/eslint-config-typescript

Usage no npm install needed!

<script type="module">
  import vincent0119EslintConfigTypescript from 'https://cdn.skypack.dev/@vincent0119/eslint-config-typescript';
</script>

README

[#### Typescript-eslint 的所有规则

安装

npm install --save-dev @h3/eslint-config-typescript

规则

@typescript-eslint/array-type

规则

'@typescript-eslint/array-type'                    : ['error', {
  default: 'array-simple',
  readonly: 'array-simple'
}],

介绍

对于简单类型（即仅仅是原始名称或类型引用的类型），请使用T []或只读T []。

对于所有其他类型（联合类型，交集类型，对象类型，函数类型等），请使用Array <T>或ReadonlyArray <T>。

Code Demo

// Incorrect
const a: (string | number)[] = ['a', 'b'];
const b: ({ prop: string })[] = [{ prop: 'a' }];
const c: (() => void)[] = [() => {}];
const d: Array<MyType> = ['a', 'b'];
const e: Array<string> = ['a', 'b'];
const f: ReadonlyArray<string> = ['a', 'b'];

// Correct
const a: Array<string | number> = ['a', 'b'];
const b: Array<{ prop: string }> = [{ prop: 'a' }];
const c: Array<() => void> = [() => {}];
const d: MyType[] = ['a', 'b'];
const e: string[] = ['a', 'b'];
const f: readonly string[] = ['a', 'b'];

@typescript-eslint/consistent-type-definitions

规则

// type 和 interface 都支持
'@typescript-eslint/consistent-type-definitions'   : 'off',

介绍

就是同时支持 typescript 的type和interface来声明字段类型

Code Demo

// Correct
// type alias
type T1 = {
  a: string,
  b: number,
};

// Correct
// interface keyword
interface T2 {
  a: string;
  b: number;
}

@typescript-eslint/explicit-function-return-type

规则

// 不强制函数返回类型有声明
'@typescript-eslint/explicit-function-return-type' : 'off',

介绍

不用显性的声明函数的返回值类型，这个版本不强制

Code Demo

// 当前这样是支持的，不然得 void这样来显性返回值的类型
function test() {
  return;
}

@typescript-eslint/explicit-member-accessibility

规则

'@typescript-eslint/explicit-member-accessibility' : ['error', { accessibility: 'no-public' }],

介绍

开放成员或者构造函数不需要强制声明 Public

Code Demo

// 理想化的
class Animal {
  public constructor(public breed, name) {
    // Parameter property and constructor
    this.animalName = name;
  }
  public animalName: string; // Property
  public get name(): string {
    // get accessor
    return this.animalName;
  }
  public set name(value: string) {
    // set accessor
    this.animalName = value;
  }
  public walk() {
    // method
  }
}

// 当前也可以的
class Animal {
  constructor(protected breed, name) {
    // Parameter property and constructor
    this.name = name;
  }
  private animalName: string; // Property
  get name(): string {
    // get accessor
    return this.animalName;
  }
  private set name(value: string) {
    // set accessor
    this.animalName = value;
  }
  protected walk() {
    // method
  }
}

@typescript-eslint/interface-name-prefix

规则

'@typescript-eslint/interface-name-prefix'         : 'off',

介绍

不强制接口添加前缀，就是接口加 I或者_

Code Demo

// 规则化
interface IAnimal {
  name: string;
}

interface IIguana {
  name: string;
}

interface _IAnimal {
  name: string;
}

// 当前也可以,不强制
interface Animal {
  name: string;
}

interface Iguana {
  name: string;
}

@typescript-eslint/member-delimiter-style

规则

'@typescript-eslint/member-delimiter-style'        : 'error',

介绍

成员变量必须添加定界符，当前采用默认值分号结尾

Code Demo

// Incorrect
interface Foo {
  name: string;
  greet(): void;
}

// Correct
interface Foo {
  name: string;
  greet(): void;
}

type Bar = {
  name: string,
  greet(): void,
};

@typescript-eslint/member-naming

规则

'@typescript-eslint/member-naming'                 : 'off',

介绍

此规则关闭，是否给成员变量添加强制前缀，开启的話默认private为_

Code Demo

// 开启的化就要这样写才合规,{ "private": "^_" }
class HappyClass {
  private _foo: string;
  private _bar = 123;
  private _fizz() {}
}

@typescript-eslint/no-explicit-any

规则

// 暂时不强制定义类型，any暂不处理
'@typescript-eslint/no-explicit-any'               : 'off',

介绍

这条规则当前版本关闭，若是开启的化就不允许any类型出现（anyscript!!!!）

Code Demo

// Incorrect
const age: any = 'seventeen';

// Correct
const age: string = 'seventeen';

@typescript-eslint/no-floating-promises

规则

'@typescript-eslint/no-floating-promises'          : 'off',

介绍

该规则关闭，开启则需要适当的处理好所有 promise

Code Demo

点击规则的连接查看详情

@typescript-eslint/no-inferrable-types

规则

'@typescript-eslint/no-inferrable-types'           : 'off',

介绍

这条规则是关闭的，开启的話，成员变量，函数参数这些不能带上可推断的类型

Code Demo

// Incorrect
const a: bigint = 10n;
const a: bigint = -10n;
const a: bigint = BigInt(10);
const a: bigint = -BigInt(10);

// Correct
const a = 10n;
const a = -10n;
const a = BigInt(10);

@typescript-eslint/no-magic-numbers

规则

'no-magic-numbers'                                 : 'off',
'@typescript-eslint/no-magic-numbers'              : 'off',

介绍

当前是关闭的，开启后不允许魔法数字的骚姿势

Code Demo

// Incorrect
type SmallPrimes = 2 | 3 | 5 | 7 | 11;

@typescript-eslint/no-misused-promises

规则

'@typescript-eslint/no-misused-promises'           : 'off',

介绍

这条规则是关闭的，就是不允许滥用 promise

Code Demo

// Incorrect
const promise = Promise.resolve('value');

if (promise) {
  // Do something
}

const val = promise ? 123 : 456;

while (promise) {
  // Do something
}

// Correct
const promise = Promise.resolve('value');

if (await promise) {
  // Do something
}

const val = (await promise) ? 123 : 456;

while (await promise) {
  // Do something
}

@typescript-eslint/no-namespace

规则

// 暂时关掉，以后去规范
'@typescript-eslint/no-namespace'                  : 'off',

介绍

不允许 ts 自带的命名空间，此版本关闭。官方推荐用esm来取代（es6 module）

Code Demo

请查看规则连接查看详情

@typescript-eslint/no-non-null-assertion

规则

// 非空断言 不禁止
'@typescript-eslint/no-non-null-assertion'         : 'off',

介绍

禁止非空断言，当前版本允许

Code Demo

// Incorrect
interface Foo {
  bar?: string;
}

const foo: Foo = getFoo();
const includesBaz: boolean = foo.bar!.includes('baz');


// Correct
interface Foo {
  bar?: string;
}

const foo: Foo = getFoo();
const includesBaz: boolean = foo.bar && foo.bar.includes('baz');

@typescript-eslint/no-parameter-properties

规则

// class constructor 参数属性类型不禁止
'@typescript-eslint/no-parameter-properties'       : 'off',

介绍

当前关闭，允许隐性声明变量

Code Demo

// Incorrect ，若是开启后这样是错误的
class Foo {
  constructor(private name: string) {}
}

// Correct ，当前是允许这种简写的（ng 里面很常见），等价于 this.name = name;
class Foo {
  constructor(private name: string) {}
}

@typescript-eslint/no-this-alias

规则

'@typescript-eslint/no-this-alias'                 : ['error', {
  allowDestructuring: true, // Allow `const { props, state } = this`; false by default
  allowedNames: ['self'], // Allow `const self = this`; `[]` by default
}],

介绍

允许从 this中解构数组，允许 self作为 this 的别名

Code Demo

// Correct ，当前是允许这种简写的（ng 里面很常见），等价于 this.name = name;
const { props, state } = this;
const self = this;

@typescript-eslint/no-type-alias

规则

'@typescript-eslint/no-type-alias'                 : 'off',

介绍

禁用无类型别名，主要是可读性上

Code Demo

具体看规则的链接

@typescript-eslint/no-unused-vars

规则

'no-unused-vars'                                   : 'off',
'@typescript-eslint/no-unused-vars'                : ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],

介绍

变量不允许声明后未使用，参数若是最后一个使用则前置忽略不报错

这里的配置保持和 eslint-config-standard 一致

Code Demo

// 比如以下的参数是正确的
(function(foo, bar, baz, qux) {
  return qux;
})();

@typescript-eslint/prefer-for-of

规则

'@typescript-eslint/prefer-for-of'                 : 'off',

介绍

这条规则当前是关闭的。作用就是若循环中没有使用到下标，优先用for...of遍历。

Code Demo

// Correct
for (const x of arr) {
  console.log(x);
}

for (let i = 0; i < arr.length; i++) {
  // i is used to write to arr, so for-of could not be used.
  arr[i] = 0;
}

for (let i = 0; i < arr.length; i++) {
  // i is used independent of arr, so for-of could not be used.
  console.log(i, arr[i]);
}

@typescript-eslint/prefer-namespace-keyword

规则

'@typescript-eslint/prefer-namespace-keyword'      : 'off',

介绍

优先使用命名空间来声明自定义模块

Code Demo

具体可以看规则链接

@typescript-eslint/prefer-regexp-exec

规则

'@typescript-eslint/prefer-regexp-exec'            : 'off',

介绍

该规则关闭，主要是性能上的差异，推荐用正则构造函数的exec函数，效率比match高

Code Demo

// Incorrect
'something'.match(/thing/);

'some things are just things'.match(/thing/);

const text = 'something';
const search = /thing/;
text.match(search);

// Correct
/thing/.exec('something');

'some things are just things'.match(/thing/g);

const text = 'something';
const search = /thing/;
search.exec(text);

@typescript-eslint/promise-function-async

规则

'@typescript-eslint/promise-function-async'        : 'off',

介绍

当前关闭，就是返回promise的函数必须增加async的修饰符

Code Demo

// Incorrect
const arrowFunctionReturnsPromise = () => Promise.resolve('value');

function functionReturnsPromise() {
  return Promise.resolve('value');
}

// Correct
const arrowFunctionReturnsPromise = async () => Promise.resolve('value');

async function functionReturnsPromise() {
  return Promise.resolve('value');
}

@typescript-eslint/require-await

规则

'require-await'                                    : 'off',
'@typescript-eslint/require-await'                 : 'off',

介绍

当前关闭，async函数必须返回带有await的promise

Code Demo

async function numberOne(): Promise<number> {
  return Promise.resolve(1);
}

async function getDataFromApi(endpoint: string): Promise<Response> {
  return fetch(endpoint);
}

// async function 'numberOne' has no 'await' expression
// async function 'getDataFromApi' has no 'await' expression

@typescript-eslint/semi

规则

semi                                               : 'off',
'@typescript-eslint/semi'                          : ['error', 'always'],

介绍

和 eslint-config-standard 保持一致，行后必须带分号

Code Demo

具体详情查看规则链接

@typescript-eslint/strict-boolean-expressions

规则

// 过于严格，后续观察
'@typescript-eslint/strict-boolean-expressions'    : 'off',

介绍

当前关闭，禁用短路运算符，判断必须能看得出和谁比较，为什么不行

Code Demo

// Incorrect
const number = 0;
if (number) {
  return;
}

let foo = bar || 'foobar';

let undefinedItem;
let foo = undefinedItem ? 'foo' : 'bar';

let str = 'foo';
while (str) {
  break;
}

// Correct
const number = 0;
if (typeof number !== 'undefined') {
  return;
}

let foo = typeof bar !== 'undefined' ? bar : 'foobar';

let undefinedItem;
let foo = typeof undefinedItem !== 'undefined' ? 'foo' : 'bar';

let str = 'foo';
while (typeof str !== 'undefined') {
  break;
}

@typescript-eslint/triple-slash-reference

规则

'@typescript-eslint/triple-slash-reference'        : ['error', { "path": "never", "types": "never", "lib": "never" }],

介绍

当前关闭，async函数必须返回带有await的promise

Code Demo

// 禁用这种ts 的类型断言文件引用方法
/// <reference path="foo" />

// 推荐用 esm的 import 这种

@typescript-eslint/typedef

dang

规则

"@typescript-eslint/typedef": "off",

介绍

函数参数和成员变量必须添加类型声明;

当前不强制在typescript中声明类型;

@typescript-eslint/unbound-method

规则

'@typescript-eslint/unbound-method'                : 'off',

介绍

该规则当前关闭，启用配置需要做调整。

函数引用要指定作用域，静态函数无需（内部没有this）

Code Demo

// Incorrect
class MyClass {
  public log(): void {
    console.log(this);
  }
}

const instance = new MyClass();

// This logs the global scope (`window`/`global`), not the class instance
const myLog = instance.log;
myLog();

// This log might later be called with an incorrect scope
const { log } = instance;

// Correct
class MyClass {
  public logUnbound(): void {
    console.log(this);
  }
  static log() {
    console.log(OtherClass);
  }

  public logBound = () => console.log(this);
}

const instance = new MyClass();

// logBound will always be bound with the correct scope
const { logBound } = instance;
logBound();

// .bind and lambdas will also add a correct scope
const dotBindLog = instance.log.bind(instance);
const innerLog = () => instance.log();