vscode的常用快捷键和插件

2017-09-03 · xiejiahe

使用vscode的理由


1. 秒开大文件
2. 默认就支持了Sass、Less、TypeScript最新的JavaScript语法也能支持ES67.
3. 天生就是为前端而生, 不需要安装插件也能玩,所以需要的插件不多。

常用快捷键

  
Mac是Command,window是Ctrl,删除当前行,  其实这个是剪切。不过这个真的比较方便。
Command+X

展开与收缩侧边栏, 这个很实用。
Command+B

滚动顶部或底部
Command+箭头上或下

选中批量替换, 比如双击一个变量然后按住Command+d, 然后输入要替换的文字
Command+d

搜索
Command+F

反撤销代码,跟Command+Z 相反
Command+Shift+Z

移动当前光标所在行代码
Alt+上下键

调出终端,注意是反引号,在左上角
Ctrl+`

跳到指定行
Ctrl+G

Command+J
快速打开内置终端

Control+R
打开历史项目
  
这些都是一些常用的。 其他的比如复制粘贴大家都会。

常用插件

路径补全非常实用。   
Path Intellisense 	

显示当前文件大小, 安装后左下角会显示
filesize

默认的vscode文件图标非常丑啊, 安装了这个插件,真是亮双了眼
vscode-icons

当你改变开始标签的时候结束标签页跟着改变。
Auto Rename Tag

生成注释,在函数前敲 /** 就会自动生成
Document This

右键浏览器打开当前文件
Open in Browser

vscode也有像atom插件一样打字暴击效果,需要在设置中配置 "powermode.enabled": true,
power mode

# 将react 代码转换成 typescript
# https://github.com/lyft/react-javascript-to-typescript-transform
React JavaScript to TypeScript Transform

# 可以查看git历史提交记录
Git Graph

常用设置

设置位于左下角的齿轮

{
    // 忽略某些文件显示
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/.idea": true
    },

    // 设置字体大小
    "editor.fontSize": 20,

    // 将tab设置成2个空格缩进
    "editor.tabSize": 2,

    // 当文件失去焦点时自动保存文件
    "files.autoSave": "onFocusChange",

    // 超出自动换行
    "editor.wordWrap": "on",

    // 如果用到了修饰器会发出警告,如果想屏蔽警告请设置true。 以后的版本可能会支持
    "javascript.implicitProjectConfig.experimentalDecorators": true,

    // 有些文件对emmet不生效,那么需要配置才能支持,比如vue
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html",
        "vue": "html",
        "javascript": "javascriptreact"
    },

    // 对某些后缀文件进行关联
    "files.associations": {
        "*.vm": "html"
    }
}
编辑器
原创文章,转载请注明出处。