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.