create-react-app 编辑器配置
前言
如果配置正确，Create React App会提供很多工具来改善编辑体验。
本文介绍一些技巧，可以最大程度的提高您的生产力，你只需要正确的配置它们就可以了。
语法高亮
如今，许多流行的编辑器都支持开箱即用的ECMAScript新版本+语法高亮显示功能；
而有些编辑器则需要安装其他扩展。
这部分帮助您高亮显示语法。
如果您正在寻找更高级的集成，则可能需要看一下《Babel安装指南》。
提示：上面的屏幕截图中使用的字体是 FiraCode。
Atom
安装 language-babel 软件包，然后按照 说明 进行操作。
Sublime Text 3
首先，安装Package Control。然后从“程序包控制”菜单安装Babel程序包，并按照说明 进行操作。
Vim
安装 vim-javascript 插件，它将为Vim带来改进的语法高亮显示和对JavaScript的缩进支持。
另一个选择是将 yajs.vim 与 es.next.syntax 一起使用。
Visual Studio Code
安装 vscode-language-babel 扩展并按照说明进行操作。
似乎还有另一种方法可以使语法高亮显示正常工作，您可以在 Visual Studio Code文档 中了解有关它的更多信息。
WebStorm
WebStorm现在附带对ES2015 +的支持，而无需安装任何其他扩展。但是，您可能需要启用它 。
在编辑器中显示Lint输出
适用条件
- 注意：此功能可用于
react-scripts@0.2.0或更高版本。 - 对于具有
react-scripts@2.0.3及更高版本的新创建项目，它开箱即用。 - 它也仅适用于
npm 3.X或更高版本。
一些编辑器，包括Sublime Text，Atom和Visual Studio Code，都提供了ESLint的插件。
这些不是必需的，看个人喜好吧，您应该在终端以及浏览器控制台中看到linter输出。如果您希望将结果显示在编辑器中，请确保安装了ESLint插件/扩展。
请注意，即使您自定义ESLint配置，这些更改也只会影响编辑器集成。
它们不会影响终端和浏览器内的lint输出。
这是因为Create React App故意提供了最小的规则集来查找常见错误。
如果要强制执行的编码风格为您的项目，可以考虑使用更 pretter ，而不是ESLint样式规则。
实验性：扩展ESLint配置
我们认识到在某些情况下需要进一步的自定义。现在可以通过将EXTEND_ESLINT环境变量设置为来扩展基本ESLint配置true。
有关可用环境变量的更多信息，请参见高级配置。
请注意，任何设置为“error”的规则都将阻止项目的构建。
有几件事要记住：
- 我们强烈建议扩展基本配置，如果你删除它可能会导致难以发现的问题。
- 使用TypeScript时，您需要为仅以 TypeScript文件为overrides目标的规则提供一个对象。
在以下示例中：
- 基本配置已通过共享的ESLint配置扩展，
- 设置了一条适用于所有JavaScript和TypeScript文件的新规则，并且
- 设置了仅针对TypeScript文件的新规则。
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
在编辑器中调试
当前仅 Visual Studio Code 和 WebStorm 支持此功能。
Visual Studio Code 和 WebStorm 支持使用Create React App进行开箱即用的调试。
这使您作为开发人员能够在不离开编辑器的情况下编写和调试React代码，最重要的是，它使您能够拥有连续开发的体验工作流(因为您不必在工具之间进行切换)。
Visual Studio Code
您需要安装最新版本的 VS Code 和 Debugger for Chrome 扩展。
然后将下面的代码添加到您·launch.json文件中，并将其放在.vscode应用程序根目录下的文件夹中。
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
注意：如果您通过HOST或PORT调整了环境变量，则URL可能会有所不同。
通过运行 npm start 来启动您的应用程序，并通过按F5或单击绿色的调试图标开始在VS Code中进行调试。
现在，您可以在编辑器中编写代码，设置断点，更改代码以及调试新修改的代码。
如果 VS Code调试有问题，请参阅其故障排除指南。
WebStorm
您将需要安装 WebStorm 和 JetBrains IDE Support Chrome扩展。
在WebStorm菜单中，Run选择Edit Configurations…。然后单击并选择 JavaScript Debug。
粘贴 http://localhost:3000 到 “URL” 字段中并保存配置。
注意：如果您通过HOST或PORT调整了环境变量，则URL可能会有所不同。
通过运行 npm start 来启动您的应用程序，然后在macOS上 ^D 或 Windows和Linux上按 F9，或者单击绿色的调试图标在WebStorm中开始调试。
自动格式化代码
Prettier是一个代码格式化程序，支持JavaScript，CSS和JSON。
使用Prettier，您可以自动格式化您编写的代码，以确保项目中的代码样式都是一致的。
有关更多信息，请参见Prettier的GitHub页面，并查看此页面以查看实际操作。
Git仓库提交时格式化代码
要在git中进行提交时格式化代码，我们需要安装以下依赖项：
npm install --save husky lint-staged prettier
或者，您可以使用yarn：
yarn add husky lint-staged prettier
husky使有可能像gpmooks一样使用npm脚本。lint-staged允许我们在git中的暂存文件上运行脚本。请参阅有关Lint-staged的博客文章，以了解有关它的更多信息。prettier是我们将在提交之前运行的JavaScript格式化程序。
现在，通过在项目根目录package.json中添加下面几行代码，就可以确保每个文件的格式正确。
将以下字段添加到该package.json部分：
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
接下来，我们在中添加一个'lint-staged'字段 package.json，例如：
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+ "prettier --write"
+ ]
+ },
"scripts": {
上面的+号仅仅是为了方便演示，使用时候需要去掉
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
现在，无论何时提交，Prettier都会自动格式化更改的文件。
您还可以 ./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" 第一次设置整个项目的格式。
接下来，您可能需要将Prettier集成到您喜欢的编辑器中。
阅读Prettier GitHub页面上有关编辑器集成的部分。
