Nuxt3学习笔记（三） Nuxt 3 + TypeScript + ESLint + Prettier 环境搭建

我是土豆
4,649 阅读6分钟

前言

在我们使用完 Nuxt CLI 建立完项目后，其实就可以开始进行项目的开发，但是呢，相信不少人对于代码的排版都有自己的风格，不同人的 Coding Style 肯定也都不一样，然而在团队协作需要标准或为了整体一致且美观下，Linter 就是你的好帮手，此外，TypeScript 在 Nuxt 3 已经有内置支持，我也建议及推荐使用 TypeScript

接下来将分享我自己在使用 Nuxt 3 开发时的 Linter 环境配置，包含了 TypeScript、ESLint 与 Prettier。

TypeScript

Nuxt 3 已经有内建支援 TypeScript，一些 TypeScript 设定都可以在专案根目录下配置 tsconfig.json，例如，在开发过程中针对 TypeScript 我会在开发环境下启动类型检查，可以参考以下进行配置。

设置类型检查

Step 1. 安裝 VS Code 插件

首先，推薦大家安裝下列兩個 VS Code 插件，

Step 2. 安裝 Vue 类型检查依赖

npm install -D vue-tsc

Step 3. 调整 nuxt.config.ts 设置

根据 nuxt3 官方文件说明，我们可以在 nuxt.config.ts 中，设置 typescript.typeCheck: true 来让开发时期能执行类型检查。

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

Step 4. 重新启动开发环境服务

我们重新执行 npm run dev -- -o 来重启开发环境的服务，这样就配置完成啰！

看看效果

如果我们在 app.vue 写了以下程序代码：

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script lang="ts" setup>
const year: number = '2022'
const title: string = `${year} 2023 Nuxt3`
</script>

可以发现终端 (Terminal) 就指出了一个错误的类型指派，并告知你有错误代码的位置。

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-typescript eslint-plugin-vue

Step 2. 配置 ESLint 设定档

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

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:vue/vue3-recommended'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: [],
  rules: {},
  overrides: [
    {
      files: [
        '**/pages/**/*.{js,ts,vue}',
        '**/layouts/**/*.{js,ts,vue}',
        '**/app.{js,ts,vue}',
        '**/error.{js,ts,vue}'
      ],
      rules: {
        'vue/multi-word-component-names': 'off'
      }
    }
  ]
}

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

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

将特定目录下的文件关闭 vue/multi-word-component-names 规则，以此来因应 nuxt 的开发避免提示错误。

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

用 ESLint 来尝试检查

首先，我们编辑 app.vue 文件内容如下：

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script lang="ts" setup>
const year: number = 2023
const title: string = `${year} Nuxt3.js`
</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 lang="ts" setup>
const year: number = 2023
const title: string = `${year} Nuxt3`
</script>

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

在 package.json 设置脚本

我们除了逐个文件做检查，也可以设置脚本来检查整个项目目录下的代码。

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

npm run lint

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

推荐大家安装 VS Code 的 ESLint 插件：

  • ESLint: 让你在编辑器开发时就能有命令检查，更可以做到全局或特定工作区开启储存或快捷键自动修正代码等设置。

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

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

在 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

image.png

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/eslint-config-typescript', 'plugin:vue/vue3-recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  },
  overrides: [
    {
      files: [
        '**/pages/**/*.{js,ts,vue}',
        '**/layouts/**/*.{js,ts,vue}',
        '**/app.{js,ts,vue}',
        '**/error.{js,ts,vue}'
      ],
      rules: {
        'vue/multi-word-component-names': 'off'
      }
    }
  ]
}

Step 4. 安装 VS Code 的 Prettier 插件

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

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

小结

恭喜你，我们完成了 TypeScript 与 Linter 的配置，虽然配置有些繁琐，但写代码的风格有个标准及规则依循，肯定能协助你写出令人赞叹的完美的代码。

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

如果对这个 Nuxt 3 系列感兴趣，可以关注一下小编，也欢迎分享给喜欢或正在学习 Nuxt 3 的伙伴。

avatar
文章
阅读
粉丝