LoginSignup
17
14

More than 5 years have passed since last update.

【tslint】@angular/cliでng newした時のtslint.jsonの中身についてざっくりと

Last updated at Posted at 2017-06-27

なんとなく使っていたAngular CLIでnewしたプロジェクトの、
デフォルトでついているtslint.jsonの中身を把握するため、見直してみました。

調査した時のcliバージョンは

{
 "@angular/cli": "1.1.3"
}

です。

rulesDirectory

TSLintがカバーしていないlintチェックを持つファイルなりプロジェクトを、カスタムルールとして指定する場所
Angularのデフォルトでは(@anglar/cli 1.1.2)ではcodelyzerパッケージが指定されている。

Codelyzerとは

Angularプロジェクト用のルールセット。
GitHubリポジトリ

rules

ここにルールを設定する

arrow-return-shorthand

// これを
 () => { return x; }

// こう書けるよと促す
 () => x;
"arrow-return-shorthand": [true, "multiline"]

のようにmultilineを設定すると複数行に別れていても該当するようになる。

callable-types

コールシグネチャだけのインターフェースやリテラルタイプは、関数型で書けるよとお知らせする

// これを
interface I {
    (): void;
}
// こう書けるよ
type I = () => void;

class-name

クラス名をパスカルケースにしていないと警告


// OK
export class AppComponent {}

// NG
export class appComponent {}

comment-format

コメントのフォーマットについて細かく設定する
"check-space"が設定されていると、コメントの頭に半角スペースを要求する

// これはOK
//これはNG

curly

if/for/do/while は中括弧で囲みましょうというもの

 // これはダメ
 if (foo === bar)
  foo++;
  bar++;

eofline

最後に改行を入れましょう。

forin

for...in... を使う時は

for (let key in someObject) {
    if (someObject.hasOwnProperty(key)) {
        // code here
    }
}

こうしましょう。理由はMDNで。

import-blacklist

使用しないモジュールのロードを避ける為に、import、requireではサブモジュールを指定しましょう。というもの。

import 'rxjs/add'; // OK
import 'rxjs';     // NG

import-spacing

import文を書くときの間隔をしっかり取りましょう。

import { Component} from '@angular/core'; // OK
import{ Component }from'@angular/core';    // NG

indent

インデント方法を縛る。
争いたくない。

  • tabs  タブを強制
  • spaces スペースを強制

interface-over-type-literal

インタフェースは実装、拡張、マージが可能なため、一般に型リテラルよりも優先されるため、

// こう書くより
type T = {
  x: number
};
// こう書きましょう
interface T {
  x: number
};

label-position

ラベルは適切な位置に置きましょうということ。

// NG
lab1:
console.log('hello');

// OK
lab2:
for (let i = 0; i < 10; i++) {
 break lab2;
}

max-line-length

コードの1行の最大文字数を設定

{
 "max-line-length": [ true, 140]
}

で140文字まで。

member-access

privateとかprotectedとかpublicとかアクセス修飾子は明示的にしましょうね。というもの。
セッター、ゲッター、コンストラクタ等々割と細かく設定できる。
Angularのデフォルトはfalseでした。

member-ordering

メンバーの宣言順序を守りましょうというもの。
private ->publicとかstatic->!staticを縛る。
デフォルトで設定されているものはstatic-before-instanceとvariables-before-functionsの2つ。

static-before-instanceの例
// NG
a: string;
static b: string;

// OK
static b: string;
a: string;
variables-before-functionsの例
// NG
hoge() {}
fuga: string;

// OK
fuga: string;
hoge() {}

no-arg

arguments.calleeを禁止。

no-bitwise

&, &=, |, |=, ^, ^=, <<, <<=, >>, >>=, >>>, >>>=, ~

のbit演算子禁止。

no-console

指定したconsole関数を禁止する。
禁止されていたのは

  • debug
  • info
  • time
  • timeEnd
  • trace

no-construct

StringとかBooleanとかのnewを禁止。

// NG
let s = new String('s')

// OK
let s = 's';

no-debugger

debuggerの挿入禁止

no-duplicate-super

super()は1つのコンストラクターで1回まで。

no-empty

if (foo) {}

みたいな空のブロックを禁止する。
デフォルトではfalse設定になってた。

no-empty-interface

interface T {}

みたいな空のインターフェースを禁止する。

no-eval

evalは悪。

no-inferrable-types

コンパイラで簡単に型推論できるものは型宣言を省略しないと怒られる。
```typescript
// NG
let num: number = 1;

// OK
let num = 1;
```

no-misused-new

interfaceやtypeの中で自身の型を返すnewを禁止。
よく噛み砕けてないです。すみません。

// NG
interface T {
 new(): T;
}

no-non-null-assertion

non null assertionを禁止する

// NG
let x = null;
x!.y = null;

non null assertionの存在を初めて知った・・・。

no-shadowed-variable

上下関係?のあるスコープ内で同一名の変数宣言を禁止する。
shadowing variableというらしい。

// NG
foo() {
 let a = 0;
 let b = 0;

 if (true) {
   let a = 0;
 }

 if (true) {
   let b = 0;
 }
}

no-string-literal

文字列プロパティへのアクセスを制限する。
Angularのデフォルトではfalse設定になっている。
trueにすると

var obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4
};

function test() {
 var a = obj.a;
 var b = obj[ 'bcd' ]; // NG
 var c = obj["c"]; // NG
 var d = obj[b];
}

のように弾かれる。

no-string-throw

プレーンテキストのthrowを禁止する。

 throw new Error('bar'); // OK
 throw 'foo'; // NG

no-switch-case-fall-through

switch文でbreakせずにスルーする処理を禁止する。
例外として「/* falls through */」を指定すると対象から外すことができる。
また、caseが連続している場合も対象外。

switch(foo) {
 case 1:
  someFunc(foo);
  /* falls through */
 case 2:
  someOtherFunc(foo);
 case 3:
 case 4:
  someOtherFunc(foo);
}

no-trailing-whitespace

行末の空白を禁止する。

no-unnecessary-initializer

undefinedでの初期化を禁止する

let foo: string = undefined; // NG
let bar: string | undefined = undefoned; // NG

no-unused-expression

代入や実行されない変数、関数を禁止する

no-use-before-declare

宣言の前に変数が使用されることを禁止する。
varを使う時に有効。letやconstはコンパイラが検出する。

no-var-keyword

varの使用を禁止する。
letやconstを使いましょう。

object-literal-sort-keys

オブジェクトを表記する際はキーをアルファベット順に並べましょうというもの。
AngularCLIでnewしたプロジェクトではfalseだった。

let obj = {
 b: 1,
 a: 2
}; // NG

one-line

elseやcatchなどの予約語の位置を縛る。
デフォルトでは
「check-open-brace」 ifやswitchのような波括弧があとにくるものは同じ行に括弧を書くべき
「check-catch」 tryの閉じ括弧と同じ行にcatchを書くべき
「check-els」 上記のelse版
「check-whitespac」 特定の予約語と空白がセットになっているように書くべき
が指定されていた。

prefer-const

値に変更がない変数についてはletではなくconst宣言をするように。

quotemark

クォーテーションマークをシングルにするかダブルにするか指定する。
AngularCLIでnewしたプロジェクトでは「'(シングル)」が指定されていた。

let a = 'foo'; // OK
let b = 'bar'; // NG

radix

parseIntを使う時は引数に基数を指定すること。

parseInt('10', 10); // OK
parseInt('10'); // NG

semicolon

文末には必ずセミコロン「;」を書くこと。

triple-equals

「!=」「==」ではなく、「!==」「===」の使用を強制する。
下記を設定した場合は例外とする。
「allow-null-check」 nullと比較する時
「allow-undefined-check」 undefinedと比較する時
AngularCLIでnewしたプロジェクトでは「allow-undefined-check」が指定されていた。

if (foo === bar) {} //OK
if (foo == bar) {} // NG

typedef-whitespace

方定義時のスペースについてルールを設定する
AngularCLIでnewしたプロジェクトは以下が設定されていた

"typedef-whitespace": [
 true,
 {
   "call-signature": "nospace",
   "index-signature": "nospace",
   "parameter": "nospace",
   "property-declaration": "nospace",
   "variable-declaration": "nospace"
  }
]

上から
* 関数の返り値
* インデックスシグニチャ
* 関数の引数
* クラス変数
* 変数の型

数が多いのでひとまずここまで。多分続きやります。

17
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
14