VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好，体现在使用自动格式化或者粘贴后默认缩进错误，尽管可以通过改变 language mode 缓解错误，但更改 language mode 后的格式化依然不够理想。
通过搭配使用 ESLint 和 Prettier 插件可以实现在 vscode 中完美支持 JSX 语法。
编辑器安装插件
在 vscode 中需要安装下面插件：
项目中的配置
配置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 错误
[eslint] 'navigation' is missing in props validation (react/prop-types)
检测 props 的类型有助于写出复用组件，最好不要把这个提醒关掉，如果一定要关，添加下面规则：
"rules": {
"react/prop-types": 0
}
配置Prettier
我们想要的效果是： 配置 Prettier 按照 ESLint 的规则保存文件时自动格式化 JSX 代码 ，步骤如下：
项目中安装 prettier-eslint
npm install prettier-eslint --save-dev
配置 vscode workspace
在 vscode workspace 用户自定义部分添加如下代码：
// Format a file on save. // A formatter must be available, // the file must not be auto-saved, // and editor must not be shutting down. "editor.formatOnSave": true, // Enable/disable default JavaScript formatter (For Prettier) "javascript.format.enable": false, // Use 'prettier-eslint' instead of 'prettier'. // Other settings will only be fallbacks // in case they could not be inferred from eslint rules. "prettier.eslintIntegration": true,
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了React组件内事件传参实现tab切换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
react中使用better-scroll滚动插件的实现示例
滚动在很多地方都可以使用，本文主要介绍了react中使用better-scroll滚动插件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
基于visual studio code + react 开发环境搭建过程
今天通过本文给大家分享基于visual studio code + react 开发环境搭建过程，本文给大家介绍的非常详细，包括react安装问题及安装 Debugger for Chrome的方法，需要的朋友跟随小编一起看看吧2021-07-07
这篇文章主要介绍了工程级 React 注册登录全栈级流程,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了使用react遍历对象生成dom问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
this在javascript中已经相当灵活，这篇文章主要介绍了React.js绑定this的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了详解React中共享组件逻辑的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了React与Redux之数组处理讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
React-Native之TextInput组件的设置以及如何获取输入框的内容
这篇文章主要介绍了React-Native之TextInput组件的设置以及如何获取输入框的内容问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在日常开发中，我们经常会有防抖和节流的需要，可以减小服务器端压力，提升用户体验，本文就详细的介绍了react简单实现防抖和节流，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
最新评论