VS Code编辑器常用插件安装与配置

流氓凡 技术分享 2019-09-27 6.63 K 0

    VS Code是一个开源的跨平台开发工具,是我目前用的最顺手的编辑器。它与sublime编辑器不同的是,它是微软开发且开源的,插件数量目前已有1万多比submit多两倍,本文将会介绍了一些vscode编辑器常用的插件和快捷键,帮你大大提高软件开发的效率,让你有更多的时间去撸铁和泡妹子。

    1、VS Code介绍

    官网:https://code.visualstudio.com/

image.png

VSCode全称是Visual Studio Code,光从名字上来看,一开始可能有人会把VSCode和Visual Studio搞混,他俩都属于微软爸爸公司旗下的产品,而后者早已名声在外,长期占据程序员最喜爱编辑器榜首,为了让新儿子VSCode蹭蹭热度,所以起一个差不多的名字,就像Javascript之于Java。

说VSCode是个新生儿,一点都不为过,从它诞生到现在也只是过了4年时间,跟历史悠久的各大编辑器相比它只是个弟弟。但是就在最近的一到两年,它高速成长,市场占有率开始飙升,远远领先于其他的编辑器,Sublime Text迅速下降,Atom不温不火,WebStorm由于收费问题一直在国内的使用率不高,Vim由于学习成本太高也渐渐退出历史舞台。如果你正好从别的编辑器转到VS Code也完全不用担心,它提供了对应的Keymap插件,可以将你的键盘设置迁移过来,帮你快速上手操作,而不用再重新花时间去适应快捷键。

image.png

而且它为每一种语言都提供了很好的支持,将开发中需要用到的Extension打包成一个合集,基本上开发的时候下载对应的Extension Package就可以获得很好的支持。

微软给VSCode的定义就是:免费、开源、跨平台。重新定义代码编辑器。再加上去年微软收购Github的举动,这些都说明微软在开源方面有了越来越多的尝试。

image.png


开源对于一个产品的长期发展极为重要。在四款编辑器中,Sublime 是闭源的,VS Code、Vim 和 Atom 都是开源的,而 VS Code 可以说是开源做的最好的。

VS Code 不仅仅是把代码开源出来。而是把整个产品的开发过程建立于开源之上,与整个社区深入合作,倾听用户在 GitHub 上的反馈,使 VS Code 越做越好:

每一年,VS Code 团队都会在 GitHub Wiki 发布 Roadmap ,列出一整年的规划图。

每个月初,在产品设计阶段,VS Code 团队会在 GitHub Issue 上会发布 Iteration Plan ,列出这个月会做的每一个功能,每一个功能基本会对应一个 GitHub Issue,你可以看到详细的设计以及 mockup,并且可以提出你自己的见解。

每个月末,临近产品发布,你可以在 GitHub 看到 Endgame 了解到 VS Code 是如何进行产品测试与发布的。

不仅代码开源,VS Code 整个产品的计划,设计以及发布管理都是“开源”的:每一个阶段对每一个用户是公开透明的,你不仅可以开 Issue,发PR,你甚至也可以参与到每个功能的设计与讨论中去!

关于VSCode业界一直有一个争议——它到底是不是一个IDE?对于Visual Studio,微软直接就把它定义为同类中最好用的IDE,而对于VSCode,微软目前还只是把它定义为一个Code Editor。

为了解决这个问题,我们首先要搞清楚一个概念,什么是IDE?它的全称是Integrated development environment,字面意思是集成开发环境,也就是说把开发过程中的一些主要活动和使用到的工具都集成在一个开发环境中,这样我们就可以在一个程序里进行编写代码、调试代码、运行命令行、版本控制等开发过程。

目前VSCode拥有强大的API支持,已经基本可以实现IDE。我们用它编写代码,运用内置的Terminal终端快速的运行命令行,下载Debug插件,设置断点,轻松调试代码。使用内置的Git进行版本控制,轻松管理源代码。不论哪种语言都可以下载到相应的插件合集,一次性打包安装,整个开发过程都可以在这个一个工具中完成,它真正做到了重新定义代码编辑器,在Stack Overflow的2018年开发者调查中,VS Code成为了最受欢迎的开发工具。


2、基本插件

VS Code 有着丰富且快速增长的插件生态,如今,已经有超过一万个插件。不仅有中心化的插件市场,而且在 VS Code 编辑器里也可以轻松搜索插件,直接进行安装与管理。相比之下,Sublime 只有 5000 不到的插件,而且在编辑器里不能很方便地搜索管理插件;Vim 插件虽多,但因为没有一个中心化的插件市场,查找插件很麻烦;Atom 有 8000 多的插件,比 VS Code 少一些,虽然在编辑器内也是可以查找插件,但 VS Code 的搜索和浏览功能做的要比 Atom 要好。

Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包

对于一些英文不太好的小伙伴,上来第一件事肯定是要切换成中文语言环境,安装汉化包插件之后,按快捷键Ctrl+Shift+P调出命令面板,输入Configure Display Language,选择zh-ch,然后重启vs code即可。

open-in-browser 在浏览器中查看

VS Code没有提供直接在浏览器中运行程序的内置功能,所以我们需要安装此插件,在浏览器中查看我们的程序运行效果。

image.png


Live Server 实时预览

安装这个插件之后,我们点击右下角的Live,如果你添加了多个工作区,它会提示让你选择一个你正在使用的工作区,然后我们在编辑器中修改代码,按Ctrl+S保存,修改效果就会实时同步,显示在浏览器中,再不用手动刷新。

image.png

Auto Close Tag 自动闭合标签

输入标签名称的时候自动生成闭合标签,特别方便。

image.png

image.png


image.png

image.png


Highlight Matching Tag 高亮显示匹配标签

这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。

image.png


使用mac的小伙伴可以选择下载Vscode-icons-mac,基本图标与Vscode-icons类似,就是文件夹采用的是mac风格。

image.png


TODO Highlight 高亮

如果我们在编写代码时想在某个地方做一个标记,后续再来完善或者修改里面的内容,可以利用此插件高亮显示,之后可以帮助我们快速定位到需要修改的代码行。

image.png

image.png


Code Spell Checker 单词拼写检查

我们在编写代码的时候经常会不小心拼写错误造成软件运行失败,安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议,大大帮我们减轻了排除bug的压力。

image.png

image.png


Improt Cost 成本提示

这个插件可以在你导入工具包的时候提示这个包的体积,如果体积过大就需要考虑压缩包,为后期上线优化做准备。

image.png

image.png

image.png


Bookmarks 书签

对代码进行书签标记,通过快捷键实现快速跳转到书签位置。

image.png



4、安装扩展插件

这部分主要介绍一些针对特定开发环境的插件

Vscode-element-helper

使用element-ui库的可以安装这个插件,编写标签时自动提示element标签名称。

image.png

image.png

image.png


Vetur语言包

VUE是时下最流行的js框架之一,很多公司都会选择基于VUE来构建产品,Vetur对VUE提供了很好的语言支持。

image.png


没有安装该插件之前之前编写后缀名为.vue的文件时代码是白色的

安装插件后编写vue文件输入s,按Tab键就可以自动补全模版。

image.png


并且将数据用折线图的形式展示出来,为你呈现一周内的工作趋势,曾经编写项目的时候最多一天编程将近12个小时,你的付出和努力wakatime都知道。

image.png


同时在他的官网中,也会显示用扇形图的形式显示你编写各个语言所占用的时间比例,以及你在各个项目中所用的时间占比,是一个非常好的数据报告,项目结束的时候你可以在它的Dashboard中清晰地看出自己的时间都是如何分配的。

image.png


Settings Sync VSCode设置同步到Gist

有时候我们到了新公司或者换了新电脑需要配置新的开发环境,这时候一个一个下载插件,再重新配置vs code就非常麻烦而且你还不一定记得那么全面,通过这个插件我们可以将当前vs code中的配置上传到Gist,之后再通过Gist下载,就可以将所有配置同步到新环境中了。

在Github首页点击头像,选择Settings进入设置页面。

image.png

点击左侧侧边栏Developer settings,进入开发者设置。

image.png


选择Personal access tokens,点击右侧Generate new token。

image.png


填写token名称,在下方勾选gist。

image.png


点击下方的Generate token按钮生成一个新的token。将生成的新的token保存下来。(新版插件好像是不用保存这个token了,应该是自动关联到github账户即可,我的Mac版是这样的)

在vscode中安装Settings Sync插件,输入Ctrl+Shift+p输入Sync,选择更新/上传配置。

image.png

新版:会弹出一个绑定github账号,绑定成功后编辑器左下角会出现sync同步字样,每次点击此处即可自动同步 

旧版:

将github中生成的token输入,点击回车。

image.png

在控制台中自动生成一串id,之后便可以通过token和id进行配置同步。

image.png

输入Ctrl+Shift+p输入Sync,选择下载配置,输入token和id即可同步下载。

image.png


SFTP本地更改文件自动同步到服务器端,妈妈再也不用担心我忘记上传修改后的文件啦

image.png

在你的编辑器左侧添加一个工作区,然后将你的项目文件目录添加 到这个工作区

安装插件后在编辑器搜索sftp:config

image.png

提示你刚才添加的工作区

image.png

这是我的配置示例,仿照更改保存即可

{
"name": "hauwei new",
"host": "10.211.55.10",
"protocol": "sftp",
"port": 22, //服务器端口
"username": "root", //服务器账号
"password": "123456", //服务器密码
"remotePath": "/www/huawei", //服务器中项目目录
"uploadOnSave": true //自动上传同步文件
}

这时候左侧会sftp中会出现一个服务器目录中的文件夹

image.png

当然,你在这个工作区中打开的文件只能查看,不能编辑,这时候你直接在这个编辑器中回到本地的工作区编辑文件,保存后会自动上传到服务器端


6、颜色主题

作为一名程序员,每天大部分时间都是坐在电脑前敲代码,需要长时间的跟编辑器打交道,为我们的vscode选择一款好看的颜色主题,能极大地提升写代码过程中的愉悦感,为了保护眼睛,这里推荐一个深色主题Notepad++ keymap

image.png



7、常用设置

我们可以在settings.json中手动进行一些设置,让我们的编辑器更好用。

关闭标签介绍信息

我们在编写代码的时候鼠标移动到某个标签上,经常会自动弹出一些介绍信息,挡住部分代码,给我们的阅读带来了很大的困难,一直没有找到关闭它的方法,目前可以通过设置时间延迟暂时实现这个效果,我设置的5000毫秒,你可以设置的更大一些,基本上它就不会弹出来了。

"editor.hover.delay": 5000

image.png


自动折行

设置代码根据编辑器窗口大小自动折行

"editor.wordWrap": "on"

字体设置

// 一款适合代码显示的字体包(需要将字体包下载到本地)

"editor.fontFamily": "Source Code Pro, 'Source Code Pro'",

// 设置代码字体大小

"editor.fontSize": 15,

自动保存

目前有四个选项:

  • off:关闭自动保存。

  • afterDelay:当文件修改后的时间超过"Files:Auto Save Delay"中配置的值时自动进行保存。

  • onFocusChange:编辑器失去焦点时自动保存更新后的文件。

  • onWindowChange:窗口失去焦点时自动保存更新后的文件。

"files.autoSave": "off"

关闭代码提示

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }

未完待续。。。


评论