编程环境配置之VSCode


任何一个程序员都有自己喜爱的编辑器、工具、开发利器,有这样一群人,对于 vim 这种上古神器难以驾驭、IDE 又太笨重,这时候多了一个选择 vscode!!!

vscode 重新定义了编辑器,它开源、免费、Runs everywhere,是一款介于 IDE 和编辑器之间的产物,我们不能用 IDE 的所有特性都往它身上压,如果都可以的话不就是 IDE 吗?不就是吗?所以用起来的感觉你懂的,美滋滋(๑•̀ㅂ•́) ✧

那么这家伙都有什么牛逼之处呢?

特性

说了这么多你一定迫不及待想尝试吧~ (也许并不是)那现在

安装 vscode

我知道在座的各位其实根本不用我教你怎么安装,因为它是傻瓜式安装啊!它家的官网是 https://code.visualstudio.com/,你只需要在首页下载符合你操作系统的软件即可。

支持 WindowsLinuxMac

了解 vsccde

为什么要了解它呢?你不了解它的组成就不知道怎么把它用好(高能型大佬除外)。

布局

img

上面是 vscode 的布局,和大多数编辑器一样,分为

在我看来学习一款编辑器并不用像学习编程语言那样,按照某个教程把所有的功能都学会,我更喜欢探索性的尝试自己需要的那些东西,比如在 View Bar 中如何的5个功能,其实点一点就大概明白什么意思了,查阅文字资料只是让自己更精确的掌握使用姿势。

配置

vscode 的用户配置分3个级别,分别是默认配置、全局配置和工作区配置,优先级也依次递增。对于团队项目,一些规范可以通过项目目录下建一个 .vscode/setting.json 文件进行配置,比如:

// tab长度 
"editor.tabSize": 2, 
// 启用后,将在保存文件时剪裁尾随空格。 
"files.trimTrailingWhitespace": true, 
// 配置 glob 模式以排除文件和文件夹。 
"files.exclude": { 
  "**/.git": true, 
  "**/.svn": true, 
  "**/.DS_Store": true, 
  "**/.idea": true 
},

这个配置我一般是不用的,只用用户配置,反正电脑就一个用户。配置一下字体大小、自动保存等。

必装插件

  1. Beautify:代码高亮
  2. Terminal:直接唤起终端
  3. Project Manager:多个项目切换
  4. Auto Close Tag:标签自动闭合(其实我觉得可以内置的)

怎么安装呢?

img

在扩展输入框里输入你想用的插件就可以了,当然它还会经常推荐给我们排行比较高的插件,可以尝试安装,安装完成后重新加载编辑器就可以使用了。

常用快捷键

下面这些快捷键是我常用的,如果你想看更全的可以看看 VS Code有哪些常用的快捷键

Ctrl+P 模式: (Mac 是 CMD+P)

配置 Java 环境

先安装 Java 语言相关的插件 4 枚

  1. Language Support for Java(TM) by Red Hat
  2. Debugger for Java
  3. Java Test Runner
  4. Maven for Java

有人想问了,妈耶还要4个插件,这么麻烦的吗?

第一个插件干嘛的?运行 Java 代码的,第二个呢?调试的,不调试可以不装,第三个运行单元测试,不测试可以不装,第四个建议装上,一个标准化的 Java 工程一定不是几个文件组成,maven 是在Java环境下构建应用程序的软件(本地要先安装哦)。

这时候还需要配置一下 java.home,我的是

"java.home": "/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home",

大功告成,现在你可以在 vs code 下创建一个 Mmp.java 开始写 Hello vscode! 了。

public class Mmp {

  public static void main(){
    System.out.println("Hello vscode!");
  }

}

点击 调试 或者按下 F5 运行这久经码场的输出语句。具体操作见文章底部视频。

代码定位

img

按住 ctrl 键鼠标悬停在类上面会有类描述,点击即可进入类定义处,方法也是同样。

代码重构

img代码重构

很强大的一个地方就是我们有时候会修改字段、方法的名称。

  1. 找到所有的引用: Shift + F12
  2. 同时修改本文件中所有匹配的: Ctrl+F12
  3. 重命名:比如要修改一个方法名,可以选中后按 F2,输入新的名字,回车,会发现所有的文件都修改了
  4. 跳转到下一个 ErrorWarning:当有多个错误时可以按 F8 逐个跳转
  5. 查看 diff: 在 explorer 里选择文件右键 Set file to compare,然后需要对比的文件上右键选择 Compare with file_name_you_chose

运行 SpringBoot 项目

下载一个 SpringBoot 的示例工程

git clone https://github.com/JavaExamples/spring-boot-helloworld.git
code spring-boot-helloworld

什么?git 还不会

img

img

启动调试,选择 Java 语言,会提示我们 launch.json 文件是下面这样的

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Debug (Launch)-Application<spring-boot-helloworld>",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "stopOnEntry": false,
            "mainClass": "hello.Application",
            "projectName": "spring-boot-helloworld",
            "args": ""
        },
        {
            "type": "java",
            "name": "Debug (Attach)",
            "request": "attach",
            "hostName": "localhost",
            "port": 0
        }
    ]
}

主要看 mainClass,只有第一次生成这个文件,确认后点击 调试 即可看到控制台日志

img

尝试 Lombok

这个家伙你用不用都无妨,反正我是挺喜欢的。这里就不啰嗦到底干嘛的,简单来说就是我可以用一个 @Data 注解帮我自动生成(编译后生成)gettersettertoStringequalshashCode 这些方法,反正多花时间写这些代码也不会提高你的能力,修改的时候还要多花时间,完全没!必!要!好吗?

按照官方的文档我尝试了不在 maven 环境下是行不通的!行不通的。如果你可以的话在文章评论下告诉我哈~

所以我们安装一个 Lombok Annotations Support for VS Code 就可以了。

在 maven 工程中添加 lombok 依赖

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.16.20</version>
    <scope>provided</scope>
</dependency>

试一下吧

img

安装 vim 插件

VS Code 中输入快捷键 shift + ctrl + x, 或直接打开 扩展安装导航 搜索 vim, 选择 Vim ![./vimvscode.png], 点击 install 安装 安装结束后就可以使用 vscode 下的 vim 模式了 推荐: 关闭 vim 扩展的 useCtrlKeys, 保留一些 VS Code 自身的一些常用快捷键, 在 settings.json 里面添加配置 “vim.useCtrlKeys”: false

vim 入门

在 vs code 中打开文件时, 文件状态为默认为 vim 下的 Normal 模式 输入 i, 从 Normal 模式切换至 Insert 模式, 此时就可以正常输入文本了 单击 ESC 可以返回 Normal 模式

在 Normal 模式下可以进行如下操作

命令(按键)作用
i进入 Insert 模式
ESCInsert 模式退回 Normal 模式
:q退出文件编辑 (vs code 下用不到)
:w保存修改文件 (vs code 下用不到)
:wq保存 + 推出文件 (vs code 下用不到)

vim 定位

vim 光标定位命令

光标上下左右

命令作用模式
h光标向左移动一格Normal
l光标向右移动一格Normal
j光标向下移动一行Normal
k光标向上移动一行Normal
上下左右键上下左右切换光标Normal & Insert

: banlk 字符是指 空格, tab, 换行, 回车等

行内光标定位

命令作用模式
0到当前行开头Normal
home到当前行开头Normal & Insert
^到当前行第一个不是 blank 字符的位置Normal
$到当前行末尾Normal
g_到当前行最后有一个不是 blank 字符的位置Normal
gg到第一行Normal
nGn 为行编号, 到第 n 行Normal
G到最后一行Normal

词汇定位

1、默认方式, 一个单词由字母,数字和下划线组成

命令作用模式
ww(小写), 到下一个单词的开头Normal
ee(小写), 到下一个单词的结尾Normal

2、如果单词以 blank 字符分隔, 使用 大写的 E 或 W 分隔

3、单词匹配

命令作用模式
*移动到与当前光标匹配的下个单词(目前装的VS Code Vim 组件不生效)Normal
#移动到与当前光标匹配的上个单词Normal

括号匹配

命令作用模式
%定位与光标所在括号相对应的另一半,(使用前要将光标定位在某个括号上)Normal

vim 插入

vim 插入命令,光标定位完成后,进行插入操作前的命令, 命令执行后切换至 Insert 模式

命令作用模式
a在光标后插入, 光标定位后输入 i 命令默认是光标前插入的Normal
o小写 o 在当前行之后插入新的一行,相当与回车效果Normal
O大写 O 在当前行之前插入新的一行Normal

vim 查找

vim 是通过正则匹配来实现的
在 Normal 模式下, 先输入 /, 进入搜索模式
输入想要搜索的词汇, 此时在 vs code 中会高亮所有匹配项
单击 enter(回车) 键后, 点击 n 键就可以光标一个个定位匹配项

vim 替换

以下介绍的替换在 VS Code 中无法使用, 可以使用 其自带的 Ctrl + H 的替换
语法: vim 的替换语法为: :[addr]s/待替换字符/替换字符/[option]

: (英文冒号)

表示替换命令开始

[addr] 检索范围

1、.(小数点) 表示前按行
2、$: 表示文件最后一行
3、%: 表示整个当前文件
4、n(行号): 表示第 n 行
5、n1,n2: 表示 第 n1 行到第 n2 行
6、n, $: 表示 第 n 行到文档最后一行
7、., $: 表示 当前行到文档最后一行
8、., n: 表示当前行到文档第 n 行

s 替换操作

字母 s 表示替换操作

[option] 操作类型

[option] 表示操作类型
1、g: 表示全局替换, 在检索范围内替换所有匹配项
2、c: 表示确认替换, 在替换时需要 输入 y 一一确认
3、p: 表示显示替代结果, 按 enter 后执行替换
4、option 省略时仅对每行第一个匹配字符串进行替换

例子

:.s/from/to/ 将当前行中的第一个from,替换成to。如果当前行有多个from,则只会替换其中的第一个。
:%s/from/to/g 将文档中所有的 from 替换成 to
:1,5s/from/to/c 将文档的第 1 到第 5 行, 每行的第一个 from 替换成 to , 并需要确认
:6,$s/from/to/gc 从第 6 行开始至最后一行, 将所有的 from 换从成 to, 并需要确认
:.,7s/from/to/p 从当前行到第 7 行,将每行地一个 from 替换成 to, 替换前显示替换结果, 按回车后生效

vim 拷贝/粘贴/删除

vim 拷贝张贴命令

1、粘贴

命令作用模式
p小写 p, 在光标之后插入拷贝项Normal
P大写 P, 在光标之前插入拷贝内容Normal
np(nP)重复复制 n 次Normal

2、拷贝

命令作用模式
y拷贝当前行以及其后面一行,共两行Normal
yy拷贝当前行Normal
nyyn 为大于数字, 拷贝 n 行, 第一行为光标所在行Normal
ye从光标位置开始拷贝,至遇到第一个空后结束(不包括空格)Normal
yw从光标位置开始拷贝,至遇到第一个空后结束(包括空格)Normal
y$从光标位置开始拷贝,到当前行行末, 包括空格Normal
y0从光标位置开始拷贝,到当前行行首, 包括空格Normal
ynl从光标位置开始, 向右拷贝 n 个字符Normal
ynB从光标位置开始,向左拷贝 n 个单词Normal

如何拷贝某一块区域, 比较精确的选择拷贝区域?
在 Normal 模式下, 将光标定位至目标拷贝区域的开始或结束位置,
输入命令 v(小写) 进入试图模式
移动光标,光标所经过的位置都被选中,(跟鼠标选中形式一样)
区域选定结束后, 输入 y 命令, 复制成功
如果输入 大写 V 命令, 此时只能以行为单位选中区域

如何实现跨文件拷贝/粘贴?
在文件 A 复制的内容在文件 B 中使用,
使用命令 +y, 即将复制的内容添加到系统的剪切板, 供其他程序使用 (这个命令在 debian 下不好用, 只在全选复制的情况下有用, 复制部分的话使用右键复制,)
使用命令 +p, 可以将系统剪切板中的内容,粘贴到当前文件 (这个命令不好用)
在 Insert 模式下 (VS Code 中 Normal 模式也可以), 使用快捷键 shift+insert 可以将系统剪切板中的内容,粘贴到当前文件, (推荐使用)

3、删除

命令作用模式
dd剪切当前行Normal
ndd剪切 n 行, 当前行为第一行Normal
dw从光标位置开始剪切, 至遇到第一个空后结束(包括空格)Normal
de从光标位置开始剪切, 至遇到第一个空后结束(不包括空格)Normal
d$从光标开始位置剪切, 至当前行行末, 包括空格Normal
d0从光标开始位置剪切, 至当前行行首, 包括空格Normal
dl删除光标所在字符Normal
dh删除光标所在位置之前字符Normal
dnl从光标位置开始, 向右剪切 n 个字符Normal
dnh剪切光标之前的 n 个字符(不包括光标所在字符)Normal
dH剪切当前光标之前所有内容Normal
dL剪切当前光标之后所有内容(包括光标所在字符)Normal

如何删除胡一块区域, 比较精确地删除区域
同上文的拷贝一样, 只需把 拷贝命令 y 换成 删除命令 d 即可

撤销/取消撤销修改

撤销修改命令 和 取消撤销修改命令

命令作用模式
u撤销上步修改Normal
ctrl+r恢复被撤销的修改Normal

补充

1、重复之前的命令 Normal 模式下输入 .(小数点), n. 重复之前命令 n 次

2、对括号内内容操作 (将光标定位至左括号)

  • ci’、ci”、ci(、ci[、ci{、ci< 分别更改这些配对标点符号中的文本内容
  • di’、di”、di(或dib、di[、di{或diB、di< 分别删除这些配对标点符号中的文本内容
  • yi’、yi”、yi(、yi[、yi{、yi< 分别复制这些配对标点符号中的文本内容
  • vi’、vi”、vi(、vi[、vi{、vi< 分别选中这些配对标点符号中的文本内容

3、全选(复制/删除)

Normal模式下, 首先全选文档: ggVG/ggvG => (gg 让光标移动到首行, v/V 进入Vision 模式, G 移动到最后一行) 输入 d 删除选中内容, 输入 y 复制选中内容

4、代码缩进

Normal 模式下, 进入 Vision 模式, 选中目标代码块, 快捷键 shift+> 向右缩进 快捷键 shift+< 向左缩进

其他有用快捷方式