vscode

录入时间: 2019-08-27 05:55:53

地址: https://code.visualstudio.com/ 点击前往

VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。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查找相关的代码片段使用。



作者:2林子易2
链接:https://www.jianshu.com/p/b92038f07914
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。