prettier + tslintを使ってみる

今話題のフォーマッターprettierを仕事のプロジェクトに導入したくてtslintとの組み合わせ方について調べた

とりあえず必要なものを入れる

yarn add -D tslint prettier tslint-plugin-prettier

tslint-plugin-prettier

github.com

Runs Prettier as a TSLint rule and reports differences as individual TSLint issues

tslintでlintするタイミングでprettierのチェックもかけてくれるやつ。tslint.jsonに設定する

{
  "rulesDirectory": [ "tslint-plugin-prettier" ],
  "rules": {
    "prettier": [true, {
      "semi": false
    }
  }
}

フォーマットが確認できるように、雑なtsファイル用意しましょう（例ではindex.tsってファイル作りました）

const f: (x:string) => void=(x)=>{console.log(x)}
f('hoge')

const f2:(x:number)=>number=(x)=>x+2


const a:number[] = [1,2,3,
4,
5,
6
]

実行してみる

npx tslint --fix index.ts

実行後にindex.tsを確認すると整形されているはず。tslint.jsonには"semi": falseを設定しているので、整形されたコードにはセミコロンがないことも確認できるはずです

試しにコードを整形実行前に戻して"semi": flaseを消して実行するとセミコロンがついて整形されてるはず。消して実行した結果がこんな感じ

const f: (x: string) => void = x => {
  console.log(x);
};
f("hoge");

const f2: (x: number) => number = x => x + 2;

const a: number[] = [1, 2, 3, 4, 5, 6];

まとめ

とりあえず動作することはわかったので、フォーマット関連はprettierに、lintはtslintに任せる感じで設定して使っていってみようと思う