🔍

ESlintやってみる

2022/04/24に公開約1,700字

ESlintとは?

公式ドキュメント

https://eslint.org/

ESLint入門

ESLintは、コードの一貫性を高め、バグを回避することを目的として、ECMAScript/JavaScriptコードで見つかったパターンを識別してレポートするためのツールです。多くの点で、JSLintやJSHintに似ていますが、いくつかの例外があります。

ESLintはJavaScriptの解析にEspreeを使用しています。
ESLintは、ASTを使用してコード内のパターンを評価します。
ESLintは完全にプラグイン可能であり、すべてのルールはプラグインであり、実行時にさらに追加できます。

インストールと使用法

前提条件:SSLサポートで構築されたNode.js(^12.22.0、、、^14.17.0または)。>=16.0.0(公式のNode.jsディストリビューションを使用している場合、SSLは常に組み込まれています。)

npmまたはyarnを使用してESLintをインストールできます。

だそうです🤔
まずは環境構築する。習うより慣れろ!

講師のガイド

https://eslint.org/docs/user-guide/getting-started

私は、npmを普段使っているので、npmでやってみます。

作業フォルダを作成する。
Lintって名前にしますか...

cd Lint
npm install eslint --save-dev
npm init @eslint/config
touch yourfile.js
npx eslint yourfile.js

ふむ、何も起きないOKってことか?

yourfile.js

function say(params) {
  return params;
}

say('Hay');

しかし、say('Hay');を消すと!
お、エラーが出てきた!
でも、他のところに作った同じコードはエラー出てないけど?

さっきの豆電球のメニューの一番上の文字を選択するとコメントがついてエラーが消えた!

Vue.jsでも使ってみたことあるのですが、メソッドにスペースが空いてなかったりすると、修正するように、警告が出てきました!

悪い例👇

computed: {
  say(){
  }
}

良い例👇

computed: {
  say() {
  }
}

使ってみた感想は、コード綺麗に書けよとESlintが警告をしてくる。VScodeの機能で、豆電球から表示されているものを選べばコメントがついて、エラー消えたり、コードを綺麗に書き換えてくれたりします。

最後に

今まで、リンターなんてものを使ったことはなかった。Flutterでは、2.5.2からデフォルトで設定されるようになってたけど😅
lint[linter]とは?
lintとは、コンピュータプログラムなどのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。また、そのようなツールで解析を行うこと。ツールを指す場合は “linter” (リンター)と呼ぶこともある。
業務では、必要な知識なんでしょうね。インデントがずれていたりすると警告が出てきたりして、鬱陶しいから知識がない頃は、導入していなかったが、綺麗なコードを書くには必要だということがわかった。

https://e-words.jp/w/lint.html

Discussion

ログインするとコメントできます