正合我意：2019 年使用 Jest、ESLint 和 Prettier 推出全新 TypeScript 项目

TypeScript 的座右铭是“它是可扩展的 JavaScript”，而这在启动项目时确实非常有效，因为你得做很多额外的工作。糟了！当你要搭建一个需要连续几个月使用的东西时，时间投入还不算太糟，但当你只是想启动一个代码库来学习、实验或解决一些 kata 问题时，一遍又一遍地把所有东西都启动起来并运行起来就有点麻烦了。我只想要那种漂亮的静态类型😭

如果您只想跳过所有设置并直接开始，您可以在 GitHub 上找到此入门模板。

安装依赖项

准备好安装这一系列依赖项。我正在使用npm：

$ npm init -y && npm i -D jest typescript ts-jest @types/jest eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-plugin-prettier eslint-config-prettier

TypeScript的入门指南要求全局安装，但我尽量避免这样做。我们将tsc在配置的其他位置添加一个脚本来访问 TypeScript 编译器。

添加配置

1.package.json

在标准npm init -y模板之外，进入您的package.json并添加一些更新，scripts以便轻松访问我们的测试运行器和 TypeScript 编译器。

  "scripts": {
    "test": "jest",
    "tsc": "tsc"
  },

2.jest.config.js

我们ts-jest在项目中使用它，以便可以直接在 Jest 中使用 TypeScript 的类型检查。快速运行一下$ npx ts-jest config:init即可得到以下结果：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

3.tsconfig.json

默认情况下，TypeScript 编译器会生成一个庞大的配置文件——它包含非常详尽的注释，因此输出不会过于繁琐。你可以运行 来构建一个配置文件$ npm run tsc -- --init，以下是我目前喜欢的设置方式：

{
  "compilerOptions": {
    "target": "ES2015",                       
    "module": "commonjs",                     
    "outDir": "build",                        
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "test"
  ]
}

4..eslintrc.js和.pretterrc

从今年年初开始，TypeScript 团队正式采用 ESLint 作为 TypeScript 领域的标准 linter。

如果你感兴趣的话，团队在他们的代码库中typescript-eslint讨论了同时解析 TypeScript 和 ESLint 所面临的挑战。这是一个非常有趣的话题！

将 ESLint 与 Prettier（我最喜欢的代码格式化程序）和 TypeScript 整合在一起可能是最复杂的一步。简单来说，我们需要配置 ESLint 忽略 Prettier 所关注的规则，然后将 Prettier 与我们的 Linter 整合在一起，这样它们就可以作为一个步骤一起运行。

我们还需要将 ESLint 配置指向我们的tsconfig.json文件并设置一些其他选项，例如sourceType和ecmaVersion设置。

看起来是这样的：

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
  parserOptions: {
    project: './tsconfig.json',
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    // Special ESLint rules or overrides go here.
  },
}

.prettierrc我只是想输入我喜欢的选项：

.prettierrc

trailingComma: "es5"
tabWidth: 2
semi: false
singleQuote: true

现在，ESLint 和 Prettier 强强联手，确保代码美观运行。我们终于可以开始写代码了！

你好世界！

我喜欢将代码分离到src目录中，并将测试放在 中test。这样就可以快速$ mkdir src test完成设置，并且我们之前的步骤会让 TypeScript 将src目录中的所有内容转换为 JavaScriptbuild目录npm run tsc。

但为了真正检查一切是否正常，需要进行一个典型的仪式：

test/sayHello.test.ts

import sayHello from '../src/sayHello'

test('sayHello can greet a user', (): void => {
  const user = { name: 'TypeScript' }
  expect(sayHello(user)).toBe('Hello TypeScript!')
})

然后为了完成这个任务（并检查一切是否正常），我们可以加入一些我们喜欢的 TypeScript 功能：

src/sayHello.ts

interface User {
  name: string
}

const sayHello = (user: User): string => `Hello ${user.name}!`

export default sayHello

$ npm test

 PASS  test/sayHello.test.ts
  ✓ sayHello can greet a user (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.206s
Ran all test suites.

太棒了！我们创建了一个很棒的小环境来使用 TypeScript。

并且，为了确保我们没有在 ESLint 配置中设置任何冲突的规则，我们可以运行快速检查：

$ ./node_modules/.bin/eslint --print-config src/sayHello.ts | ./node_modules/.bin/eslint-config-prettier-check
> No rules that are unnecessary or conflict with Prettier were found.

TypeScript 是一门非常有趣的语言，但如果能快速运行配置，上手体验会更加愉快。欢迎分享您配置 TypeScript 环境的技巧和窍门——我自己还在学习这门语言，所以很想知道其他人是如何设置他们的代码库的！

福利一：添加 Git Hook

JavaScript 生态系统的一个亮点在于，husky 和 ​​lint-staged 使得我们能够非常轻松地运行 linters 和测试套件，因为我们可以直接提交到 git，这让我们拥有了另一层舒适的、一致且经过测试的代码环境。虽然我们无需在项目中引入任何依赖项即可启动并运行这些功能，但我认为节省下来的时间绝对物有所值。

如果您运行$ npm i -D lint-staged husky这些功能，只需快速添加到我们的package.json功能中即可。在文件中的某个位置粘贴以下选项：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": ["eslint --fix", "jest --coverage --findRelatedTests", "git add"]
  }
 }

现在，当我们git commit处理文件时，我们将自动运行 linter 以及与暂存区内容直接相关的任何测试。

福利2：VS Code 设置

我发现使用 VS Code 的人通常品味都很好，但我倾向于在 VS Code 和 Vim 之间切换，这取决于我是想静下心来一会儿，还是只想快速打开一个文件做一些调整。VS Code 已经准备好承担我们很多繁重的工作，但由于我们已经在其他地方配置了很多，所以有必要让 VS Code 知道它可以稍微放松一下。

首先，获取VS Code 的 ES Lint 扩展。然后将以下内容添加到你的settings.json：

"eslint.autoFixOnSave": true,
"eslint.validate": [
    {
        "language": "javascript",
        "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "javascriptreact",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
],
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"[typescript], [javascript]": {
    "editor.formatOnSave": false
}

这告诉 VS Code 休息一下，ESLint 停止闲逛，并在 JavaScript 和 TypeScript 方面做一些工作，现在我们的 linting 配置应该会在我们保存时尽职尽责地启动并自动格式化。太棒了！

这篇文章对你有帮助吗？我非常欢迎大家提出意见和反馈，看看是否有可以更清晰或更好地解释的地方。也非常感谢大家的指正！