Nuxt3 ESLint + Prettier 配置
- December 2, 2022
介紹如何在 Nuxt3 中整合 ESLint 和 Prettier 以達到最佳的開發體驗。文章詳細指導安裝和配置 vue-tsc 進行類型檢查，並展示如何結合 vite-plugin-eslint 在網頁上顯示錯誤。還提供了完整的速寫和配置方法，幫助開發者快速設置和開始使用 Nuxt3。
Vue-tsc
為了讓開發時可以做 type check，需要先安裝 vue-tsc，另外這個 type check 只會在 terminal 顯示錯誤，要在網頁上顯示要在額外安裝 vite-plugin-eslint
yarn add -D vue-tsc在 nuxt.config.ts 中 開啟 typeCheck
export default defineNuxtConfig({ typescript: { typeCheck: true, },});ESLint & Prettier
參考 typescript.nuxtjs 及 Nuxt ESLint Config 進行配置 ESLint
yarn add -D @nuxtjs/eslint-config-typescript eslint typescript vite-plugin-eslintPrettier
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier依照需求新增 .eslintrc.js
module.exports = { extends: ["@nuxtjs/eslint-config-typescript", "plugin:prettier/recommended"], rules: { "vue/multi-word-component-names": "off", },};至 nuxt.config.ts 新增 vite-plugin-eslint
import eslint from "vite-plugin-eslint";
// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({ vite: { plugins: [eslint()], },});另外 plugin:prettier/recommended 等同於以下，可以減少很多配置
{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" }}
依照需求新增 `.prettierrc````json{ "semi": false, "singleQuote": true, "printWidth": 80}速寫及完整配置
yarn add -D @nuxtjs/eslint-config-typescript eslint typescript vite-plugin-eslint prettier eslint-config-prettier eslint-plugin-prettierimport eslint from "vite-plugin-eslint";
// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({ typescript: { typeCheck: true, }, vite: { plugins: [eslint()], },});module.exports = { extends: ["@nuxtjs/eslint-config-typescript", "plugin:prettier/recommended"], rules: { "vue/multi-word-component-names": "off", },};// .prettierrc (please remove this line){ "semi": false, "singleQuote": true, "printWidth": 80}
