没有合适的资源?快使用搜索试试~ 我知道了~
VSCode配置react开发环境的步骤
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 5 下载量 32 浏览量
2020-11-27
03:16:27
上传
评论
收藏 47KB PDF 举报
温馨提示
试读
2页
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ESLint 和 Prettier 插件可以实现在 vscode 中完美支持 JSX 语法。 编辑器安装插件 在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置 配置ESLint 基础配置 项目中安装 babel-eslint , eslint-plugin-jsx-a11y , eslint-plugin-reac
资源推荐
资源详情
资源评论
VSCode配置配置react开发环境的步骤开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变
language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。
通过搭配使用 ESLint 和 Prettier 插件可以实现在 vscode 中完美支持 JSX 语法。
编辑器安装插件编辑器安装插件
在 vscode 中需要安装下面插件:
ESLint
Prettier
项目中的配置项目中的配置
配置配置ESLint
基础配置
项目中安装 babel-eslint , eslint-plugin-jsx-a11y , eslint-plugin-react 依赖:
npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
推荐的 ESLint 配置如下(修改 .eslintrc )
{
// Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
"extends": "airbnb",
// We use 'babel-eslint' mainly for React Native Classes
"parser": "babel-eslint",
"ecmaFeatures": {
"classes": true,
},
// jsx相关插件
"plugins": ["react", "jsx-a11y", "import"]
// We can add/overwrite custom rules here
"rules": {
// React Native has JSX in JS files
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
// React Native includes images via require("../images/example.png")
"global-require": 0
}
}
需要注意几点:需要注意几点:
如果使用 yarn 安装,需要手动创建 .eslintrc 文件
如果在使用过程中 eslint 报错,提示缺少依赖,安装相关依赖就好
可能遇到的问题可能遇到的问题
如果在项目中文件名后缀是 .js 而不是 .jsx ,可能会遇到下面的错误:
复制代码 代码如下:
[eslint] JSX not allowed in files with extension ‘.js’ (react/jsx-filename-extension)
在 .eslintrc 中添加新的 rules 允许 .js 和 .jsx 后缀就好:
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] }
react-native 0.49 及以后版本已经不建议使用 .jsx 为后缀了,参考这个讨论 No .jsx extension?
props validation 错误错误
weixin_38590738
- 粉丝: 8
- 资源: 902
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页