VS Code精选主题


VScode使用教程大全 - 图1

主题插件安装流程

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

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


VScode使用教程大全 - 图2

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

①点击左下角的设置按钮，进入命令面板；
②搜索颜色主题关键字；

VScode使用教程大全 - 图3


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

VScode使用教程大全 - 图4


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

VScode使用教程大全 - 图5

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

  1. One Dark Pro
    One Dark Pro的主题界面效果如下（推荐指数5星） One Dark Pro

    VScode使用教程大全 - 图6


    2. Atom One Dark Theme
    Atom One Dark Theme的主题界面效果如下（推荐指数5星） Atom One Dark Theme

    VScode使用教程大全 - 图7


    3. Eva Theme
    Eva Theme的主题界面效果如下（推荐指数5星） Eva Theme

    VScode使用教程大全 - 图8


    4. Material Palenight Theme
    Material Palenight Theme的主题界面效果如下（推荐指数5星） Material Palenight Theme

    VScode使用教程大全 - 图9

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

VS Code精选插件

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

VScode使用教程大全 - 图10

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 ： 这个插件支持在文件特定的行做标记，更好的提高开发效率。

VScode使用教程大全 - 图11

Bracket Pair Colorizer

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

VScode使用教程大全 - 图12

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 ：一键开启本地服务。

fileheader

fileheader ：感觉用得上 新建文件作者注释

VScode使用教程大全 - 图13

在自定义设置页面(comd+,)，可以设置一些作者信息,然后打开命令面板(comd+shift+P),输入fileheader回车即可


VScode使用教程大全 - 图14



VScode使用教程大全 - 图15

Local History

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

VScode使用教程大全 - 图16

GitLens — Git supercharged

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

VScode使用教程大全 - 图17

VScode使用教程大全 - 图18

VS Code常用快捷键

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

VScode使用教程大全 - 图19

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


VScode使用教程大全 - 图20


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




  4. option


  6. VS Code git代码管理实战

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

    VScode使用教程大全 - 图21


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

    VScode使用教程大全 - 图22

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

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

VScode使用教程大全 - 图23

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

    然后就没有然后了?，提交完成。

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

VScode使用教程大全 - 图24

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

git提交代码这部分，还可以使用相关git代码管理工具实现呢，如SourceTree、Tower等工具都很好用，这边也整理了一篇文章，欢迎收藏

你问我答

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

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

  1. {
  2.     "explorer.confirmDelete": false,
  3.     // 主题
  4.     "workbench.iconTheme": "vscode-icons",
  5.     // 小地图
  6.     "editor.minimap.enabled": true,
  7.     // 主题风格One Dark Pro
  8.     "workbench.colorTheme": "One Dark Pro",
  9.     "window.zoomLevel": 1,
  10.     "extensions.autoUpdate": false,
  11.     // 字体大小
  12.     "editor.fontSize": 13,
  13.     "editor.snippetSuggestions": "top",
  14.     "diffEditor.ignoreTrimWhitespace": true,
  15.     // 设置格式化缩进4格
  16.     "prettier.tabWidth": 4,
  17.     "vetur.format.defaultFormatter.html": "prettier",
  18.     "gitlens.advanced.messages": {
  19.         "suppressShowKeyBindingsNotice": true
  20.     },
  21.     "gitlens.historyExplorer.enabled": true,
  22.     "atomKeymap.promptV3Features": true,
  23.     "editor.multiCursorModifier": "ctrlCmd",
  24.     //粘贴自动格式化
  25.     "editor.formatOnPaste": false,
  26.     //保存自动格式化
  27.     "editor.formatOnSave": false,
  28.     // 用来忽略工程打开的文件夹
  29.     "files.exclude": {
  30.         "**/.vscode": true,
  31.         "**/.DS_Store": true,
  32.         "**/.history":true,
  33.         "**/nbproject":true
  34.     },
  35.     // 用来忽略搜索的文件夹
  36.     "search.exclude": {
  37.         "**/node_modules/**": true,
  38.         "**/bower_components/**": true,
  39.         "**/image/**": true,
  40.         "**/*.xml": true,
  41.         "**/.history/**":true,
  42.         "**/nbproject/**":true,
  43.         "**/vscode/**":true
  45.     },
  46.     // 创建和更新代码的头部信息作者
  47.     "fileheader.Author": "Baldwin",
  48.     "fileheader.LastModifiedBy": "Baldwin",
  49. }
  50. 复制代码

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

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