vscode 简介

Posted 2021-03-12 xiewangfei123

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

该设置在 `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 Quokkaconsole.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/es7react代码片段，下载人数超多:wink:vue vetur语法高亮、智能感知VueHelpervue代码碎片Vue 2 Snippetsvue2代码碎片 正则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}

详细的说明请看这里[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段)，附详细配置。

一般来说，网上已经有很多人写好了很多好用的snippet，在插件中搜索snippet查找相关的代码片段使用。

传送门

vscode 基本配置和使用VS Code配置及插件推荐vscode配置指南VS Code初体验[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段)，附详细配置