react开发vscode插件推荐
<p>原文地址：https://github.com/xieqingtian/blog/issues/2</p><p>由于本人主要是做react开发，用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。</p>
<h1>1. 代码提示类插件</h1>
<h2>1.1 Reactjs code snippets</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/component.gif"></p>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/stateless.gif"></p>
<h2>1.2 React Redux ES6 Snippets</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/container.gif"></p>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/abbreviation.gif"></p>
<h2>1.3 React-Native/React/Redux snippets for es6/es7</h2>
<h2>1.4 JavaScript (ES6) code snippets(es6代码片段)</h2>
<h2>1.5 Typescript React code snippets(这是tsx的react组件片段)</h2>
<p>有了上述这些代码片段提示插件就可以大大增加码代码的速度了。</p>
<h1>2. 美化类插件</h1>
<h2>2.1 One Dark Pro(atom风格主题)</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/screenshot2.png"></p>
<h2>2.2 vscode-icons(文件图标)</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/screenshot.gif"></p>
<p>赏心悦目的界面让你越敲越有劲。</p>
<h1>3. 其他实用类插件</h1>
<h2>3.1 Beautify css/sass/scss/less(样式代码格式化)</h2>
<h2>3.2 npm Intellisense(对package.json内中的依赖包的名称提示)</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/package.gif"></p>
<h2>3.3 Path Intellisense(文件路径补全)</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/iaHeUiDeTUZuo.gif"></p>
<h2>3.4 cssrem(px转换为rem)</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/cssrem.gif"></p>
<h2>3.5 CSS Modules(对使用了css modules的jsx标签的类名补全和跳转到定义位置)</h2>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/l0EwY2Mk4IBgIholi.gif"></p>
<p>以上的插件都安装好了的话基本就可以使用vscode愉快地进行react开发了, 我这里只给出了一些基本常用的插件，如果你发现其他好用的插件请回复我，我将十分感谢。</p>
<p>最后忘了一个插件，不同设备上的vscode配置同步</p>
<h2>Settings Sync</h2>
<p>有了它就不用每次换个开发环境又重新配置一遍vscode了。</p>
<p>最后的最后，我只想说，vscode强无敌，vscode大法好！</p>
<h1>我自己日常开发中使用的扩展</h1>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/chajian1.png"></p>
<p><img src="https://github.com/sundaypig/blog/raw/master/images/chajian2.png"></p><br><br>
来源：https://www.cnblogs.com/xbzhu/p/10823300.html
頁:
[1]