Cài đặt ESLint + Prettier cho Nuxt 3

Cho tới thời điểm publish bài viết, phần document setup ESLint trên trang https://v3.nuxtjs.org chưa đầy đủ. Bài viết này note lại cách setup ESLint + Prettier cho Nuxt.js v3, các command line chạy ngay sau khi init project:

npx nuxi init nuxt-app

1. Cài đặt dependencies

yarn add -D @nuxtjs/eslint-config-typescript eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier prettier typescript

2. Thêm NPM script

Thêm script để thuận tiện khi check eslint.

"scripts": { // ... "lint": "eslint . --ext .ts,.vue"
}

Sử dụng khi check eslint:

yarn lint

3. Config ESlint + Prettier

Tạo các file config cho ESLint + Prettier.

{ "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "@nuxtjs/eslint-config-typescript", "plugin:nuxt/recommended", "plugin:prettier/recommended" ], "rules": { "vue/multi-word-component-names": 0, // "vue/no-multiple-template-root": 0, "prettier/prettier": ["error", { "singleQuote": true, "semi": false }] }
}

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log* .output
.nuxt
node_modules
dist
*.local
public # Editor directories and files
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw? 

{ "tabWidth": 2, "singleQuote": true, "semi": false
} 

Done.