vscode的常用快捷键和插件

发表于:2017-09-03

使用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

这些都是一些常用的。 其他的比如复制粘贴大家都会。

常用插件

路径补全非常实用。   
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

一些有用的设置

设置位于左下角的齿轮

// 忽略某些文件显示
"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为tab自动展开,单有时候并非这样,所以要设置为true
"emmet.triggerExpansionOnTab": true,

// 有些文件对emmet不生效,那么需要配置才能支持,比如vue
"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
},

// 对某些后缀文件进行关联
"files.associations": {
    "*.vm": "html"
},
编辑器
广告