vs code 必备插件和主题

在这里插入图片描述
Visual Studio Code(简称vs code)是一个轻量且强大的代码编辑器,支持 Windows,OS X 和Linux。内置 JavaScript、TypeScript 和 Node.js 支持,而且拥有丰富的插件生态系统,可通过安装插件来支持 C++、C#、Python、PHP 等其他语言。

使用起来的特点也相当明显:
1、占用内存低;
2、代码补全,比较人性化;
3、加载文件无压力;
4、界面设计美观;
5、多插件安装
6、内置Git

vs code 官网:https://code.visualstudio.com/
vs code 更新版本介绍:https://code.visualstudio.com/updates/v1_30
vs code 操作手册:http://i5ting.github.io/vsc/

一、vs code 常用的插件:(根据各自所需选择安装)

插件安装方法(如下图)
在这里插入图片描述
1、文件图标 vscode-icons

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。

在这里插入图片描述
2、代码美化 Beautify

Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。

在这里插入图片描述
3、快速注释 Document This

代码除了优秀的性能、规范的格式,注释也是不可或缺的,而且注释也应该有一套标准的注释方法,特别对于 JavaScript 这种语言。
Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。

在这里插入图片描述
4、Auto Rename Tag

自动重命名配对的HTML / XML标签

5、Color-Highlight

在编辑器中高亮显示颜色。

6、Css Peek

能在源代码中的字符串中找到对应的css(类和ID)。显示在那个css文件里,还有在第几行。

7、Debugger for Chrome

js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,详细配置见插件说明。

8、ESLint

检查Javascript编程时的语法错误。

9、Git Easy

增加了vscode中自带的git操作,安装后按F1调出控制台,输入git easy [options]完成git操作,代替git bash。

10、Git History

查看git日志以及图表和详细信息。查看文件的历史记录(Git日志)或文件中的行历史(Git Blame)

11、Guides

代码的标签对齐线。

12、HTML CSS Class Completion

为基于工作空间上的CSS文件的HTML类属性提供CSS类名称提示。

13、HTML Boilerplate

提供生成标准HTML样板代码。

14、HTML CSS support

css 自动补齐

15、HTML Snippets

支持HTML5标签提示

16、JavaScript (ES6) snippets

支持JavaScript ES6 语法

17、jQuery Code Snippets

jq代码段提示。

18、JS-CSS-HTML Formatter

代码格式化。

19、Lodash

lodash 函数提示

20、Npm Intellisense

在import语句中自动完成npm模块引入的代码插件。

21、open in browser

在浏览器中打开,安装后在左侧目录中右键点击会出现 open in browser 选项。

22、Path Intellisense

文件路径提示。

23、vs code 汉化

搜索 Chinese 站到以下插件

在这里插入图片描述
24、vue 代码高亮 Vue 2 Snippets

.vue 文件模板提示、vue 代码提示、vue-router 代码提示

25、vscode-element-helper

element-ui 代码提示

26、Bracket Pair Colorizer

将代码中的 ()、{}、[] 用不同的颜色标记出来

二、vs code 主题:

1、Material
在这里插入图片描述
2、Monokal
在这里插入图片描述
3、One Dark Pro
在这里插入图片描述
4、Dracula
在这里插入图片描述

vs编辑器主题变换插件 EasyVS,这次的0.3版本增加了一些实用的功能。具体介绍如下: 增加主题功能 (内置7种不同风格主题) 主题功能是这个版本的亮点。我收集了七个比较流行的编辑器主题样式,有了这个功能再也不用到网上寻找安装这样那样的主题了。 增加文件右键“在资源管理器中打开”功能 我们知道VS2010对文件夹支持“在资源管理器中打开”的功能,而对于普通的代码文件则没有这个功能。每次如果想用资源管理器打开对应的代码文件都很麻烦。所以这一版加入了直接对代码文件用资源管理器打开的功能(据同事反馈,这个功能比较实用^_^)。 新建的文件自动头信息功能(可关闭) 这种自动添加文件头信息,作者信息的功能网上有许多的实现方法,比如直接修改模板文件。加入这个功能只是为了简化实现这个操作的步骤。直接在设置里面更改就有效果了,而且还可以自己选择是否关闭。 增加克隆选中文本功能 (Ctrl E, Ctrl E) 这个功能是仿照Resharper的ctrl d功能实现的,使用Resharper的同学肯不定不陌生。具体的使用方法就是按快捷键Ctrl E,Ctrl E后会对选中的文本克隆到下面一行,如果没有选中则克隆鼠标所在那一行的文本到下一行。比如:我先选中两行文本 然后快捷键Ctrl E, Ctrl E,变成如下效果: 引入这个功能是因为我觉得平常用的蛮多的,可能会对大家有一些帮助,特别是那些没有使用resharper插件的同学。 增加“重启”功能 至于这个功能,我只能说不管你要不要,它就在那里。总有你需要的时候。 Bug修复 修复less tab的打开winform窗体出错的一个BUG
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值