用于React开发的VS代码设置

This post explains the simple steps to get a nice VS Code setup for React development, with linting hints and format on save.

这篇文章解释了为React开发获得一个不错的VS Code设置的简单步骤，并带有保存的 提示和格式 。

ESLint (ESLint)

First, we’re going to install ESLint. ESLint is an amazing tool that helps you keep your code tiny and clean.

首先，我们将安装ESLint。 ESLint是一个了不起的工具，可以帮助您保持代码的小巧和整洁。

Install ESLint using the ESLint extension available on the VS Code Extensions Store.

使用VS Code Extensions Store上可用的ESLint扩展来安装ESLint 。

Then from the Terminal run those Yarn commands (if you don’t have Yarn installed yet, follow the link to my tutorial to find a short guide):

然后从终端运行这些Yarn命令(如果尚未安装Yarn，请通过指向我的教程的链接查找简短指南)：

yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-react

Now, create a .eslintrc.json file in the root of your project, and add the following lines to have a basis ESLint configuration that works for React development, with JSX support:

现在，在项目的根目录中创建一个.eslintrc.json文件，并添加以下几行，以使用ESXint支持JSX支持的基本ESLint配置：

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}

更漂亮 (Prettier)

The next step I suggest is to install Prettier. Prettier is a JavaScript opinionated formatter. It’s a great tool because it helps you standardize your codebase, and it’s useful even if you code alone. In a team, it’s super useful as it avoids differences in code styling. Use what Prettier suggests.

我建议的下一步是安装Prettier。 Prettier是JavaScript自带格式器。 这是一个很棒的工具，因为它可以帮助您标准化代码库，并且即使单独编写代码也很有用。 在团队中，它超级有用，因为它避免了代码样式方面的差异。 使用Prettier的建议。

You can install the Prettier VS Code extension with npm:

您可以使用npm安装Prettier VS Code扩展 ：

npm install -g prettier-eslint --save-dev

Next we’re going to add a few rules to the VS Code configuration, to apply Prettier on every save, and integrate it with ESLint. Press cmd+, (on Mac) and the VS Code configuration should show up. Enter this at the end:

接下来，我们将向VS Code配置中添加一些规则，以在每次保存时应用Prettier，并将其与ESLint集成。 按cmd+, (在Mac上)，然后将显示VS Code配置。 最后输入：

"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

翻译自: https://flaviocopes.com/vscode-react-setup/