VSCode入门简介
本文最后更新于890天前,其中的信息可能已经有所发展或是发生改变。

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) 唤起命令面板,输入以下命令即可完成安装。

 

 
VSCode入门简介
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查找相关的代码片段使用。

 

点击数:122

评论

  1. mondayice 博主
    Windows Chrome 74.0.3729.131
    2年前
    2019-5-15 16:22:54

    测试一下

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇