vscode的必备环境配置

vscode是轻量级、支持非常多的插件的一个软件，那么为什么用它呢？

• 方便的git管理

  • 支持基本所有的常用操作,图形化操作
  • git代码冲突合并
  • 修改对比
  • 图形化的git log历史，多分支显示
  • 便捷的最新修改记录，git lens
  • 多种多样的git插件

• markdown

  • 多样化的markdown展示
  • 能够上传网络图片

• 代码编写

  • 多点编辑

• 启动快捷，轻量级编辑器

一、安装

打开https://code.visualstudio.com/选择版本下载

二、vs code 的常用插件

1、Auto Rename Tag 修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

2、Auto Close Tag 自动闭合HTML标签

4、Beautiful 格式化代码的工具

5、Dash Dash是MacOS的API文档浏览器和代码段管理器

6、Ejs Snippets ejs 代码提示

7、ESLint 检查javascript语法错误与提示

8、File Navigator 快速查找文件

9、Git History(git log)查看git log

10、Gulp Snippets 写gulp时用到，gulp语法提示。

11、HTML CSS Support  在HTML标签上写class智能提示当前项目所支持的样式

12、HTML Snippets 超级好用且初级的H5代码片段以及提示

13、Debug for Chrome让vs code映射chrome的debug功能，静态页面都可以用vscode来打断点调试、配饰稍微复杂一点

14、Document this Js的注释模板

15、jQuery Code Snippets jquery提示工具

16、Html2jade html模板转pug模板

17、JS-CSS-HTML Formatter 格式化

18、Npm intellisense require 时的包提示工具

19、Open in browser 打开默认浏览器

20、One Dark Theme 一个vs code的主题

21、Path Intellisense 自动路径补全、默认不带这个功能

22、Project Manager多个项目之间快速切换的工具

23、Pug(Jade) snippets pug语法提示

24、React Components 根据文件名创建反应组件代码。

25、React Native Tools reactNative工具类为React Native项目提供了开发环境。

26、Stylelintcss/sass代码审查

27、Typings auto installer 安装vscode 的代码提示依赖库，基于typtings的

28、View In Browser 默认浏览器查看HTML文件（快捷键Ctrl+F1可以修改）

29、Vscode-icons 让vscode资源目录加上图标、必备

30、VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）

31、Vue 2 Snippets vue必备vue代码提示

32、Vue-color vue语法高亮主题

33、Auto-Open Markdown Preview markdown文件自动开启预览

34、EverMonkey 印象笔记

35、atom one dark atom的一个高亮主题(个人推荐)

36、vscode-faker  生成假数据，地址，电话，图片等等

37、koroFileHeader  自动生成文件头部注释和函数注释【

1. 文件头部添加注释:快捷键：window：ctrl+alt+I,mac：ctrl+cmd+I

2. 在光标处添加函数注释:快捷键：window：ctrl+alt+T,mac：ctrl+cmd+T(快捷键如果没有生效，注意检查快捷键是否被占用) 

】

三、python环境配置

1、python 插件功能： 这个是vscode提供的python 官方插件，提供了python代码的调试，自动补全，代码格式化等功能

2、Guides   插件功能： 这个插件的作用是增加 .py  中的指示线，用这个插件能让代码的层次结构更加清晰

3、topper    插件功能：  这个插件的作用是在.py文件的开头添加一些说明header

4、Python-autopep8  插件功能：  这个插件的作用是在.py文件的开头增加pe8编码规范

5、Python for VSCode 插件功能：  这个插件的作用是在vscode必备的python插件

四、画流程图

作为一个德智体美劳全面发展的测试员，怎么能不会画流程图呢 插件：Draw.io Integration

五、“女朋友”

自己在敲代码旁边有一个妹子用甜美可爱的声音，不停在耳边鼓吹你代码写的很棒棒，进而直接导致编码效率。

插件：Rainbow Fart

这些配置就可以做前后端的了，后续再介绍些其他的插件