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
好用的小功能
内部使用的命令行环境
代码片段
通过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查找相关的代码片段使用。
传送门
vscode 基本配置和使用
VS Code配置及插件推荐
vscode配置指南
VS Code初体验
[VS Code]跟我一起在Visual Studio Code 添加自定义snippet（代码段），附详细配置
