现代编辑器食用指北-VSCode

 # 7/25 15:17 更新： **由于洛谷粘贴代码的格式问题，按照本文之前的代码配置`tasks.json`和`launch.json`报错(所有$后都出现了一个空格)，请重新复制代码。** **这个问题的出现是我本人审校不认真所造成的。在此我对各位读者和洛谷日报的负责人员表示歉意。** ----- Visual Studio Code (简称 VS Code / VSC) 是一款免费**开源**的现代化轻量级代码编辑器，**使用Web技术[Electron](https://electronjs.org/)搭建**，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，**支持插件扩展**。软件跨平台支持 Windows、Mac 以及 Linux。 接触这款编辑器之后的感受正如VSCode官网所述：VSCode Redefined Code Editing.这款编辑器带来的强大的功能是Dev-C++等古董编辑器望尘莫及的。 ### 目录 1. 安装VSCode 2. 开始编辑代码 3. 编辑器基本设置 4. 键盘快捷键配置 5. 如何调试代码 & 一个sample & C++补全 6. 美化VSCode 7. 插件入门: Hello,World --------------- ## 安装VSCode  在VSCode官网可以get不同版本的VSCode安装程序。其中Stable为稳定版，Insiders为测试版。选择你喜欢的版本下载即可。 Windows用户安装VSC时可以选择把VSC注册到path。也可以加入到右键菜单，方便打开文件。 终端可以使用`code`命令启动VSC。 ## 开始编辑代码 VSC是长这个样子的：  侧边栏可以管理调试、打开文件、管理扩展、搜索、管理源码 右下角的一排选项可以更改正在编辑的文件的格式。 > “哇，看起来好高级的样子！” 你激动的创建新文件并写下了helloworld。 但是好像发生了一些奇怪的事情…… > 怎么没有高亮啊喂！？  嘿嘿，其实正确的打开方式是这样的： 1. 可以在右下角点击`纯文本`并修改为`C++` 2. 也可以在保存文件时更改后缀为`.cpp` > 那这不也太麻烦了？！ 不要着急~一会你就知道更简便的方法了。 ## 编辑器基本设置 从左下角可以打开设置界面。 > 啊喂？！这个设置界面怎么和Dev-C++的不一样啊？这是什么鬼？ 其实VSC的设置是一个`.json`文件，可以通过修改参数的方法更改设置。  左侧是默认设置，右侧是用户自定义设置。 我们试着修改一个设置，比如**给滚动添加动画** 在上面的搜索框输入scroll或者打开`编辑器`找到它：  点击最左面的铅笔图标，将参数修改为`true`（这时你可以看到右侧会多出一行代码）并按下`Ctrl+S`保存设置，我们就修改完成了！ 大部分设置都是这样修改的，少部分需要输入几个参数。设置都附有注释（不过部分是英文的，TAT）。下面是我的设置：  还记得我们提到的代码格式问题吗？搜索`defaultLanguage`，将这个设置修改为`cpp`即可~ 顺带一提，你会偷偷发现上面出现了`Settings (Preview)`这个选项卡。这是VSC的新版设置界面（和现在的这个不太一样），有兴趣的同学可以自己研究一下。 ## 键盘快捷键配置  键盘快捷键的设置也在左下角的设置按钮里。打开之后可以看到上图的界面。 默认的快捷键非常方便，我没有修改快捷键。 这里给出几组最常用的快捷键，可以大幅度提高效率（灵活使用甚至可以丢掉鼠标写代码）： ### 编辑器与窗口管理 - 打开 `Ctrl+O` - 新窗口 `Ctrl+Shift+N` - 新标签页 `Ctrl+N` - 关闭整个VSC窗口 `Ctrl+Shift+W` - 关闭当前标签页 `Ctrl+W` - 重新打开刚刚关闭的标签页 `Ctrl+Shift+T` - 切换标签页 `Ctrl+Tab` - 创建一个新编辑器并将当前页面复制过去 `Ctrl+\` - 在前三个编辑器之间切换 `Ctrl+1 2 3` - 将焦点编辑器移动位置 先按下 `Ctrl+K` 左下角出现提示后用 `← →` 移动 或者可以 `Ctrl+Alt+←→` - 在标签页之间切换 `Alt+1~9` ### 代码编辑 - 搜索 `Ctrl+F` - 替换 `Ctrl+H` - 复制光标所在行 只需按下`Ctrl+C`即可。 - 去掉行尾空格 `Ctrl+K` 然后 `Ctrl+X` - 切换行注释(可多行) `Ctrl+/` - 代码缩进 `Ctrl+[` 或 `Ctrl+]` - 当前行上下移动 `Alt+↑↓` - 当前行后插入一行 `Ctrl+Enter` - 当前行前插入一行 `Ctrl+Shift+Enter` - 选中下一行 `Ctrl+i` - **(神级辅助键) 撤销光标上次移动** `Ctrl+U` - 选中下个高亮的匹配项 `Ctrl+D` - **多光标模式** `Atl+鼠标单击`即可在单击处创建新的光标 - **(这个模式非常灵活，可以搭配多种操作提高效率)** - **(神级辅助键) 速览定义** `Alt+F12` - 转到定义 `F12` - Zen模式(一个奇怪的类似全屏的模式) `Ctrl+K` 然后 `Z` - **打开自动保存** `Ctrl+Shift+P`之后输入`AutoSave`，选中，按下回车。 - **打开终端** `Ctrl+~` 还有一个炒鸡强大的按键： **鼠标中键** > 我的鼠标滚轮能按下去？ 对！它非常的好用。 按住鼠标中键并选择=`Alt+Shift`选择 （既选择矩形区域）  用鼠标中键关闭编辑器/选项卡/通知：在空编辑器/选项卡/通知条**任意位置**按下中键即可   再也不用对准×号了有木有！？ ## 调试代码 > 再怎么说它也只是一个Editor！怎么调试代码呢？ VSC的插件很强大。这里我们使用一个插件。 打开插件商店，搜索`C/C++ Compile Run`并安装。 同样的方法可以安装C++辅助插件`C/C++`（这个是微软官方的插件）  安装完成，重启VSC后马上可以使用，按`F6`就可以偷税的调试当前的单文件C++代码了。但是…… > 我是Windows，好像报错了，怎么办？ **(7/25 15:19更新:) 由于部分平台使用的终端默认为Windows Powershell,因此不需要更改即可使用插件，请自行尝试是否需要更改。 ** 对于Windows用户，这个插件不尽人意，我们需要稍微魔改一下： VSC的插件目录在`C:\User\(your username)\.vscode\extensions\` 我们找到一个叫`danielpinto8zz6.c-cpp-compile-run-0.0.6`的文件夹，在里面的`out`文件夹里有一个`extension.js`，用VSC打开它。  你可以像我一样修改图中这几行。如果你是js大佬，你可以进行更精彩的修改。 > 改好了，但是还是显示错误? `path`里没有g++的路径！ ### 下载MinGW 需要下载MinGW（注意选择对应的位数）安装并将g++.exe的路径添加到path。 去搜索MinGW并下载：  你会得到一个奇怪的玩意儿：  勾选图中几个并选择Apply即可下载了。 ### 添加路径到Path 按下`Win+Pause/Break`两个键并打开左侧的`高级系统设置`，找到`环境变量`。  编辑图中的那一项。添加路径比如默认安装路径`C:\MinGW\bin`。**注意前面的分号**。  **记的还要重启VSC哦。** ## 利用VScode写题目 > 这算啥啊，可不可以show一下VSC的强大呢？ 那我就用一个例子 [[JLOI2009]神秘的生物](https://www.luogu.org/problemnew/show/P3886)来证明VSC的强大！  首先用VSC打开~~工作~~写题文件夹。`文件(F)`->`打开文件夹` 打开你的文件夹 (也可以直接创建文件，区别在于不打开文件夹无法用`F5`调试，但是可以用上文的插件调试)  `Ctrl+N`新建一个文件保存到此文件夹，打开文件自动保存。  头文件补全，非常方便  感觉哪儿不对……？速览定义！  使用小地图和大纲快速定位  使用多光标模式修改  如果按照上一步配置好了，可以用`F6`快速运行代码。 ### 附：F5 Debug的配置方法 1. 准备好一个工作文件夹，以后就用这个文件夹写代码 2. `文件(F)`->`打开文件夹` 打开你的文件夹 3. 写一个程序保存到这个打开的文件夹  4. 按下`F5`并选择`GDB`  5. 用以下内容替换`launch.json`,注意`miDebuggerPath`要换成自己的`GDB`路径，还要记得`\`是要用`\\`代替哦~ [点我](https://paste.ubuntu.com/p/czGGSdZKMb/) 再次`F5`，点击`配置任务`，选择`使用模板创建`，随便选一个模板。  用以下内容替换`tasks.json` [点我](https://paste.ubuntu.com/p/cZFsrwzjcX/) 你会看到：  嗯，可以`F5`调试啦！用`GDB`的同学可以尝试用以下内容覆盖`launch.json`和`tasks.json` [点我](https://paste.ubuntu.com/p/nmBrTQkb7W/) 然后`F5`即可！ ### 附：C++补全 来体验一下VSC的强大插件吧！ 搜索`C/C++ Clang Command Adapter`并安装插件  如果你没有安装Clang，那么可以装一个： [Download](http://releases.llvm.org/download.html) 然后记得像`GDB`一样把`bin`添加到`PATH`里去。 最后，打开`设置`，在用户设置里添加如下内容(C++)： ```javascript "clang.executable": "clang", "clang.completion.enable": true, "clang.cxxflags": [ "-std=c++11", "-IC:/MinGW/lib/gcc/mingw32/6.3.0/include/c++" ] ``` 嗯，上面的`"-IC:/MinGW/lib/gcc/mingw32/6.3.0/include/c++"`头文件路径要换成自己的。 > 还可以用MinGW的头文件？ 对，就是有这种操作。 ## 美化VSC VSC自带多款图标和配色。在插件商店也能找到更多的配色。由于各人口味不同，这里就不安利啦~ （想要Sublime和Atom theme的童鞋们可以安装这两个theme)   我后来换成了One-Dark-Pro，感觉很清爽。 ## 一个简易插件 既然已经说了这么多，我们也不妨探讨一下VSCode的插件是怎么烤出来的…… [[Official]Your first VSCode extension](https://code.visualstudio.com/docs/extensions/example-hello-world) 首先当然是安装`nodejs`辣！ [Node.js.org](https://nodejs.org) 然后`npm install -g yo generator-code` (这个过程巨慢，为了消磨时间，可以把[[JLOI2009]神秘的生物](https://www.luogu.org/problemnew/show/P3886)切掉……) `yo code`既可开始搭建插件。 然后我们输入`2`选择第二项`JavaScript` 然后起名字~比如Hello  然后等一会它会提示让你打开创建的插件目录。  附带的markdown文档 (插件：Markdown Preview Enhanced)  如果只是本地做做demo，你会发现这些其实没用，可以删掉。（quickstart里有说`test`是测试用的） `F5`可以调试插件！ 在弹出的`扩展开发主机`中按`F1`调出命令条并输入`Hello World`，就可以运行这个插件啦qwq  以上就是VSC~~编写竞赛代码~~的基本食用方法，感谢大家阅读本文，也祝大家~~玩~~用的愉快~