使用ESLint和Prettier在TypeScript中进行标记。

作为开发者，我们通常会在项目开始时添加一些配置和脚本来进行提示，然后对代码库的语法和风格进行格式化和类型检查。

当我们在一个团队中工作时，这个过程就更加重要了，这样，当涉及到代码库的语法和风格时，每个人都在同一页上。而且，为了确保我们的应用程序在生产时没有错别字或错误，我们应该沿途检查我们的代码。

这就是格式化和提示工具以及TypeScript可以帮助我们自动化这一过程的地方。

让我们来学习如何让这些工具在我们的项目中一起工作。在这篇文章中，我们将专注于使用ESLint和TypeScript，我们还将看到如何添加Prettier和其他工具，为我们自动完成这一过程。

编译TypeScript代码

TypeScript被称为JavaScript的超集，在编译时帮助我们进行静态类型检查。使用TypeScript，你将获得更好的开发体验，这得益于编辑器中的自动完成。TypeScript还能帮助你在大型代码库中保持代码的可维护性。

首先，我们需要一个编译器，将TypeScript代码转化为JavaScript，这样浏览器就能读取它。让我们用你最喜欢的软件包管理器安装一个依赖项。

#npm
npm install --save-dev typescript

#yarn
yarn add typescript --dev 

安装后，你会看到你的package.json 文件的devDependencies 属性的一个新条目为。

{
  "name": "Linting TypeScript with ESLint",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^4.4.3"
  }
}

如果你想验证它是否已经安装，你可以运行这个来检查版本。

npx tsc --version
# Version 4.4.3

现在让我们创建TypeScript代码，看看编译后的代码。

// src/index.ts
const favoriteFruits: string[] = ["apple", "strawberry", "orange"];

function addFruit(fruit: string) {
  favoriteFruits.push(fruit);
}

然后，我们可以使用命令行开始编译并运行。

npx tsc src/index.js

紧接着，我们会看到一个新生成的JS文件，位于你的TypeScript文件的同一目录。

// src/index.js
var favoriteFruits = ["apple", "strawberry", "orange"];

function addFruit(fruit) {
    favoriteFruits.push(fruit);
}

默认情况下，编译器将创建的JavaScript文件与你的TypeScript源文件并排创建。这不是一个好主意，因为你最终会把你的构建结果和你的源代码混在一起。

所以，让我们改变一些默认的编译器设置，从我们想把编译后的代码放在哪里开始，针对哪一个JavaScript级别进行转写（默认：ECMAScript 3），以及我们想编译哪些文件。

有两种方法可以创建你的Typescript编译器设置。

1. 在命令行中调用npx tsp --init ，它将生成一个默认的 TS 配置文件
2. 在项目的根目录下创建一个名为tsconfig.json 的文件，并包含你的设置。

在这种情况下，我将手动创建TS编译器设置。然而，我鼓励你去选择第一个选项。它将创建带有一些推荐选项的配置文件，所有的选项都有注释，解释了它们的作用。

你可以根据自己的需要修改这些设置。在这里可以看到支持的编译器选项的完整列表，你可以在TypeScript操场上玩一玩。

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist", // where to put the compiled JS files
    "target": "ES2020", // which level of JS support to target
    "module": "CommonJS", // which system for the program AMD, UMD, System, CommonJS

    // Recommended: Compiler complains about expressions implicitly typed as 'any'
    "noImplicitAny": true, 
  },
  "include": ["src"], // which files to compile
  "exclude": ["node_modules"], // which files to skip
}

恭喜你！现在，你可以开始编写TypeScript了。现在，你可以通过运行npx tsc ，开始编写TypeScript。

为了使它更容易运行，你可以把它包含在你的脚本中。转到package.json ，使用--watch 标志添加它，以观察文件的变化。请记住，compilerOptions 中描述的所有内容都可以在命令行中使用 CLI 标志传递。

// package.json
{
  "name": "Linting TypeScript with ESLint",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^4.4.3"
  },
  "scripts": {
    "dev": "tsc --watch"
  }
}

什么是ESLint？

ESLint是最受欢迎的提示工具之一，它将分析你的代码，不仅可以发现潜在的bug，而且可以通过定义编码规范，然后自动执行这些规范来提高你的代码质量。让我们看看如何将ESLint安装到我们的TypeScript项目中。

首先，安装以下依赖项到你的devDependencies:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

• eslint: ESLint核心库
• @typescript-eslint/parser ：分析器，允许ESLint理解TypeScript代码
• @typescript-eslint/eslint-plugin: 带有一套推荐TypeScript规则的插件

类似于Typescript编译器的设置，你可以使用命令行使用ESLint的--init 标志来生成一个配置文件，或者手动创建它。无论哪种方式，都必须要有你的ESLint配置文件。

让我们开始使用CLI。

npx eslint --init

接下来，你会看到一些问题，让你根据自己的喜好来调整。

• 你想如何使用ESLint？
• 你的项目使用什么类型的模块？
• 你的项目使用哪个框架？
• 你的项目是否使用TypeScript？
• 你的代码在哪里运行？
• 你想如何为你的项目定义一个风格？

如果你已经有了你喜欢的设置，你可以在根目录下创建一个.eslintrc 文件，然后把它粘贴到你的配置中。

使用ESLint进行刷新

使用下面的启动配置，探索你的ESLint设置的完整规则列表。

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {

  },
  "env": {
    "browser": true,
    "es2021": true
  },
}

• parser: 这告诉ESLint在分析代码时要通过分析器运行代码
• parserOptions: 指定你要支持哪些JS语言选项，比如你要使用的ECMAScript语法版本
• plugins ：在这里你可以定义要使用的插件
• extends ：告诉ESLint要从什么配置开始扩展。顺序很重要，因为在任何冲突的配置中，最后的扩展选项将覆盖之前的选项。
• env ：你的代码将在哪些环境中运行。

当我们添加一个ESLint规则时，我们要从extends列表中定义的配置中覆盖它。让我们添加几个规则来看看它是如何工作的。

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
  },
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],

  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    // to enforce using type for object type definitions, can be type or interface 
    "@typescript-eslint/consistent-type-definitions": ["error", "type"], 
  },

  "env": {
    "browser": true,
    "es2021": true
  }
}

简而言之，我们应用的第一条规则被赋值为error ，但error 并不是我们唯一可以赋值的值--我们有三个选项。

• off 或0: 完全关闭该规则
• warn 或1: 将该规则视为警告，但在运行interter时不会失败。
• error 或2: 将该规则作为错误处理。在运行linter时，它将失败。

注意：在一些ESLint规则中，比如第二条规则，你需要设置额外的选项，这样你就可以使用数组字面语法。

现在你可以在你的package.json 中添加一个lint 脚本。我添加了一个ext 标志，用于指定JavaScript文件的扩展名，这样我们就可以包括TypeScript文件的扩展名（默认情况下，是.js ）。

// package.json
{
  "name": "Linting TypeScript with ESLint",
  "version": "1.0.0",
  "scripts": {
    "dev": "tsc --watch",
    "lint": "eslint --ext .js,.ts .",
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "typescript": "^4.4.3"
  }
}

你会发现有些文件根本不需要被提示，比如你的dist 文件夹，所以你可以通过创建一个.eslintignore 文件并添加你想忽略的文件夹或文件来防止被提示。

node_modules
dist

这往往与你的.gitignore 文件内容相匹配，所以，为了有一个单一的真理来源，你可以使用--ignore-path 标志创建一个脚本。

// package.json
{
  // ...
  "scripts": {
    "lint": "eslint --ignore-path .eslintignore --ext .js,.ts ."
   },
  // ...
}

现在你可以开始行动了!我建议你把ESLint整合到你使用的任何编辑器中。如果是VSCode，去扩展区安装ESLint扩展。

一旦你安装并启用了它，你就会看到你的代码中出现了哪些错误，而不用运行用红线划线的脚本。

注意：你会看到ESLint的错误信息是在线打印在编辑器中的，那是另一个叫Error Lens Extension的扩展，它高亮显示整个行，并立即显示错误信息，而不是用指针悬停来查看。

ESLint的另一个特点是，当你悬停并右键点击Quick fix ，或者你点击command 和+ ，它可以自动修复代码。

手动修复所有破坏了你的规则的错误可能很乏味，但你可以运行下面的命令，告诉ESLint修复它能修复的。

npm run lint -- --fix

提示：你可以使用双破折号-- ，为npm 脚本传递参数，这些参数将作为npm 执行的脚本的参数接收。

npm run <command> [-- <args>]

什么是Prettier？

Prettier是一个著名的代码格式化器，它支持各种不同的编程语言，可以帮助我们避免在手动格式化上花费时间，并设置我们的代码风格。

现在，同时使用ESLint和Prettier是很常见的，所以让我们把Prettier添加到我们的项目中。

npm install --save-dev prettier

与ESLint相比，Prettier不需要一个配置文件，这意味着你可以直接运行和使用它。如果你想设置你的配置，你需要创建一个叫做.prettierrc 的文件，在那里你可以定义你的格式选项。

你可以看一下格式选项的完整列表，并可以在Prettier Playground中玩一玩。

// .prettierrc
{
  "semi": false, // Specify if you want to print semicolons at the end of statements
  "singleQuote": true, // If you want to use single quotes
  "arrowParens": "avoid" // Include parenthesis around a sole arrow function parameter
}

接下来，我们将在命令行中使用Prettier开始格式化我们的代码。

npx prettier --write src/index.ts
# src/index.ts 37ms

我添加了一个write 标志来覆盖TypeScript文件，否则，它不会覆盖它，只会在你的CLI中记录格式化的代码。

让我们把Prettier命令添加到我们的脚本中，就像我们为TypeScript和ESLint做的那样。让我们也支持所有以.ts 、.js 、.json 结尾的文件，并忽略与gitignore 相同的文件和目录（或者你可以创建一个文件.prettierignore ）。

// package.json

{
  // ...
  "scripts": {
    "dev": "tsc --watch",
    "lint": "eslint --ext .js,.ts .",
    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\""
  },
  // ...
}

现在，你可以运行npm run format 命令来格式化和修复你所有的代码。但是，如果我们想在保存你的文件后立即格式化代码呢？

这是有可能的!进入扩展，寻找Prettier扩展，确保它被启用。一旦它被启用，我们需要在VSCode中配置一些东西。

你可以打开你的命令调色板(Command +Shift +P)，寻找Preferences: Open Settings (JSON) 。然后你需要改变你的编辑器的默认格式，并添加一个额外的配置来在你保存文件时格式化代码。

// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  ...
}

在使用ESLint和Prettier工作时避免冲突

当Prettier和ESLint规则重叠时，你可能会遇到一个问题。你会尝试自动格式化你的代码，但它会显示你与ESLint的一些冲突。

这里最好的解决办法是使用eslint-config-prettier来禁用所有与代码格式化无关的ESLint规则，因为Prettier已经很擅长这个了。

npm install --save-dev eslint-config-prettier

安装好后，让我们到.eslintrc 文件中，在你的扩展列表的末尾prettier ，以禁用其他插件以前的任何规则。

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
  },
  "plugins": ["@typescript-eslint"],
  // HERE
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],

  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
  },

  "env": {
    "browser": true,
    "es2021": true
  }
}

这就是了!现在你知道如何有效地使用这些静态测试工具了。有一些自动化的特定任务，如提示、格式化和类型检查，是非常好的。

总结

一起使用TypeScript和ESLint可以提高我们对代码的信心。它可以帮助我们防止bug，并且从长远来看可以节省我们的时间。我建议你尝试使用TypeScript和ESLint，以便在下次构建很酷的东西时，为你和你的整个团队提供更好的开发者体验。

The post Linting in TypeScript using ESLint and Prettierappeared first onLogRocket Blog.