[追記: 2023/12/01]
ESLint Config の設定については下記で詳細に言及しております。こちらも合わせてご覧ください。
はじめに
こんにちは、がんがんです。以前ははてなブログの方で記事を書いてました。Zenn の方でも気長に書いていけたらと思ってます(Zenn の方では以下のような本を書いてます。お手隙の際に何卒)。
この記事は『blessing software 夏のブログリレー企画』の 3 日目の記事です。
昨日は Quantum さん の記事タイトルが公開されました。お手隙の際にこちらもご覧ください。
明日は asuka さん の Flutter についての記事が公開される予定です！楽しみですね〜
[更新：2023/08/03]
記事が公開されましたようです。こちらも合わせてご覧ください〜
この記事でやりたいこと
本記事では以下について行なっていきます。
- @nuxtjs/eslint-moduleを用いて ESLint の設定を行う
@nuxtjs/eslint-module モジュールとは
Nuxt3 では拡張モジュールを簡単に作成・公開することができます。モジュールの作成方法は公式ガイドの方をご覧ください。
Nuxt3 公式のモジュール一覧を確認したところ ESLintに関するモジュールが確認できました。
Nuxt3 関連の記事は Zenn 内でもあまり多くなく、モジュールを用いた記事もほとんど観測出来ませんでした。そこで今回は@nuxtjs/eslint-moduleモジュールを用いて ESLint の設定を行ってみます。
実際に設定してみる
環境構築
Nuxt3 の環境構築が完了している場合は飛ばしてください。
Nuxt3 をインストールする
公式ドキュメントを参考に Nuxt3 環境を整えます。
nuxiコマンドを用いてスターターを作成し、インストールを行います。
npx nuxi@latest init <project-name> && npm install
開発モードで起動し http://localhost:3000 にアクセスします。アクセスできたら OK です。
npm run dev -- -o
必要なパッケージをインストールします。
npm i -D eslint @nuxtjs/eslint-module
以下と同様の ESLint 設定を行う場合は以下もインストールします。
npm i -D eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-unused-imports prettier eslint-config-prettier
※ ESLint 設定で追加したパッケージは以下スクラップで整理していたものです。
nuxt.config.js 設定
nuxt.config.jsに以下を追加します。
export default defineNuxtConfig({
...,
module: ["@nuxtjs/eslint-module"],
eslint: {
cache: false,
eslintPath: "./eslintrc.js",
}
});
.eslintrc.js 設定
.eslintrc.jsの設定はお好みで問題ないかと思います。参考までに以下に掲載します。
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-recommended",
"prettier",
],
plugins: ["unused-imports"],
rules: {
// NOTE: https://github.com/sweepline/eslint-plugin-unused-imports
"@typescript-eslint/no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{
vars: "all",
varsIgnorePattern: "^_",
args: "after-used",
argsIgnorePattern: "^_",
},
],
"@typescript-eslint/explicit-function-return-type": "off",
"no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
},
overrides: [
// NOTE: Return Typesの明示を必須にする
// - ref: https://typescript-eslint.io/rules/explicit-function-return-type/
{
files: ["*.ts", "*.js", "*.vue"],
rules: {
"@typescript-eslint/explicit-function-return-type": "error",
},
},
],
};
使ってみた所感
当初の想定では以下のような使い方だと思ってました。
export default defineNuxtConfig({
...,
module: ["@nuxtjs/eslint-module"],
eslint: {
cache: false,
root: true,
env: {
browser: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-recommended",
"prettier",
],
...,
}
});
実際には.eslintrc.jsを用意し、その path をeslintPathを設定する必要があります。
nuxt.config.tsの設定量によってはdefineNuxtConfig.eslint内に設定できると管理するファイルが減って嬉しいですね。「ESLint の設定は別ファイルで管理したい」という派閥と「config 設定はなるべく 1 ファイルにまとめたい」という派閥が存在するので、要件・チームによって可変できると良きですね。
おわりに
@nuxtjs/eslint-moduleを用いて ESLint の設定を行なっていきました。Nuxt3 関連の記事をあまり見かけないので積極的に書いていければいいなと思います。
Discussion