Javascriptのlinterとformatterを使ってみる！

MODELLO（モデュロ）中の人です。
MODELLO（モデュロ）は、CMSなので使いやすさは抜群ですが、CMSを使わなくてもWEBページって作りたいですよね？
と、いうことで、今回は、Javascriptのformatter,linterのライブラリや環境について記述して、typescript環境でも同一のものが使用できるまでを紹介したいと思います。

1 そもそもLinterとFormatterとは何か?
2 ESLint導入について
- 2.1 ESLintとは
3 ESLintのルール設定
- 3.1 ルール設定してみる
4 ESLintのPluginとExtends
5 Prettier導入
- 5.1 Prettier
6 ESLintとの接続
7 次回予告

そもそもLinterとFormatterとは何か?

・Formatterとはコードの形をルールに従って整えてくれるツール
・Linterとはコード規約に違反したコードに対して警告やエラーを出力する静的解析ツール

vscodeを使えばデフォルトでもCtrl+Shift+Fで使えるハズです
Javascriptの場合、LinterはESLint、FormatterはPrettierというものを合わせて使用することが多い

ESLint導入について

ESLintとは

Javascriptで使用機会の多いLinterです
参考：https://eslint.org/d ocs/latest/use/getting-started

npm init @eslint/config@latest でインストールする
質問が出力されるので自分の環境に合わせて解答していく

jsで設定を出力した場合はeslint.config.jsが新規作成されているのを確認する

package.jsonのscriptsに以下の内容を記述してeslintを省略して起動できるようにする
- npm run lint で起動できる

    "lint": "eslint --ext js .",    
		"lint:fix": "eslint --ext js --fix ."

    "lint": "eslint --ext js .",    
		"lint:fix": "eslint --ext js --fix ."

ESLintのルール設定

eslintのrulesの項目は個別にlinterのルールを設定できる
ルールには警告レベルがあり、offの場合は設定のoff、warnの場合は警告、errorの場合はエラーを吐き出す。
ESLintデフォルトのルールは次のurlから確認する
https://eslint.org/docs/latest/rules/

ルール設定してみる

no-unuserd-varshttps://eslint.org/docs/latest/rules/no-unused-vars
- 定義されているが使用されていない変数をチェック
no-undefhttps://eslint.org/docs/latest/rules/no-undef
- 定義されていない変数を使用しているかチェック　
上のルールをeslint.config.jsに設定

  {    
		rules: {      
			"no-unused-vars": "warn",      
			"no-undef": "warn",    
			},  
	}

  {    
		rules: {      
			"no-unused-vars": "warn",      
			"no-undef": "warn",    
			},  
	}

以下のコードを記述.

const foo = someFunction();
const bar = a + 1;

const foo = someFunction();
const bar = a + 1;

npm run lint でpackage.jsonのscriptに記述したコードを実行

ESLintのPluginとExtends

ルールを個別に全部書くのは大変なので、まとめた設定をしてくれる機能がPluginとExtends
Pluginはルールのリストのパッケージ
Extendsはルールのリストのグループ
試しにeslintの推奨設定である js/recommended を設定する
- https://eslint.org/docs/latest/rules/ のページでチェックが入っている内容が設定される
- rulesを削除して実行するとwarnだった内容がerrorに変わっている

  {    
		plugins: {      
				js,
			},        
		extends:["js/recommended"]  
	}

  {    
		plugins: {      
				js,
			},        
		extends:["js/recommended"]  
	}

npm run lint をする
- エラーが出力されている

extendsの内容はrulesで上書きできる
- 下は no-unused-vars をwarnで上書きする

  {    
		plugins: {
		      js,
		    },
		extends:["js/recommended"],
		rules: {
		      "no-unused-vars": "warn",
		    },
	}

  {    
		plugins: {
		      js,
		    },
		extends:["js/recommended"],
		rules: {
		      "no-unused-vars": "warn",
		    },
	}

eslintのpluginは例えば会社ごとに公開していることがある
- https://github.com/google/eslint-config-google
  - eslint-config-google
- https://github.com/airbnb/javascript
  - eslint-config-airbnb

Prettier導入

Prettier

Javascriptで使用機会の多いformatterとなります
eslintとの使い分けでいうと、formatに関する規則、例えば一行の字数制限のようなルールはprettier側、一方でコード品質に関する規則、例えば使用されていない変数の禁止のようなルールはeslint側で修正するのが良い

https://prettier.io/docs/install

npm install --save-dev --save-exact prettier でinstall
- —save-exactは新バージョンが出てもnpm updateでupdateしないの意味
node --eval "fs.writeFileSync('.prettierrc','{}\n')" で設定ファイル作成
- vscodeを通してファイルを作成しても良い。

prettierrcの設定を変える
- printWidth: 一行120字以内
- tabWidth: インデント幅２
- その他の設定に関しては以下の公式サイトで確認できる
  - https://prettier.io/docs/options

{    
			"printWidth": 120,
			"tabWidth": 2
}

{    
			"printWidth": 120,
			"tabWidth": 2
}

.prettierignore で除外対象のファイルやフォルダを設定できる
- node_modules の除外は不要
main.js等に適当に書いてprettierを実行する
- npx prettier . --write もしくは npm install -g prettier からのprettier実行等

ESLintとの接続

ESLintとの設定を接続しPrettierと衝突する可能性のあるルールをoffにできる

npm i -D eslint-config-prettier で必要なライブラリをinstall
eslint.config.js に以下の記述を追加(公式ドキュメントより)

import someConfig from "使用中の設定";
// Note the `/flat` suffix here, the difference from default entry is that
// `/flat` added `name` property to the exported object to improve
// [config-inspector](<https://eslint.org/blog/2024/04/eslint-config-inspector/>) experience.
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default [
  someConfig,
  eslintConfigPrettier,
];

import someConfig from "使用中の設定";
// Note the `/flat` suffix here, the difference from default entry is that
// `/flat` added `name` property to the exported object to improve
// [config-inspector](<https://eslint.org/blog/2024/04/eslint-config-inspector/>) experience.
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default [
  someConfig,
  eslintConfigPrettier,
];

package.jsonのscriptsに以下のような記述をして一回でできるようにすると便利

"lint-fix": "eslint --ext js --fix && prettier . --write",

"lint-fix": "eslint --ext js --fix && prettier . --write",

次回予告

次回は、Javascript環境のnode設定のnpmやviteについて書きたいとおもいます。

React,javascript