ESLintとか雰囲気で使ってたから

お手伝いさせてもらっているサービスで構文チェックをもちろんのこと導入されているですが、私自身雰囲気で使っていたのでまとめてみる回でございます。

ESLint

そもそもlintっていろんなlintがあるイメージですがlintってなんですかね。

lintとは、コンピュータプログラムなどのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。また、そのようなツールで解析を行うこと。ツールを指す場合は “linter” （リンター）と呼ぶこともある。 https://e-words.jp/w/lint.html

ソースコードの中に潜むバグの原因や、構文間違いを自動でチェックしてくれるツールを総称してlinterと呼ぶみたい。この知ってるようで説明できないことを知れた感じが良いですね〜。名前はECMA Script linterのことでしょうきっと。

例として下記。

import { hoge, huga } from './hogehuga.ts'

export const piyo = () => {
  return hoge
}

hugaをimportしているのに使用していない場合、eslintにかけると

'huga' is defined but never used

といった感じで怒ってくれる。

この機能ってバグを防ぐのは勿論なんですが、レビュワーの負担を減らす意味でも大きな効果がありますよね。時間的な負担もありますが精神的な負担が減る。「あーこう書いてるけどわざわざ言わなくてもいいかなー、バグにはならんし」とか「これ指摘したら細かすぎかなー」とか。そういうことを考えなくてよくなるわけです。変な気を使いたくない！

Prettier

github.com

読み方は「プリティア」。 prettyの比較級なので「よりきれい」とかそういう意味かな。こちらはコードフォーマッターで、決められたきれいな形に整形してくれるものです。よく取り上げられてる例が１行の長さに応じて改行に対応していること。

return { hoge, huga, hige, piyo, tiger, lion, horse, panda }

↓

return { 
  hoge, 
  huga, 
  hige, 
  piyo, 
  tiger, 
  lion, 
  horse, 
  panda,
}

これも地味に大事で、短い行なら

return { hoge, hige }

でいいという人もいれば、必ず改行したい人もいたりする。

return {
  hoge, 
  hige,
}

でもそんな人もimport文では改行しない

import { hoge, hige } from './hogehige.ts'

なにが正解か誰もわからない。だからpretteir様を正解にしよう。

ちなみにprettier-eslintなるものがあり、こちらを使用することでESLintとPritteir両方使えるようになるそうです。 https://github.com/prettier/prettier-eslint 開発しているプロダクトにもこれが入ってました。知らずに使ってた。

VTC

github.com

最後はTypeScriptの型チェック。これはVue.jsに限った話ですがvue-type-checkというpackageがあり、単一ファイルコンポーネントの型チェックをしてくれます。例えば型Userにないageが定義された場合

type User = {
  id: number
  name: string
}

const user: User = { id: 1, age: 20 }

vtcを実行すると下記のようなエラーを返してくれる

162:32 Type '{ id: number; age: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'age' does not exist in type 'User'.
  160 |     }
  161 |
> 162 |     const user: User = { id: 1, age: 20 }

さらにこれのいいところはtemplate内の型もちゃんとチェックしてくれること template内でUserに定義されていないnameを参照しようとすると

<template>
  <div>
    {{ user.name }}
  </div>
</template>

<script lang="ts">

・
・
・

type User = {
  id: number
  age: number
}

const user: User = { id: 1, age: 20 }

return {
  user
}
</script>

下記のようにエラーを返してくれます。

Property 'name' does not exist on type 'User'.
> 68 |             {{ user.name }}
     |                     ^^^^

意外と気付きにくい型エラーもチェックしてくれそうです。

以上です。もっといろんなツールがあるとは思うのですが、フロントエンド開発はこれらを入れておけば間違いないんじゃないかと🦑 だいぶなんとなくで使っていたし、必要性も再認識できたので書いてよかったでございます。