Nuxt 3 + ESLint + Prettier 环境建置

前言

大家好，我是 Ryan，这篇文章是我参与 iThome 2022 铁人赛 [Day 04] Nuxt 3 + TypeScript + ESLint + Prettier 环境建置的补充文章，不过也能当作一篇 Nuxt 3 的专案环境建置教学，主要补充了如何建置不具 TypeScript 的 ESLint 环境。

---

建立第一个 Nuxt 3 专案

Step 1. 使用 nuxi 建立第一个专案

可以参考 Nuxt 3 - 使用 nuxi 建立第一个专案

在我们使用完 Nuxt CLI 建立完专案后，其实就可以开始进行专案的开发，但是呢，相信不少人对于程式码的排版都有自己的风格，不同人的 Coding Style 肯定也都不一样，然而在团队协作需要标準或为了整体一致且美观下，Linter 就是你的好帮手，此外，TypeScript 在 Nuxt 3 已经有内建支援，我也建议及推荐使用 TypeScript，不过呢这篇文章主是针对不使用 TypeScript 的伙伴来建置环境，接下来将分享我自己在使用 Nuxt 3 开发时的 Linter 环境配置，包含了 ESLint 与 Prettier。

Step 2. 调整 tsconfig.json

在 tsconfig.json 档案中，添加 compilerOptions.jsx: "preserve"

{  "extends": "./.nuxt/tsconfig.json",  "compilerOptions": {    "jsx": "preserve"  }}

---

ESLint

ESLint 是一个 JavaScript Linter，它用来检查 JavaScript Coding Style 的工具，主要能用来统一风格，例如，缩排空白数、字串要用单引号或双引号等，也能帮你分析并找到语法错误，提醒你删掉多余程式码或遵照最佳的实践方式，确保程式码能具有一定的水準。在团队协作下 ESLint 更能让大家撰写程式码时遵照规则，确保程式码品质。ESLint 除了提供你可以使用大公司如 Google、Airbnb 等的规则配置来作为检查基準，也可以客製自订出自己喜好或团队共识的规则来分析与提醒你校正语法。

设置 ESLint 环境

Step 1. 安装 ESLint 套件

现在，我们至 Nuxt 专根目录下，开始安装 ESLint 相关套件，当然，你也可以挑自己喜欢的进行配置，不过在这里选择以 Nuxt 3 官方提供的 ESLint 设定来做标準配置，并添加支援 Vue 3 的 ESLint 设定。

npm install -D eslint @nuxtjs/eslint-config eslint-plugin-vue

Step 2. 配置 ESLint 设定档

安装完所需套件后，接下来我们就可以来设定 ESLint，我们在专案根目录下建立 .eslintrc.js 档案，内容如下：

module.exports = {  env: {    browser: true,    es2021: true  },  extends: ['@nuxtjs', 'plugin:vue/vue3-recommended'],  parserOptions: {    ecmaVersion: 13,    sourceType: 'module'  },  plugins: [],  rules: {    'no-undef': 'off'  }}

在我们建立的 .eslintrc.js 档案中 extends 可以是一个阵列，主要是来放置扩展 ESLint 的规则的配置，这里稍微注意一下顺序如下：

@nuxtjs/eslint-config: 对应 @nuxtjs/eslint-config 套件，由 Nuxt 官方提供用于 Nuxt 的 ESLint 规则配置。如果你是使用 TypeScript 可以使用 @nuxtjs/eslint-config-typescript。plugin:vue/vue3-recommended: 对应 eslint-plugin-vue 套件，由 Vue.js 官方提供的 ESLint 插件，包含了能配合 Vue SFC 语法及特性的规则，也可以参考官方文件，依据需求稍作调整。

因为目前 @nuxtjs/eslint-config-typescript 是基于 @nuxtjs/eslint-config 来扩展 TypeScript 的设定，而且 @nuxtjs/eslint-config 包含的是 Vue 2 的 ESLint 设定，所以我们需要再额外安装 eslint-plugin-vue 来扩展 Vue 3 规则配置。

此外 .eslintrc.js 档案中 rules 我们添加一项在 @nuxtjs/eslint-config-typescript 中有使用到的规则 'no-undef': 'off'，这条规则是用来解决因为 Nuxt 3 具有自动导入，但是在 Vue SFC 中没有 import 导致提示错误。

希望 Nuxt 3 官方日后能在提供插件扩充规则，以免我们关闭了 no-undef 这项规则，但有些不具自动导入的套件或元件就不会提示了。

用 ESLint 来尝试检查

首先，我们编辑 app.vue 档案内容如下：

<template>  <div>    <NuxtWelcome />  </div></template><script setup>const year = 2022const title = `${year} iThome 铁人赛`</script>

接着我们执行下列指令来使用 eslint 检查 app.vue 这个档案。

npx eslint -- app.vue

可以看到下图，ESLint 指出 app.vue 的问题，在第 9 行中的 title 这个变数已经宣告了却没有被使用。这个错误讯息正是依据上面我们的 ESLint 配置所被检视出来的，在 ESLint 规则定义好后，也有分成错误 (Error) 与警告 (Warning)，我们可以再依据 ESLint 给予的提示进行调整与修正。

我们尝试修正一下 app.vue 这个档案，在 template 中使用 title 这个变数。

<template>  <div>    <h1>{{ title }}</h1>  </div></template><script setup>const year = 2022const title = `${year} iThome 铁人赛`</script>

再一次执行 npx eslint -- app.vue，就会发现没有错误讯息产生啰！

在 package.json 设置脚本

我们除了逐个档案做检查，也可以设置脚本来检查整个专案目录下的程式码。

在 package.json 的 scripts 脚本中，我们可以新增一个指令 "lint": "eslint --ext .js,.vue ."，这样一来我们就可以使用如下指令来检查专案目录下的所有包含 .js, .vue 副档名的档案。

npm run lint

在 VS Code 中显示 ESLint 错误或警告

推荐大家安装 VS Code 的 Vue Language Features (Volar) 与 ESLint 插件：

Vue Language Features (Volar): 写 Vue 3 强力推荐必装的插件，包含了上色、语法提示、编辑器快速分割等强大功能，而且也是 Nuxt 3 推荐的编辑器插件。ESLint: 让你在编辑器开发时就能有指令检查，更可以做到全域或特定工作区开启储存或快捷键自动修正程式码等设置。

安装完毕后，建议重启 VS Code 来重新载入相关设定。

现在，你会发现在 VS Code 中编辑程式的过程中，如果有 ESLint 检查到的错误或建议，就会出现红色或黄色的波浪底线，当滑鼠指标移动至波浪底线处，就会发现有个小视窗提示你错误或警告的原因是什么。

在 VS Code 中自动修正 ESLint 错误或警告

在某些情况，ESLint 可以帮助你做自动修正程式码，甚至在存挡时将错误部分直接进行修正。

手动快速修正

我们可以在编辑器将滑鼠指标移动至波浪底线点击「快速修复 (Quick Fix)...」，你也可以使用编辑器建议的快捷键 Command + . (macOS)，此时就能选择要修复或关闭略过错误原因；这里我们选择「Fix all auto-fixable problems」，来修复所有可能可以被自动修复的问题。

存挡自动修正

除了手动快速修正外，你也可以透过添加 VS Code 的设定档，如专案目录下新增 .vscode/settings.json，

{  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true  }}

当我们编辑完程式码，并保存档案或快捷键存挡 Command + S (macOS)，就会触发 ESLint 自动修复啰。

---

Prettier

Prettier 是程式码格式化的工具，也可以与 ESLint 进行搭配，ESLint 与 Prettier 就能各司其职将 JaveScript 与 Vue 等档案依照配置进行检查与排版。

设置 Prettier

Step 1. 安装 Prettier 套件

我们直接安装 prettier、eslint-config-prettier 与 eslint-plugin-prettier 三个套件。

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

Step 2. 配置 Prettier 设定档案

我们在专案根目录下建立 .prettierrc.js 档案，内容如下，这些配置都可以自己设定来配合 ESLint，更多选项或说明可以参考 Prettier 官方说明文件。

module.exports = {  printWidth: 100,          // 每行文字数量达 100 字元就换到新的一行  semi: false,              // 每个语句的结尾不需要分号  singleQuote: true,        // 字串使用单引号，而不是双引号  trailingComma: 'none'     // 如 Object、Array 内的元素不需要尾随逗号}

Step 3. 配置 ESLint 设定档案

我们在安装时多装了两个 ESLint 相关套件，分别为 eslint-config-prettier 及 eslint-plugin-prettier。

对此我们需要将其添加至 ESLint 的 .eslintrc.js 设定档内，在 extends 添加字串 prettier 表示使用 eslint-config-prettier 扩充配置，主要用来防止 Prettier 排版与 ESLint 发生冲突，让其可以用来禁用 ESLint 的格式化；接着在 plugins 中添加 prettier 字串表示使用 eslint-plugin-prettier 套件扩充，让 ESLint 可以提示我们格式有错误的地方。

为了让 Prettier 与 ESLint 有更好的搭配，在 rules 的参数中记得添加 'prettier/prettier': 'error' 让 ESLint 可以提示 Prettier 的排版异常提示供我们做修正，至此 .eslintrc.js 设定档应该会如下。

module.exports = {  env: {    browser: true,    es2021: true  },  extends: ['@nuxtjs', 'plugin:vue/vue3-recommended', 'prettier'],  parserOptions: {    ecmaVersion: 13,    sourceType: 'module'  },  plugins: ['prettier'],  rules: {    'no-undef': 'off',    'prettier/prettier': 'error'  }}

Step 4. 安装 VS Code 的 Prettier 插件

Prettier - Code formatter: 提供我们做程式码的格式化，最重要的是来协助我们自动载入 .prettierrc.js 配置。

安装完毕后，建议重启 VS Code 来重新载入相关设定。

小结

恭喜你，我们完成了 Nuxt 3 的专案建置及 TypeScript 与 Linter 的配置，虽然配置有些繁琐，但写程式的风格有个标準及规则依循，肯定能协助你写出令人讚叹的完美的程式码。

---

感谢大家的阅读，欢迎大家给予建议 ：）

此外我正在参与 iThome 铁人赛，主题是 Nuxt 3 学习笔记，
如果对这个 Nuxt 3 系列感兴趣，可以订阅接收通知，也欢迎分享给喜欢或正在学习 Nuxt 3 的伙伴。

範例程式码

Nuxt 3 配置 ESLint 及 Prettier

参考文件

Nuxt ESLint Config