投稿日: 2024年7月14日
※eslintrcとPrettierを導入していない場合は、eslintrcとPrettierの設定を削除する手順をスキップして、Flat ConfigとESLint stylisticの導入手順のみ参照ください。
https://eslint.org/blog/2023/10/flat-config-rollout-plans/
https://eslint.nuxt.com/packages/module
https://eslint.nuxt.com/packages/module
1. Nuxt の公式から提供されている ESLint Moduleをインストールします。
npm install --save-dev @nuxt/eslint eslint
2. nuxt.config.tsに以下を追加します。
export default defineNuxtConfig({
modules: [
'@nuxt/eslint'
],
})
1. 不要なライブラリを削除します。
npm uninstall @nuxtjs/eslint-config-typescript
2. package.jsonから以下の不要なライブラリを削除します。
"devDependencies": {
"@nuxtjs/eslint-config-typescript": "^12.1.0",
},
3. eslintrcファイルを削除します。以下は削除対象のeslintrcファイルの中身の一例です。
{
"extends": [
"@nuxtjs/eslint-config-typescript"
],
"rules": {
"no-console": "off"
}
}
4. eslint.config.mjsをプロジェクトのルートディレクトリに作成して以下の内容で保存します。VSCodeを再起動し、ルールが適用されていることを確認します。
// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(
{
// 適用するファイルを指定
files: ['**/*.js', '**/*.ts'],
// 除外するファイルを指定。--ignore-pathで指定されていたものを指定
ignores: ['**/*.log*', '.cache/**'],
// 適用するルールを指定
rules: {
'no-console': 'off',
},
},
// 特定のファイルに別のルールを指定したい場合
{
files: ['**/*.vue',],
rules: {
'no-console': 'error'
}
}
)
※eslint.config.mjsで設定できるオプションの詳細は以下を参照ください。
https://eslint.org/docs/latest/use/configure/configuration-files
※ignoresにはデフォルトで以下が指定されています。ソースコードはこちらを参照ください。
5. npmスクリプトを以下の内容で修正します。
【修正前】
"scripts": {
"lint": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
},
【修正後】
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
},
※--ignore-pathオプションは削除されたため、eslint.config.mjsのignoresに--ignore-pathオプションで指定していたファイル・ディレクトリを指定します。--ignore-pathに.gitignoreを指定していた場合は.gitignoreファイルに記載のファイル・ディレクトリをeslint.config.mjsのignoresに指定します。
6. VSCodeのESLint拡張機能でFlat Configを有効にするために .vscode/setting.jsonに以下を追加して保存します。
{
"eslint.experimental.useFlatConfig": true
}
※ESLint v9.xのサポートはESLint VS Code extension (vscode-eslint) v3.0.10で追加されたため、v3.0.10以降をインストールしている場合は上記の設定は不要です。
1. 不要なライブラリを削除します。
npm uninstall prettier eslint-config-prettier eslint-plugin-prettier
2. package.jsonから以下の不要なライブラリを削除します。
"devDependencies": {
"eslint-plugin-prettier": "^5.1.0",
"eslint-config-prettier": "^8.3.0",
"prettier": "^2.5.1",
},
3. prettierrcファイルを削除します。以下は削除対象のprettierrcファイルの中身の一例です。
{
"indent": 2,
"quotes": 'single',
"semi": false
}
4. nuxt.config.tsに以下を追加します。VSCodeを再起動し、ルールが適用されていることを確認します。
// nuxt.config.ts
export default defineNuxtConfig({
eslint: {
config: {
stylistic: {
indent: 2,
quotes: 'single',
semi: false,
},
}
}
})
1. .vscode/setting.jsonに以下を追加して保存します。保存時にフォーマットが実行されていることを確認します。
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
以上で全ての手順は完了になります