React 环境搭建一

文章来源
https://lyreal666.com/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E9%85%8D%E7%BD%AE-react-typescript%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9Adotfiles/

.gitignore

配置 gitignore 建议使用 VSCode 的 gitignore 扩展。使用方式很简单：ctrl+shift+p 唤出命令面板，调用 Add gitignore 命令，然后选择不同类型项目的 ignore 配置，可以多次追加。

.editorconfig

通过配置 editorconfig，我们可以让多个开发人员，使用不同的编辑器时，代码格式化风格仍然保持一致。有些 IDE 例如 IDEA 是直接内置了 editorconfig 规范，有些编辑器如 VSCode 则需要安装对应的插件去支持。

alt + shift + f 格式化之后可以看到，VSCode 遵循了 editorconfig 的配置将代码的缩进格式化成了 3 个空格。在 IDEA 中通过 ctrl + alt + l 格式化，意料之中也是格式化成了三个空格，所以，editorconfig 可以让我们在使用不同的编辑器时格式化的保持风格一致。

本质上 editorconfig 和 prettier 的区别在于：editorconfig 是主动作用于编辑器的，你添加了 .editoronfig 文件，调用 VSCode 的格式化，格式化结果就是 .editorconfig 配置的风格。而 prettier 只是一个命令行工具，需要我们去调用它，它才会格式化代码，它本身是被动的。如果你不配置 editorconfig，那当用户修改了一个文件，调用 VSCode 快捷键手动格式化代码，提交时又被 prettier 格式化一遍，因为 VScode 内置的 formatter 和 prettier 风格不一样，导致我明明手动格式化了，怎么提交后还被修改了。配置 editorconfig ，并且使其和 prettier 的风格保持一致，就可以解决前面提到的多次格式化结果不一样的问题。事实上， react 就是这样干的。

建议安装 VSCode 扩展 EditorConfig for VS Code，安装之后可以通过命令 Generate .editorcofig 生成默认的配置，个人建议最后加上一行 end_of_line = unset，让行尾换行符直接遵守操作系统的换行符。

.nvmrc

nvm (node version manager) 是 node 的版本管理工具，在 windows 上使用 nvm 要安装另一个工具 nvm-windows。
.nvmrc 是 nvm 的配置文件，很多工具在判断项目的 node 版本的时候会读取这个配置，例如 travis CI。如果项目根路径有 .nvmrc 的话就不用在 .travis.yml 中指定 node 的版本了

.npmrc

众所周知，由于不可抗之力，国内无论是访问 github 还是下载 npm 包都是蜗速。对于国内用户而言，首先我们要做的一件事就是将 npm 源设置淘宝源。配置 npm 源建议使用 nrm：
全局安装 nrm，
yarn global add nrm
#或者使用 npm 安装，install 可以简写成 i
npm i -g nrm
设置使用淘宝源
nrm use taobao

.npmrc 是给 npm 用的配置文件，当然你如果使用 yarn，yarn 也会遵守 .npmrc 配置，虽然 yarn 有专门的配置文件 .yarnrc。
我们知道有些 npm 包在安装时是需要下载一些二进制依赖文件，其中有几个坑货像 node-sass，electron，bcrypt 还需要配置代理才能下载。为了让让别人合作开发项目的时候能顺利安装它们，我们可以在 .npmrc 中直接设置它们的镜像地址，添加 node-sass 的镜像地址：
#.npmrc
SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass

.package.json

package.json 是用来管理 npm 包的配置文件，生成 package.json 最简单的方式就是来一句 yarn init -y，直接就生成一个默认的 package.json。

因为我们这个项目不打算发布到 npm，所以 private 设置为 true。

settings.json

如果你使用的是 VSCode，那么可以添加 VSCode 的项目配置文件 .vscode/settings.json。新建 .vscode 文件夹并在其中创建 settings.json文件。虽然 settings.json 后缀名是 .json，但其实是 jsonc 格式的文件，jsonc 和 json 文件的区别就在于 jsonc 允许添加注释，jsonc 的这个c 就是 comment（注释）的意思嘛。暂时添加以下内容：
{
// stylelint 扩展自身的校验就够了
“css.validate”: false,
“less.validate”: false,
“scss.validate”: false,
// 使用本地安装的 TypeScript 替代 VSCode 内置的来提供智能提示
“typescript.tsdk”: “./node_modules/typescript/lib”,
// 指定哪些文件不参与搜索
“search.exclude”: {
“/node_modules": true,
“dist”: true,
“yarn.lock”: true
},
// 指定哪些文件不被 VSCode 监听，预防启动 VSCode 时扫描的文件太多，导致 CPU 占用过高
“files.watcherExclude”: {
"/.git/objects/": true,
"/.git/subtree-cache/": true,
"/node_modules/*/": true,
"/dist/**”: true
},
// 配置 VScode 使用 prettier 的 formatter
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[javascriptreact]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[typescript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[typescriptreact]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[json]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[jsonc]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[html]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[css]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[less]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[scss]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[yaml]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[markdown]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
}
复制代码我们还可以通过 .vscode/extensions.json 文件向用户推荐一些扩展，在用户打开该项目时如果有推荐的扩展未安装 VSCode 就会提示用户安装，也可以在扩展市场勾选过滤条件为只显示推荐的扩展查看：
// https://gist.github.com/tjx666/daa6317cf80ab5f467c50b2693527875
{
“recommendations”: [
“editorconfig.editorconfig”,
“dbaeumer.vscode-eslint”,
“esbenp.prettier-vscode”,
“stylelint.vscode-stylelint”,
“dsznajder.es7-react-js-snippets”,
“mrmlnc.vscode-scss”,
“yutengjing.view-github-repository”,
“yutengjing.open-in-external-app”
]
}