一定要知道的 VSCode 插件和快捷键

2019-12-21 本文已影响0人 CondorHero

前言：如果不写大项目的话，本人最喜欢的还是 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
    }
}

一定要知道的 VSCode 插件和快捷键

一、常用快捷键

二、插件

三、大纲（outline）和 npm scripts

四、.vscode文件

猜你喜欢

热点阅读