使用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
# 可以查看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"
}
}