通常我们都是通过 Create React App(CRA)open in new window 来初始化项目，初始化后的项目已经包含了静态检查、格式化等工具的配置。我们今天不讲如何使用 CRA，我们来讲讲这些工具都是干什么的，同时给出通用的配置样例。

ESLint

ESLintopen in new window 是一款面向 JavaScript 的代码静态检查工具。通过 ESLint 我们可以避免编码过程中的一些低级错误，同时也能尽量保证代码的风格统一。ESLint 的配置通常保存在 .eslintrc.js 文件中。

这是一份 ESLint 的配置样例open in new window

Prettier

Prettieropen in new window 是一款代码格式化工具。通过 Prettier，我们可以保证整个代码库的编码风格是一致的。借助于编辑器的 "format on save" 功能，我们可以轻松的实现代码自动格式化。Prettier 的配置通常保存在 .prettierrc 文件中。

这是一份 Prettier 的配置样例open in new window

TypeScript

ESLint 是静态检查工具，而 JavaScript 是一门动态语言，很多错误只有在运行时才能发现，比如类型不匹配等。在大项目中，这种问题尤其突出。

TypeScriptopen in new window 作为一门静态类型语言，可以很大程度上帮助我们解决这方面的问题。特别是在重构代码的时候，当我们改变一个类型的声明时，TypeScript 会帮助我们找出所有使用这个类型的地方，并给出错误提示，我们可以逐一进行修改。

Husky

Huskyopen in new window 是一个辅助执行 git 钩子的工具。在执行 git commit 之前，通过 Husky 执行静态检查、代码格式化等任务，可以保证提交的代码都是符合规范的。可以在这里open in new window了解如何使用 Husky。

绝对路径导入

我们应该在项目中使用绝对路径导入，这样当我们需要移动文件的时候会非常方便，同时也可以避免迷惑的 ../../../Component 导入路径。

在 JavaScript 项目中我们可以这么配置：

// jsconfig.json
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}

在 TypeScript 项目中可以这么配置：

// tsconfig.json
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}

我们可以定义多个路径映射，但是通常 @/* 就已经够用了。src/components/MyComponent 可以这样导入 @/components/MyComponent。

关注微信公众号，获取最新推送~

加微信，深入交流~