VSCode

简介

• 方便的git管理

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

• markdown

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

• 代码编写

  • 多点编辑

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

安装

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

配置命令行启动（mac/linux环境）

方法一

alias code='/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code'

传送门

方法二

VS Code 提供了一个 code 命令，用来在 shell 环境下调用编辑器。使用快捷键 ⇧⌘P（或 F1） 唤起命令面板，输入以下命令即可完成安装。

 

enter image description here

基本配置

通过Code->首选项->设置打开配置，一般来说安装插件会自动添加配置。如有需要也可以自行设置配置。以下是一些简单的配置，具体详情可查看配置文件。

{   
   //忽略推荐的扩展
   "extensions.ignoreRecommendations": true,

   // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
   "editor.tabSize": 2,
   "editor.detectIndentation": true,

   // 针对JavaScript语言的配置
   "[javascript]": {
       "editor.insertSpaces": true,
       "editor.tabSize": 2
   },

   // 指定工作台中使用的颜色主题。
   "workbench.colorTheme": "Monokai Dimmed",
   // gitlens配置
   "gitlens.advanced.messages": {
       "suppressCommitHasNoPreviousCommitWarning": false,
       "suppressCommitNotFoundWarning": false,
       "suppressFileNotUnderSourceControlWarning": false,
       "suppressGitVersionWarning": false,
       "suppressLineUncommittedWarning": false,
       "suppressNoRepositoryWarning": false,
       "suppressUpdateNotice": false,
       "suppressWelcomeNotice": true
   },
   
   // 控制是否显示minimap
   "editor.minimap.enabled": true
}

基本操作

打开项目

windows: 直接拖动文件/文件夹至vscode即可打开
mac/linux: 除上面方法外，可配置code命令，通过在命令行运行code XXX打开项目。

打开控制台

执行ctrl+shift+p即可打开vscode控制台。
控制台是vscode插件执行部分的一个重要地方！

打开命令行

点击vscode下方的任务栏

打开分屏

右上角分屏按键

跳转到定义的地方

ctrl + 鼠标

多重光标操作

alt+鼠标点击

块选择

shift+alt+鼠标

folding折叠

  Fold (Ctrl+Shift+[) 折叠所在的这个部分
  Unfold (Ctrl+Shift+]) 取消所在部分的折叠

  Fold All (Ctrl+K Ctrl+0) 折叠当前编辑文件的所有可折叠部分
  Unfold All (Ctrl+K Ctrl+J) 取消当当前文件所有折叠

  Fold Level X (Ctrl+K Ctrl+2 for level 2) 折叠所有level x（还可以用 ctrl+3、ctrl+4等）的缩进去（除了当前编辑位置所在的）

注释

ctrl+/ 加/解注释

git log

打开vscode控制台，输入git log可查看（需安装Git History插件）

git提交描述

安装git lens插件后，会在每行代码后显示最近的修改信息

git基本操作

打开vscode控制台，可以输入git命令。

插件

markdown

• Markdown Preview Enhanced

Html

• Auto Close Tag
• HTML CSS Support
  在 html 标签上写class 智能提示当前项目所支持的样式（必备）
• htmltagwrap
• HTML Boilerplate
• Color Info

样式

• Sass

调试

• Code Runner
• Debugger for Chrome
• Quokka
  console.log显示
• CSS Peek
•  

代码风格

• htmlhint
• ESLint
• EditorConfig for VS Code
  用于支持 .editorconfig 配置规范

git流程管理

• Git History
• Git Lens

代码碎片

• JavaScript (ES6) code snippets
• JavaScript Snippet Pack
• jQuery Code Snippets
• React-Native/React/Redux snippets for es6/es7
  react代码片段，下载人数超多:wink:

vue

• vetur
  语法高亮、智能感知
• VueHelper
  vue代码碎片
• Vue 2 Snippets
  vue2代码碎片

正则

• Regex Previewer
  测试正则的插件

小玩意

• filesize
• ndenticator
  突出目前的缩进深度
• Live Sass Compiler
• open in browser
• Path Intellisense
• vscode-faker
  生成假数据，地址，电话，图片等等
• vscode-icons
• TODO Parser
• TODO Highlight

好用的小功能

内部使用的命令行环境

cmder基本配置和使用

代码片段

通过Code > 首选项 > 用户代码片段，选择进入目的语言的代码段设置文件；

一个简单的例子：

"For Loop": {
   "prefix": "for",
   "body": [
       "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
       "tvar ${element} = ${array}[${index}];",
       "t$0",
       "}"
   ],
   "description": "For Loop"
},

详细的说明请看这里[VS Code]跟我一起在Visual Studio Code 添加自定义snippet（代码段），附详细配置。
一般来说，网上已经有很多人写好了很多好用的snippet，在插件中搜索snippet查找相关的代码片段使用。