ESlintとは?
公式ドキュメント
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をインストールできます。
だそうです🤔
まずは環境構築する。習うより慣れろ!
講師のガイド
私は、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の機能で、豆電球から表示されているものを選べばコメントがついて、エラー消えたり、コードを綺麗に書き換えてくれたりします。
ルールの書き方
公式ドキュメント通りだと、セミコロンとダブルクオートを使ってくださいというルールを設定できます。
コーディングのルールに合わせて、セミコロンなしにしたり、シングルクオートに変更もできます。
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
Reactでjsxのエラーを無視する処理
jsxを書いたときに、htmlタグにエラーが出る警告を無視させる処理を書くときは、以下のoffの２行のコードを追加する
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"],
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
最後に
今まで、リンターなんてものを使ったことはなかった。Flutterでは、2.5.2からデフォルトで設定されるようになってたけど😅
lint[linter]とは?
lintとは、コンピュータプログラムなどのソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。また、そのようなツールで解析を行うこと。ツールを指す場合は “linter” （リンター）と呼ぶこともある。
業務では、必要な知識なんでしょうね。インデントがずれていたりすると警告が出てきたりして、鬱陶しいから知識がない頃は、導入していなかったが、綺麗なコードを書くには必要だということがわかった。
Discussion