用于React开发的VS代码设置

简单的步骤即可获得一个不错的VS Code设置,并带有lint提示和保存格式

这篇文章解释了简单的步骤一个不错的VS Code设置,用于React开发, 和棉絮提示保存时格式化

ESLint

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

安装ESLint使用ESLint扩展在VS Code Extensions商店中可用。

然后从终端运行那些命令(如果尚未安装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:

{
  "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.

You can install the Prettier VS Code extension with npm:

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:

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

Download my free React Handbook


More react tutorials: