Express-Typescript-eslint-prettier_setup

express-typescript-eslint-prettier_setup

步骤 1 — 初始化项目

步骤 2 — 添加 TypeScript

步骤 3 — 添加 ESLint

步骤 4 — 添加 Prettier

express-typescript-eslint-prettier_setup

本文将帮助您快速搭建一个包含 TypeScript、ESLint 和 Prettier 的 Express.js 服务器。按照本文的步骤操作，即可获得样板代码，从而专注于应用程序的开发。

本项目将使用 yarn 包管理器，您也可以使用 npm 或任何其他包管理器。

步骤 1 — 初始化项目

首先创建项目目录，然后在终端中导航到要创建服务器的文件夹，并使用 yarn 进行初始化。

npm init -y

现在在您的项目中安装 Express。

npm i express

步骤 2 — 添加 TypeScript

我们需要在项目中添加一个 TypeScript 包，以便可以使用 TypeScript 编译器和其他相关工具。

npm i -D typescript

此命令会将 typescript 包作为开发依赖项添加到我们的项目中。

现在，我们需要添加 typescript 配置文件，为此我们将使用以下命令。

tsc --init

这将创建一个tsconfig.json文件，其中包含下图所示的默认编译器配置。

在tsconfig.json文件中，删除rootDir选项的注释并对其进行修改，将src设置为 typescript 的根目录。

"rootDir": "./src",

同样，对outDir选项也执行此操作。

"outDir": "./dist",

编译src文件夹中的.ts文件后，所有.js文件都将在此build文件夹中创建。

最后，在tsconfig.json文件的末尾，也添加这两个选项。这将告诉编译器需要编译哪些文件。

// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */

"skipLibCheck": true                                 /* Skip type checking all .d.ts files. */

"include": ["src/**/*.ts"],

"exclude": ["node_modules"],

现在为了检查一切是否正常运行，请在src文件夹内创建一个index.ts文件。在其中添加一些代码，然后在终端中运行它。您可以看到build 文件夹内创建了一个index.js文件。

如果你的代码中出现一些红色错误提示，那么你可能需要添加一个为 Node.js 运行时及其模块提供类型定义的包。

npm i -D @types/node

步骤 3 — 添加 ESLint

要添加 eslint，我们将安装下面列出的所需软件包。

npm i -D eslint @eslint/js @types/eslint__js typescript typescript-eslint

现在在项目目录的根目录下创建一个 eslint.config.mjs 文件。

npx eslint --init

此时您可能会发现您的版本eslint: "^9.14.0"已更改为eslint: "^9.15.0"

如果出现这种情况，请移除 eslint，npm remove eslint
然后重新安装：npm i -D eslint@version

现在将以下代码添加到其中。

{
    ignores: ["node_modules", "dist"],
    rules: {
      "no-unused-vars": "error",
    },
  },

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts}"] },
  { languageOptions: { globals: globals.node } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    ignores: ["node_modules", "dist"],
    rules: {
      "no-unused-vars": "error",
    },
  },
];

现在在终端中，你可以运行 npm eslint 命令。你可以看到 eslint 正在运行。

我们还可以在package.json文件中添加 eslint 脚本。

"scripts": {
    "lint": "eslint src/**/*.ts",
    "lint:fix": "eslint src/**/*.ts --fix"
  },

步骤 4 — 添加 Prettier

在你的项目中添加 prettier 包。

npm i -D --exact prettier

现在在项目根目录下创建.prettierrc并保存该文件。.prettierignore

文件中应包含 prettier 的基本配置.prettierrc。

{
  "semi": true,
  "singleQuote": true
}

另外，我们需要告诉 Prettier 哪些文件不要格式化，所以在里面.prettierignore包含以下内容。

dist
coverage

最后，我们还可以在package.json文件中添加 prettier 的脚本。

"format": "prettier . --write"

您可以在终端运行 yarn format 来格式化您的项目。