VSCode搭建开发环境

304 阅读1分钟

一、通用配置

1、安装通用插件

vscode-icons

Project Manager

2、设置vscode资源管理器下的目录树缩进

打开左下角 管理 -> 设置;然后在 搜索框 输入:tree

如下图显示相关选项, 对 控制树缩进像素值 进行修改

3、设置缩略图显示的列数

打开左下角 管理 -> 设置;然后在 搜索框 输入:minimap

如下图显示相关选项, 对 Max Column 进行修改

4、设置字体大小

打开左下角 管理 -> 设置;然后在 搜索框 输入:font

如下图显示相关选项, 对 Font Size 进行修改

5、设置打开外部终端的快捷键

我将【 alt+r 】作为打开外部终端的快捷键,打开VSCode键盘快捷方式设置界面,搜索【外部终端】,设置快捷键即可。

6、设置打开/关闭终端的快捷键

我将【 command+t 】作为打开/关闭终端的快捷键,打开VSCode键盘快捷方式设置界面,搜索【查看:切换终端】,设置快捷键即可。

7、其它默认的快捷键

【打开/隐藏】资源管理器的快捷键:【 command+b 】

8、修改默认终端为zsh

打开左下角 管理 -> 设置;然后在 搜索框 输入:default profile

在终端执行:open ~/.zshrc

在弹出的文件最底部添加:source ~/.bash_profile

在终端执行:source ~/.zshrc 更新.zshrc配置

9、切换行注释、切换块注释

切换行注释:command + /

切换块注释:shift + control + A

将切换块注释的快捷键修改为:alt + command + /

打开VSCode键盘快捷方式设置界面,搜索【切换块注释】,设置快捷键即可。

10、修改格式化代码的快捷键

默认的快捷键为:shift + command + l

需要将快捷键修改为:alt + command + l

打开VSCode键盘快捷方式设置界面,搜索【格式化文档】,设置快捷键即可。

11、文件夹下只有一个文件时,会自动合成一行显示

打开左下角 管理 -> 设置;将Compact Folders取消勾选

12、macbook上使用code命令打开vscode项目

打开 VSCode –> command+shift+p –> 输入shell command

点击提示Shell Command: Install 'code' command in PATH运行

使用:打开终端,cd到需要打开的文件夹,然后输入命令code ./即可打开

13、设置为双击打开文件

打开左下角 管理 -> 设置;搜索 open mode ,将 singleClick 改为 doubleClick 即可。

14、设置为双击打开文件夹

打开左下角 管理 -> 设置;搜索 expandMode,将 singleClick 改为 doubleClick 即可。

15、禁用左侧资源菜单的自动聚焦和展开

打开左下角 管理 -> 设置;搜索 explorer.autoReveal ,将 true 改为 false 即可。

16、打开文件时始终在新标签页打开

打开左下角 管理 -> 设置;搜索 workbench.editor.enablePreview ,取消勾选。

17、打开settings.json的方法

进入到设置界面之后,最右侧有一个【打开设置(json)】的图标,我们要点击这个图标,即可打开配置文件:

18、XML中标签自动补全功能失灵的解决办法

在settings.json文件中,添加:

{
    "files.associations": {
        "*.xml": "html"
    }
}

二、Node.js开发

1、添加代码提示

给当前项目添加node的@types类型定义库,否则导入模块时没有require提示。

npm i @types/node -D

一般情况下,在安装exceljs等第三方模块时,会自动的将@types/node一起安装到当前项目下的node_modules里,但如果不想安装第三方模块时,就需要主动的安装一下@types/node到自己的项目下了。

如下所示,项目下没有安装@types/node时,在js文件里输入require没有提示

如下所示,项目下安装了@types/node后,在js里输入require时有代码提示