本記事の内容は古くなっている。 最新版はこちらを参照してほしい。
これはなに
Nuxt3で構築したWebアプリの環境にESLintをインストールし設定する方法のメモ。 VS Codeで自動実行までさせる。
環境
- Nuxt 3.4.3
- ESLint 8.40.0
インストールと設定方法
Nuxtのドキュメントでは、LintとFormatの両方を、@nuxt/eslint-configを用いたESLintで実施することが推奨されている。
また、開発ツールとしてVS Codeを使用している場合は、ESLint拡張機能の利用が推奨されている。
そのため、@nuxt/eslint-configのReadmeに従ってESLintを設定する。
まず、必要なパッケージをインストールする。 Nuxt3はTypeScriptをサポートしているため、TypeScript用のconfigを入れる。
npm i -D eslint @nuxtjs/eslint-config-typescript次に、ESLintの設定ファイル.eslintrc.jsを作成し、以下の内容を記述する。
module.exports = {
root: true,
extends: ['@nuxtjs/eslint-config-typescript'],
}必要に応じて、ESLintのルールを変更する。
module.exports = {
rules: {
'comma-dangle': ['error', 'always-multiline'],
'for-direction': 'error',
indent: ['error', 2, { SwitchCase: 1, VariableDeclarator: 'first' }],
'max-len': ['error', { code: 80, ignoreUrls: true }],
quotes: ['error', 'single'],
semi: ['error', 'always'],
},
};その後、package.jsonにLint用のコマンドを追加する。
{
"scripts": {
"lint": "eslint --ignore-path .gitignore ./**/*.{js,ts,vue}",
"fix": "eslint --fix --ignore-path .gitignore ./**/*.{js,ts,vue}"
},
}これで、VS Codeのターミナルからnpm run lintでリントを実行、npm run fixで自動修正が行えるようになる。
しかし、毎回コマンドを打つのは面倒である。そのため、VS CodeにESLintの拡張機能をインストールし、以下のVS Codeの設定を追記して、ファイル保存時に自動でESLintを実行させる。
{
// Linter
"eslint.workingDirectories": [
"./app"
],
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true,
},
}さらに、Nuxtのドキュメントでは、ESLintでフォーマットするため、Prettierは無効にすることが推奨されている。そのため、Prettierによるフォーマットを避けるために、.prettierignoreですべてのファイルを指定する。.prettierignoreファイルを作成し、以下の内容を記入する。
**以上で、Nuxt3を用いてWebアプリを開発する際のVS Code環境に、ESLintが適切に設定される。
