VSCode配置react开发环境的步骤

vscode 默认配置对于 react 的 JSX 语法不友好，体现在使用自动格式化或者粘贴后默认缩进错误，尽管可以通过改变 language mode 缓解错误，但更改 language mode 后的格式化依然不够理想。通过搭配使用 在 vscode 中需要安装下面插件：。基础配置项目中安装 babel-eslint , eslint-plugin-jsx-a11y , eslint-plugin-react 依赖：推荐的 ESLint 配置如下。如果在项目中文件名后缀是 .js 而不是 .jsx ，可能会遇到下面的错误：在 .eslintrc 中添加新的 rules 允许 .js 和 .jsx 后缀就好：react-native 0.49 及以后版本已经不建议使用 .jsx 为后缀了，参考这个讨论 No .jsx extension?检测 props 的类型有助于写出复用组件，最好不要把这个提醒关掉，如果一定要关，添加下面规则：我们想要的效果是： 配置 Prettier 按照 ESLint 的规则保存文件时自动格式化 JSX 代码 ，步骤如下：项目中安装 prettier-eslint在 vscode workspace 用户自定义部分添加如下代码：