ESlintやってみる
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って名前にしますか...
mkdir Lint
cd Lint
2025/09/28
インストールコマンドが変更されていたので修正しました。
npm init @eslint/config@latest
画像の通りに手順を実行
Node.js、common.jsを選択する。
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
export default defineConfig([
{ files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
{ files: ["**/*.js"], languageOptions: { sourceType: "commonjs" } },
]);
console.logを使って検証しようとしたのですがそのまま使うとエラーが出るの設定を変更してます。セミコロンとダブルクォートがないとエラーが警告が出るようにしてます。
import js from "@eslint/js";
export default [
js.configs.recommended,
{
files: ["**/*.js"],
languageOptions: {
globals: {
console: "readonly",
process: "readonly",
Buffer: "readonly",
__dirname: "readonly",
__filename: "readonly",
exports: "writable",
module: "writable",
require: "readonly",
},
},
rules: {
"semi": ["warn", "always"],
"quotes": ["warn", "double"],
},
},
];
index.jsを作成して検証してみる。"warn"だと、セミコロンとダブルクォートがないのでエラーが黄色のログが発生する。
"off"に設定すると、設定を無視するようにできます。
"error"に設定すると、赤いログが表示される。
過去の記事の手順👇
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