前言：如果不写大项目的话，本人最喜欢的还是 sublime，轻捷而快速，但在写大项目的时候会有点吃力。webstorm 最近也用了总体来讲有些重，功能和 VSCode其实也很像。一般这些编辑器会好些插件和快捷键提升我们的开发效率。快捷键天天用我们都能记住但是这插件没事估计没人去记，换个工作有的从头配，VScode 还不像我用的 sublime ，sublime 我配置好直接拷走到任何一台电脑上都能用。VScode 插件配置真让人心累。
一、常用快捷键
同样适用于 sublime 编辑器。
-
多行转一行
Ctrl+j -
格式化代码，缩进问题
VScode 默认的代码格式化，缩进很不符合个人的口味。有必要装个插件来替代下，
这里使用 beautify 快捷键是 ctrl+shift+f，第一次使用会让选择默认格式工具。格式化支持 javascript，JSON，CSS，Sass，和HTML。
-
去掉尾随空格
保存时去掉空格和缩进。
4.代码折叠 ctrl+shift+[或]
- 向上/向下 移动行 Ctrl+shift+↑/↓
- 复制行 ctrl+shift+d
- 删除行Ctrl + x
- 拆分编辑框 Shift + Alt + 2,3,4
- 编辑器网格布局，拖拽成一个四方格
- 单词选中 Ctrl+ d 如果你多次点击此快捷键，将会选中多个相同的关键字。可直接批量修改变量。
- 删除上一个词 Ctrl + backspace
- 选中词Ctrl + Shift + 右键头 / 左键头
- 跳转到特定行 ctrl+g
- Ctrl +` 打开默认终端;
- Ctrl + Shift +` 新建新的终端;
-
code .使用 VS Code 打开当前目录
二、插件
- Sublime Text Keymap and Settings Importer
代码感应 - Auto Close Tag 自动添加HTML / XML关闭标签，例如使用自定义组件的时候。
- Open-In-Browser
由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，
所以此插件在快捷菜单中添加了在默认浏览器查看文件选项。 - Auto Rename Tag
Atom自带，自动重命名配对的HTML / XML标签 - Bracket Pair Colorizer 颜色识别匹配括号，非常好看。
- any-rule 你要的"正则"都在这!
在线网址：https://any86.github.io/any-rule/
- ctrl+p
- 输入zz可以看到正则列表.
- 或者输入关键词, 比如"手机".
- 安装插件KoroFileHeader（函数标准注释）
- 文件头部注释
快捷键：crtl+alt+i（window）
文件开头，作者和写作时间什么的。 - 函数注释
快捷键：ctrl+alt+t (window)
主要用来描述
- Relative Path 相对路径
ctrl+alt+H 输入项目中的文件，即在光标处插入文件的相对路径。 - Vetur 支持Vue语法
- Vue VSCode Snippets Vue的快捷键。
例如：vbase 自动打开基本框架，vb，vd，vc，等等。 - ES7 React/Redux/GraphQL/React-Native snippets
支持ES6、7、8、9等等，还支持 React（rcc），redux等。 - Bootstrap 4 & Font awesome snippets
包含Bootstrap 4＆Font awesome 的代码片段 - Document This添加注释块
快捷键： 按两次Ctrl+alt+d -
filesize 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
- file-icons 和 vscode-icons目录树图标
Windows => File > Preferences > File Icon Theme > VSCode Icons文件图标
Windows: Go to File → Preferences → File Icon Theme → File Icons设置 - Image Preview 鼠标移到路径里显示图像预览
更多去参考：vscode 前端插件推荐
三、大纲（outline）和 npm scripts
大纲是 package.json 文件的预览，没啥用。有用的是
NPM SCRIPTS ，点击三角形 VS Code 会自动打开终端，输入 npm run test。如果编辑器设有显示
NPM SCRIPTS ，通过 settings 输入 npm 打开对应的设置：
四、.vscode文件
项目编辑器配置文件，通过 settings => workspace => Font Size 只要编辑下字体就会自动生成 .vscode 文件夹里面有个 setting.json：
setting.json 的默认内容为：
{
"editor.fontSize": 22
}
如果我们要在左侧文件图标预览区隐藏文件，可以配置让相应的文件消失减少编程的干扰，我的 Vue + TypeScript 配置如下。
{
"editor.fontSize": 22,
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/shims-tsx.d.ts": true,
"**/shims-vue.d.ts": true,
"**/.browserslistrc": true,
"**/.eslintrc.js": true,
"**/.gitignore": true,
"**/babel.config.js": true,
"**/package-lock.json": true,
"**/tsconfig.json": true
}
}
网友评论