VSCode配置react开发环境的步骤

 更新时间:2017年12月27日 09:02:40   作者:刘小光  
本篇文章主要介绍了VSCode配置react开发环境的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。

通过搭配使用 ESLint Prettier 插件可以实现在 vscode 中完美支持 JSX 语法。

编辑器安装插件

在 vscode 中需要安装下面插件:

  1. ESLint
  2. 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
 }
}

需要注意几点:

  1. 如果使用 yarn 安装,需要手动创建 .eslintrc 文件
  2. 如果在使用过程中 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受控组件与非受控组件(小结)

    浅谈react受控组件与非受控组件(小结)

    本篇文章主要介绍了浅谈react受控组件与非受控组件(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React中使用外部样式的3种方式(小结)

    React中使用外部样式的3种方式(小结)

    这篇文章主要介绍了React中使用外部样式的3种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • React中setState的使用与同步异步的使用

    React中setState的使用与同步异步的使用

    这篇文章主要介绍了React中setState的使用与同步异步的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 详解React Hooks是如何工作的

    详解React Hooks是如何工作的

    React Hooks是在React 16.8版本新增的特性,在我看了React官网和一些博客对React Hook的讲解后还是觉得没有get到本质。本篇博客通过手动实现useState()来了解Hook的原理和本质。阅读此篇博客的前提是你要知道一些 React Hooks的基本用法和使用规则,不然会看得云里雾里。
    2021-05-05
  • 深入了解响应式React Native Echarts组件

    深入了解响应式React Native Echarts组件

    近年来,随着移动端对数据可视化的要求越来越高,通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库,是解决问题的好办法。下面就和小编来一起学习一下吧
    2019-05-05
  • react 原生实现头像滚动播放的示例

    react 原生实现头像滚动播放的示例

    这篇文章主要介绍了react 原生实现头像滚动播放的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • react.js CMS 删除功能的实现方法

    react.js CMS 删除功能的实现方法

    下面小编就为大家带来一篇react.js CMS 删除功能的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 详解react-router 4.0 下服务器如何配合BrowserRouter

    详解react-router 4.0 下服务器如何配合BrowserRouter

    这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • react native仿微信PopupWindow效果的实例代码

    react native仿微信PopupWindow效果的实例代码

    本篇文章主要介绍了react native仿微信PopupWindow效果的实例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • 利用React-router+Webpack快速构建react程序

    利用React-router+Webpack快速构建react程序

    目前 React、Webpack 等技术如火如荼,你是不是还在愁苦如何把这些杂乱的知识怎么学习一下,开启一段新的前端开发之路呢?那么这篇将给大家运用示例代码详细的介绍使用React-router和Webpack如何快速构建一个react程序,感兴趣的朋友们下面来一起看看吧。
    2016-10-10

最新评论