用vscode开发react用哪些插件

用vscode开发react用哪些插件

1. 代码提示类插件

1.1 Reactjs code snippets

1.gif

1.2 React Redux ES6 Snippets

2.gif

1.3 React-Native/React/Redux snippets for es6/es7

1.4 JavaScript (ES6) code snippets(es6代码片段)

1.5 Typescript React code snippets(这是tsx的react组件片段)

有了上述这些代码片段提示插件就可以大大增加码代码的速度了。

2. 美化类插件

2.1 One Dark Pro(atom风格主题)

Snipaste_2019-12-19_14-28-53.jpg

2.2 vscode-icons(文件图标)

赏心悦目的界面让你越敲越有劲。

3. 其他实用类插件

3.1 Beautify css/sass/scss/less(样式代码格式化)

3.2 npm Intellisense(对package.json内中的依赖包的名称提示)

3.3 Path Intellisense(文件路径补全)

3.4 cssrem(px转换为rem)

3.5 CSS Modules(对使用了css modules的jsx标签的类名补全和跳转到定义位置)

以上的插件都安装好了的话基本就可以使用vscode愉快地进行react开发了。

Image placeholder
前端答疑
未设置
  46人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何开发react组件库

如何开发react组件库技术栈:React+Webpack+TypeScript+Docz先上脚手架目录结构docz:docz文档生成器的配置目录example:demo目录lib:打包后生成文件目录

一些Vue开发小技巧

下面我们来看一些vue开发小技巧:一、状态共享使用Vue进行开发时,随着项目的复杂化,组件个数也逐渐增加,此时我们就面临着一个问题——多组件状态共享。也许有人说这不是啥问题,Vuex就可以解决啊。是的

vscode插件 - quokka

什么是quokka?Quokka.js是一个用于快速开发javascript或typescript的开发者工具。它能在你键入代码的时候,实时将运行的值更新或展示在你的IDE上。quokka版本Quo

「解放双手」老舅教你VS Code Disco

观感度:🌟🌟🌟🌟🌟口味:驴肉蒸饺烹饪时间:15min这是最好的时代,也是最坏的时代。今年听到过最浪漫的一句话:我们在键盘上留下的余温,也将随时代传递到更远的将来。感觉让理性的技术人多了份柔光滤镜。也许

如何使用Vue构建Chrome扩展程序

浏览器扩展程序是可以修改和增强Web浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。好消息是浏览器扩展并不难写。可以用你已经熟悉的Web技术(HTM

在浏览器中使用Vue.js裁剪图像

在本教程中,我们将探讨如何在浏览器中使用JavaScript库来操作图片,为服务器上的存储做准备,并在Web程序中使用。我们将使用Vue.js而不是原生JavaScript来完成此操作。要了本文想要完

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

外部JS 使用Vue实例

1、main.js导出Vue实例varvue=newVue({ router, store, render:h=>h(App) }).$mount('#app') exportdefaultvue2

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

AWS vs K8s 是新时代的 Windows vs Linux?

作者:IanMiell是开源程序员、演讲师、作家和博客写手以前……如果你与我一样,年过四十,又在IT行业工作,恐怕还记得每个人使用Windows,一小群但越来越多的人在业余时间埋头编译Linux的年代

css设置边框可以用哪个属性?

css设置边框可以用border简写属性,它可以在一个声明设置所有的边框属性,按照border-width、border-style、border-color顺序设置;也可以单独使用这几个属性来设置边

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

如何成为一名优秀的CTO?需要具备哪些能力?

如何成为一名优秀的CTO?需要具备哪些能力?CTO简单来说就是技术总负责人。那么在自己的专业领域,一定要拥有拔尖的知识技能。除此之外,广阔的技术性视野,与CEO良好的伙伴关系,前瞻性的商业思维以及不断

视频流媒体服务器对接宇视摄像机OCX插件出现error code 14001错误分析

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP、HTT

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

前端开发人员最困扰的事情有哪些?

前端和后端开发之间的界线正在发生变化。有一些常见的错误会导致前端开发人员增加工作量、浪费时间,本文将介绍一些常见的错误以及如何避免这些错误。公司向他们的开发人员和程序员提出更多的要求,让他们完成与自己

基于jquery开发的UI框架有哪些?

基于jquery开发的UI框架有哪些?1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源

defer vs return

defer看起来与try...catch类似,其实有许多不为人知的小技巧 defer官方行文defer先进后出,对return进行一些扫尾工作。这意味着使用该函数在返回值之前,defer函数内是可以

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

使用这些idea插件让开发效率提高5倍

idea有很多非常好用的插件,用好了这些插件能够极大的提高开发效率插件用的好,bug就追不上了我😆 0.idea插件如何安装打开idea的设置页面,选择Plugins选项即可搜索和安装插件1.JReb

电脑编程初学者注意哪些问题?

  电脑编程初学者注意哪些问题?了解编程的过程中不断培养自己的大局观,寻找正确学编程路线,确认好编程的学习方向,每一种语言都有其优势。尽管编程以智力著称,但需要动手练习技能,光靠看书可不行的应该多练习

数据科学领域的核心技能和新兴技能分别有哪些?

近年来随着大数据的迅速发展,各种各样的数据分析技能也逐渐大热,为了找到数据科学领域目前最常用的技能和未来最流行的应用趋势,我们进行了一项调查。我们确定了数据科学技能的两个主要类别:一个是大多数受访者拥

看《长安十二时辰》可以了解哪些算法知识

最近,小吴在追一部古装剧—-《长安十二时辰》。故事讲得是在上元节前夕,长安城混入可疑人员,身陷囹圄的张小敬临危受命,与少年天才李必携手在十二时辰内破除隐患。该剧的一大亮点就在于 时间很紧迫,需要在二十