强大的 VS Code

我是小助手 2018-07-09

前端与交互设计 css code visual git 插件 html editor

简介

Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了!

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作......

为什么选择VS Code工程开发

1

作为前端开发的我,之前的开发过程中一直用的是Atom这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS CodeAtom更加的流畅,比webstorm更轻量级。一次偶然换的工作后,项目组要求统一IDE,让我了解到了VS Code,这边简单介绍下VS Code日常开发的需求。

VS Code精选主题

主题插件安装流程

首先先简单介绍些主题插件的安装流程:

第一步,点击扩展商店搜索你要找的插件名称如Atom One Dark Theme,点击安装;

第二部,安装好了之后只是证明你本地的VS Code上面有这个插件了,还需要将当前使用的主题插件切换成你想要的才行;

①点击右下角的设置按钮,进入命令面板;

②搜索颜色主题关键字;

③点击想要的主题完成切换。

一个编辑器界面的好看与否,真心挺重要的,之前对atom一直恋恋不舍,完全就是因为它的主题界面太优雅了。下图是笔者配置好的VS Code界面截图,下面推荐几款好看的主题:

VS Code 主题插件列表(推荐)

1. One Dark Pro

One Dark Pro的主题界面效果如下(推荐指数5星) One Dark Pro

1

2. Atom One Dark Theme

Atom One Dark Theme的主题界面效果如下(推荐指数5星) Atom One Dark Theme

1

3. Eva Theme

Eva Theme的主题界面效果如下(推荐指数5星) Eva Theme

4. Material Palenight Theme

Material Palenight Theme的主题界面效果如下(推荐指数5星) Material Palenight Theme

更多Visual Studio Code 主题插件请参考VS Code Downloads

VS Code精选插件

VS Code所有的插件都可以在VS Code Downloads插件库中找到,如下图:

Auto Close Tag

Auto Close Tag:匹配标签,关闭对应的标签。对于HTML/XML很实用。

Auto Rename Tag

Auto Rename Tag:改变标签的时候同时改动开闭合标签;对于HTML/XML很实用。

HTML CSS Support

HTML CSS Support : 这个也是HTML必备插件之一。

CSS Peek

CSS Peek : html和css中关联css的跳转

Code Runner

Code Runner : 代码编译运行看结果,支持众多语言

Git History

Git History : 查看git分支提交日志的插件

Git History Diff

Git History Diff : 寻找每一个git分支上面提交过的节点,并可以对比差异性。

Path Autocomplete

Path Autocomplete : 路径智能补全插件。

Path Intellisense

Path Intellisense : 路径智能提示插件。

beautify

beautify :良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;但是react工程的jsx文件用beautify插件格式化会乱掉,建议不要用

Prettier - Code formatter

Prettier - Code formatter : 代码格式化插件,主要针对工程中的JavaScript / TypeScript / CSS

Prettier Now

Prettier Now : 支持语言比较全面的代码格式化插件,主要是支持jsx /tsx ,还有sass / less等(问的react工程基本上就是用这2个Prettier插件格式化代码)

Terminal

Terminal : vs code 内置的命令行插件,也比较实用。

Bookmarks

Bookmarks : 这个插件支持在文件特定的行做标记,更好的提高开发效率。

Bracket Pair Colorizer

Bracket Pair Colorizer :很多括号的情况下,这个插件可以做一个颜色的区分,代码一目了然。

1

Chinese (Simplified) Language Pack for Visual Studio Code

Chinese (Simplified) Language Pack for Visual Studio Code : 适用于 VS Code 的中文(简体)语言包。

filesize

filesize : 编辑器底部显示当前文件的大小。

Markdown Preview Enhanced

Markdown Preview Enhanced : 本地Markdown文档预览插件。

vscode-icons

vscode-icons : 一套vs code的图标插件。

npm

npm : 不多说npm。

open-in-browser

open-in-browser : 一键在浏览器中打开

Live Server

Live Server :一键开启本地服务。

Local History

Local History个人感觉很有用 本地代码的一个保存日志,在没有git,svn,或者很长时间没有提交过代码的情况下,感觉挺实用,再也不怕代码回滚。

GitLens — Git supercharged

GitLens — Git supercharged : GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解。

11

VS Code常用快捷键

VS Code的快捷键有很多,需要具体的请仔细参考 VS Code => 右下角设置按钮 => 键盘快捷方式

1

我们也可以自定义快捷键,在keybindings.json里面设置覆盖即可

快捷键完全是个人操作习惯,这里不多介绍,我常用的有这几个:

打开命令面板    cmd + shift + p / F1
打开设置页面    cmd + ,
删除一行        cmd + E(自定义)
添加书签        cmd + option + k
代码格式化      control + opiton + B
复制代码

VS Code git代码管理实战

git现在是很常见的代码管理工具,VS Code 也有内置的git插件,当然,要是你觉得不完美,可以安装一些常用的git插件等,简单介绍下VS Code 下git的提交步骤。

这里我以GitHub上面新建的一个仓库为例,仓库新建后默认分支是master,这里我在GitHub上新建了2个远程分支develop01develop02,当你在VS Code中点击切换到某一个远程分支的时候,VS Code会自动给你创建一个和当前远程分支对应的本地分支,如origin/develop02 对应develop02,如origin/master 对应master,如上图所示。

现在我们在master分支上面提交代码,

  • 第一步,先暂存要提交的文件
  • 第二步,填下提交日志
  • 第三步,点击对勾按钮完成提交

提交好了之后还需要拉取git远程分支的代码才能推送。

  • 第四步,拉取远程代码,解决冲突
  • 第五步,推送到远程分支上

然后就没有然后了,提交完成。

假如你因为工作需求的原因,需要在不同的分支上面提交不同的代码,那就涉及到分支的切换了。首先第一步,切换分支之前先提交代码,不然老是有报错日志,切换了分支后,本地的代码也会对应分支改变。

如上图,master切换成develo01之后,master分支上刚提交的代码成了develo01上对应的代码。

你问我答

1.VS Code 怎么更改默认的设置?

笔者使用的是mac,使用快捷键 Com + , 打开用户默认设置界面,左边是默认设置,右边是自定义设置,根据个人工作场景而定吧,就像我这边就统一格式化代码缩进4格等,还可以设置忽略一些文件夹等。

{
    "explorer.confirmDelete": false,
    // 主题
    "workbench.iconTheme": "vscode-icons",
    // 小地图
    "editor.minimap.enabled": true,
    // 主题风格One Dark Pro
    "workbench.colorTheme": "One Dark Pro",
    "window.zoomLevel": 1,
    "extensions.autoUpdate": false,
    // 字体大小
    "editor.fontSize": 13,
    "editor.snippetSuggestions": "top",
    "diffEditor.ignoreTrimWhitespace": true,
    // 设置格式化缩进4格
    "prettier.tabWidth": 4,
    "vetur.format.defaultFormatter.html": "prettier",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "gitlens.historyExplorer.enabled": true,
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    //粘贴自动格式化
    "editor.formatOnPaste": false,
    //保存自动格式化
    "editor.formatOnSave": false,
    // 用来忽略工程打开的文件夹
    "files.exclude": {
        "**/.vscode": true,
        "**/.DS_Store": true,
        "**/.history":true,
        "**/nbproject":true
    },
    // 用来忽略搜索的文件夹
    "search.exclude": {
        "**/node_modules/**": true,
        "**/bower_components/**": true,
        "**/image/**": true,
        "**/*.xml": true,
        "**/.history/**":true,
        "**/nbproject/**":true,
        "**/vscode/**":true

    },
    // 创建和更新代码的头部信息作者
    "fileheader.Author": "Baldwin",
    "fileheader.LastModifiedBy": "Baldwin",
}
复制代码

2.假如我几天没有提交代码了(git),今天突然发现代码youbug,需要还原到昨天版本,VS Code能做到吗?

能。参考上面的 VS Code插件 Local History

基本上就介绍到这里(有好的插件或者主题欢迎留言,一定给update上去),希望对你使用VS Code有帮助,有问题欢迎留言,一定积极回复





原文发布时间为:2018年06月23日

作者:baldwin

本文来源:掘金 如需转载请联系原作者
登录 后评论
下一篇
我是你爱豆
12642人浏览
2019-08-22
相关推荐
Resharper的使用
629人浏览
2014-09-12 13:24:00
Resharper的使用
569人浏览
2017-06-30 11:13:00
谈谈VS中的模板
670人浏览
2017-12-05 13:04:00
Resharper 详细教程
824人浏览
2017-12-16 16:12:00
Resharper的使用
269人浏览
2013-08-28 08:54:00
0
0
0
3113