第二章:React环境配置之VSCode开发工具

导言:

这一章主要讲开发时用到的一些实用的有帮助的vscode扩展;
和从C#及Microsoft Visual Studio的发展路程,来理解和解析,为什么需要这个框架,到底解决了什么问题,有什么好处以及和以往的编程有什么不同?
最后在罗列一下,我们在开发过程中使用到的框架包的名字,帮助大家提前预习有个认识.

---

推荐辅助扩展

一款好的开发辅助扩展程序,能够让我们能够快速完成编写,分析,检测,及一些实用的功能,以下针对vscode推荐几款辅助扩展

代码片段: 输入快捷键自动生成代码的叫代码片段

• 如:输入cl按下 Tab就会自动生成Console.log();
• 表现一般为:需要按下TAB键

智能感知提示: 在编写代码时,光标位置显示你可能输入的内容,提示.建议等.

• 如:输入 Console.的时候,会有一个列表在你的光标位置,并提示你log,info,debug等多个你可能输入的选项
• 表现一般为:在某个对象后面输入 .的时候出现
• 注: 此文的 智能感知提示扩展栏目合并了 代码追踪扩展

开发工具扩展

• Chinese (Simplified) Language Pack for Visual Studio Code
  推荐指数:5星
  vscode的中文扩展包,不习惯英文界面的就安装吧!
• vscode-icons
  推荐指数:5星
  让你侧边栏的资源管理器,看起来更有层次,并给文件夹和文件加上图标,方便区分.推荐安装
• Live Server
  推荐指数:4星
  允许你启动本地虚拟环境,使用后,当页面内容发生改变时,无需刷新浏览器,浏览器就会自动更新内容.实时预览
• open in browser
  推荐指数:4星
  允许你在HTML页面中通过右键浏览页面,和vs的右键->在浏览器中打开效果一样,配合 Live Server一起如有神助!
  如果是传统模式,那么这个几乎是必须安装的,但是我们后面的项目使用的是yarn run umi dev的方式启动,所以也永不上了,但是依然是个非常强大优秀的扩展
• Beautify
  推荐指数:4.5星
  代码格式化工具(vscode默认没有格式化功能),会用会配置就5星,不会用就不推荐.
  缺点:配置繁琐,默认配置又脑残
• Bracket Pair Colorizer 2
  推荐指数:5星
  彩虹括号,代码块层级较多时,这个扩展可以帮助你一眼发现每个层级对应的开始括号,和结束括号,并用不同的颜色展示.
• npm
  推荐指数:4星
  允许你在命令面板中 F1使用NPM功能

代码片段扩展

• Angular 2 TypeScript Emmet
  推荐指数:5星
  在 JSX 中快速生成 HTML 标签
• css-auto-prefix
  推荐指数:5星
  做主流浏览器兼容的插件,会根据你选中的样式,自动添加其他浏览器的兼容写法!
  但本文采用antd这个工具用处较少,在传统开发中,此插件功能强大!
• JavaScript (ES6) code snippets
  推荐指数:4星
  提供ES6的代码片段
• jQuery Code Snippets
  推荐指数:4星
  提供Jquery的代码片段
• Auto Close Tag
  推荐指数:4星
  输入开始标签后自动补全结尾的HTML标签
• Auto Rename Tag
  推荐指数:4星
  当修改标签时,结尾标签也会同步修改
• ES7 React/Redux/GraphQL/React-Native snippets
  推荐指数:4星
  提供react,redux的代码片段,但有时候会使用变种,所以我没装这个软件,纯react开发的话,推荐安装
• React-Native/React/Redux snippets for es6/es7
  推荐指数:4.5星
  专职React方向的代码片段,和ES7 React/Redux/GraphQL/React-Native snippets类似,二选一吧!

智能感知提示扩展

• Auto Import
  推荐指数:3.5星
  智能提示感知包引用(很好很强大,但偶尔会短路)
• CSS Peek
  推荐指数:5星
  让你可以像vs的 Ctrl+ 左键或者直接 F12一样,可以跳到选中样式的css文件中.
• ImagePreview
  推荐指数:3星
  当你使用图片时,提供鼠标指向链接时,生成一个图片预览图.
• IntelliSense for CSS class names in HTML
  推荐指数:4星
  在Html中智能感知CSS,class,name样式或者属性
• npm Intellisense
  推荐指数:3星
  自动监测并提示填充import导入的包,和AutoInport差不多
• Path Intellisense
  推荐指数:5星
  自动感知Url路径.
• HTML CSS Support
  推荐指数:4星
  自动补全 HTML和CSS代码

调试.测试扩展

• Code Runner
  推荐指数:4星
  选一个js代码块,右键Run Code功能,会执行选中的代码,功能很强大,适合测试用.但我很少用到.
• Debugger for Chrome
  推荐指数:5星
  可以在谷歌内核中调试,给5星是因为js终于可以逐步调试了,但我还是习惯js的打印调试.
• Quokka.js
  推荐指数:4星
  实时预览js方法体的输出结果
• Turbo Console Log
  推荐指数:4.5星
  一键创建Console,查看Console,删除Console,对于使用Console来调试的人员帮助甚大!推荐喜欢使用TODO关键字
• vscode-faker
  推荐指数:4星
  快速的插入看起来很正规的测试数据,但是貌似是英文,但是聊胜于无,推荐在没有后台支撑数据前,又需要看起来是真实数据时使用

协作,规范扩展

• ESLint
  推荐指数:会用5星,不会用0星
  用来约束代码规范和语法检测的业内顶级插件,无论是个人还是团队,都有必要熟悉这个插件,提供统一的开发标准,在开发过程中纠正代码命名和错误等,并提供代码格式化功能!它已经成为了行业标准

• HTMLHlint
  推荐指数:3星
  国产Html语法和规范检查扩展,与ESLint同类型.
  缺点:需要配置

• koroFileHeader
  推荐指数:4星
  允许你在文件的头部生成文件注释,推荐使用,养成良好的注释习惯!

• stylelint
  推荐指数:3星
  css样式语法检测

• TODO Highlight
  推荐指数:4星
  TODO关键字高亮,着重显示,推荐喜欢使用TODO关键字(TODO为待开发)人员使用.

• Todo Tree
  推荐指数:4星
  在侧边栏里增加一个TODO树菜单,罗列所有的TODO关键字位置,方便完成后补代码!

• Markdown Preview Enhanced
  推荐指数:4星
  一款可以编辑 .md文件的扩展,md文件全名Markdown,是一种简易的带有基础格式的速记文档,可以制作帮助文档,api,手册.等等,内容精简但不是很大的文档格式,我们现在看到的内容都是基于Markdown编写的,这个插件还可以把这些内容移植转换到html格式.有速记习惯和需求的推荐使用.

  ---