从零开始配置 react + typescript（一）：dotfiles
内容提要
作者分享搭建 React + TypeScript 开发环境的最佳实践，计划分四篇：dotfiles、linters/formatter、webpack、第三方库集成。本篇介绍初始化项目，包括 git init、.gitignore、.editorconfig、.nvmrc、.npmrc、LICENSE、package.json、VSCode 配置、Travis CI 和 README，并完成首次提交。
延伸解读
dotfiles 的实用价值
作者指出 dotfiles 是以点开头的配置文件，虽然初看令人困惑，但每个都有其用途。例如 .gitignore 能避免 VSCode 监控 node_modules 导致性能问题；.editorconfig 可统一不同编辑器的代码风格；.nvmrc 帮助工具识别 Node 版本。这些配置共同提升了开发体验和团队协作效率。
editorconfig 与 prettier 的分工
文章解释了 editorconfig 主动作用于编辑器，而 prettier 是被动的命令行工具。两者风格不一致会导致手动格式化后提交时又被 prettier 修改。配置 editorconfig 并使其与 prettier 风格一致，可以避免重复格式化。作者提到 react 项目也同时使用两者，但若将 prettier 设为 VSCode 的默认格式化器，editorconfig 的作用就减弱了。
包管理器的选择考量
作者对比了 npm、yarn 和 cnpm。npm 设计不佳，yarn 有缓存和锁版本优势但 Windows 下常有 hash 错误，cnpm 下载快但 node_modules 混乱。作者因洁癖选择 yarn，并赞赏其 workspace 特性。此外，建议国内用户使用淘宝源，并在 .npmrc 中为 node-sass 等包设置镜像地址以顺利安装。
Node 版本与 CI 配置
作者建议使用最新的 LTS 版本 Node，因为非 LTS 版可能不被某些包（如 bcrypt）支持。通过 .nvmrc 文件指定版本，Travis CI 等工具会自动读取。文章还展示了简单的 .travis.yml 配置，用于自动化测试，并提到未来可能迁移到 GitHub Actions。
Q&A
为什么在初始化 React + TypeScript 项目时，第一步就要添加 .gitignore？
如果不添加 .gitignore，VSCode 的版本控制会监控项目中的所有文件，包括 node_modules 下的大量文件，导致 CPU 和内存占用过高。因此最好一开始就配置好 gitignore。
editorconfig 和 prettier 有什么区别？为什么需要同时配置？
editorconfig 主动作用于编辑器，配置后编辑器格式化代码时会遵循其风格；prettier 是被动的命令行工具，需要调用才会格式化。同时配置并保持风格一致，可以避免手动格式化后提交时又被 prettier 格式化导致结果不一致的问题。
如何为项目指定 Node.js 版本？.nvmrc 有什么作用？
使用 nvm 管理 Node.js 版本，通过命令 `node --version > ./.nvmrc` 生成 .nvmrc 文件。很多工具（如 Travis CI）会读取该文件来判断项目的 Node 版本，从而无需在 .travis.yml 中指定。建议使用最新的 LTS 版本。
国内开发时如何加速 npm 包的下载？.npmrc 可以配置什么？
可以使用 nrm 将 npm 源设置为淘宝源（`nrm use taobao`）。在 .npmrc 中还可以为需要下载二进制依赖的包（如 node-sass）设置镜像地址，例如 `SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass`，以方便协作开发时顺利安装。
在 VSCode 中如何配置项目级别的设置来提升开发体验？
可以创建 .vscode/settings.json 文件（jsonc 格式，允许注释），配置如禁用 CSS/SCSS 校验、使用本地 TypeScript 提供智能提示、排除搜索和监听文件、指定 prettier 作为各语言的默认格式化工具等。还可以通过 .vscode/extensions.json 推荐扩展。
如何为 React + TypeScript 项目配置 Travis CI 并添加构建状态徽章？
在项目根目录创建 .travis.yml，配置 language: node_js、cache: yarn、install: yarn、script: yarn test。然后在 README.md 中添加 Travis CI 的 badge，例如 `[](https://travis-ci.org/用户名/仓库名)`。
