vscode(Microsoft Visual Studio Code)、code-server

Microsoft Visual Studio Code 中文手册：https://code.visualstudio.com/docs
官方快捷键大全：https://code.visualstudio.com/docs/customization/keybindings

第一次使用 VS Code 时你应该知道的一切配置：https://zhuanlan.zhihu.com/p/62913725

VS code 提示 "任务仅可在工作区文件夹上可用"：https://blog.csdn.net/a123gsfd/article/details/77337707

VS Code 超详细 Python 配置：https://blog.csdn.net/lemonbit/article/details/118077612

code-server ( vscode网页版 )

网页版的 vscode ，名字是 code-server。对有频繁切换电脑写代码的同学，网页版vscode无疑是绝佳的选择，使用姿势和桌面版基本无差别，无需安装环境，任何电脑只要打开网页登录即可开始写代码。必要时一头钻进网吧，即可处理紧急问题。

• 仓库源码地址：https://github.com/coder/code-server

code-server 演示图片

部署 code-server (vscode网页版)

：https://blog.csdn.net/weixin_41521681/article/details/126535422

官网安装文档

：https://coder.com/docs/code-server/latest/install

VS Code 的介绍

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。

微软有两种软件：一种是 VS Code，一种是其他软件。

IDE 与 编辑器的对比

IDE 和编辑器是有区别的：

• IDE（Integrated Development Environment，集成开发环境）：对代码有较好的智能提示和相互跳转，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。
• 编辑器：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。

需要注意的是，VS Code 的定位是编辑器，而非 IDE ，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code 的体量是介于编辑器和 IDE 之间。

VS Code 的特点

• VS Code 的使命，是让开发者在编辑器里拥有 IDE 那样的开发体验，比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
• 跨平台支持 MacOS、Windows 和 Linux 等多个平台。
• VS Code 的源代码以 MIT 协议开源。
• 支持第三方插件，功能强大，生态系统完善。
• VS Code 自带了 JavaScript、TypeScript 和 Node.js 的支持。也就是说，你在书写 JS 和 TS 时，是自带智能提示的。当然，其他的语言，你可以安装相应的扩展包插件，也会有智能提示。

安装完后默认是英文，在插件仓库里面搜索 Chinese (Simplified) 安装，重启ide即可汉化

让 Vscode 自动识别文件编码的方法如下：

• 打开文件 ---> 首选项 ---> 设置 ---> 输入Auto Guess Encoding ---> 然后在方框中打上勾号。

快捷键

Visual Studio Code 常用快捷键：https://lzw.me/a/vscode-visual-studio-code-shortcut.html
VS Code 快捷键（中英文对照版）：https://segmentfault.com/a/1190000007688656
如果看不清可以到官网去查阅：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Visual Studio Code 的快捷键设置是统一管理的，所以你只需要修改一个文件就可以了。Visual Studio Code 有两个比较重要的文件，

• 一个是 setting.json （基本设置）。【文件】-【首选项】-【设置】
• 另一个是 keybindings.json（配置快捷键文件）。【文件】-【首选项】-【键盘快捷方式】。

按 F1 ---> 上下键 选择 "键盘快捷方式参考"，就可以打开网页看到下图：

主命令框

F1 或者 Ctrl + Shift + P：打开命令面板。在打开的输入框内，可以输入任何命令，例如：

• ​​​按一下 Backspace 会进入到 Ctrl+P 模式
• 在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式

在 Ctrl+P 窗口下还可以：

• 直接输入文件名，跳转到文件
• ?  列出当前可执行的动作
• !  显示 Errors或 Warnings，也可以 Ctrl+Shift+M
• : 跳转到行数，也可以 Ctrl+G 直接进入
• @ 跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入
• @ 根据分类跳转 symbol，查找属性或函数，也可以 Ctrl+Shift+O 后输入:进入
• # 根据名字查找 symbol，也可以 Ctrl+T

Ctrl + Shift + P，F1	显示命令面板 Show Command Palette
Ctrl + P	快速打开 Quick Open
Ctrl + ,	用户设置 User Settings
Ctrl + K  Ctrl + S	设置键盘快捷方式 Keyboard Shortcuts

常用快捷键

同时打开多个窗口（查看多个项目）

• 打开一个新窗口： Ctrl+Shift+N
• 关闭窗口： Ctrl+Shift+W

同时打开多个编辑器（查看多个文件）

• 新建文件 Ctrl+N
• 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right
• 切出一个新的编辑器（最多3个）Ctrl+\，也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
• 左中右3个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3
• 3个编辑器之间循环切换 Ctrl+`
• 编辑器换位置，Ctrl+k 然后按 Left 或 Right

格式调整

• 代码行缩进 Ctrl+[ 、 Ctrl+]
• Ctrl+C 、 Ctrl+V 复制或剪切当前行/当前选中内容
• 代码格式化： Shift+Alt+F，或 Ctrl+Shift+P 后输入 format code
• 上下移动一行： Alt+Up 或 Alt+Down
• 向上向下复制一行： Shift+Alt+Up 或 Shift+Alt+Down
• 在当前行下边插入一行 Ctrl+Enter
• 在当前行上方插入一行 Ctrl+Shift+Enter

光标相关

• ​移动到行首： Home
• 移动到行尾： End
• 移动到文件结尾： Ctrl+End
• 移动到文件开头： Ctrl+Home
• 移动到定义处： F12
• 定义处的缩略图：只看一眼而不跳转过去 Alt+F12
• 移动到后半个括号： Ctrl+Shift+]
• 选择从光标到行尾： Shift+End
• 选择从行首到光标处： Shift+Home
• 删除光标右侧的所有字： Ctrl+Delete
• 扩展/缩小选取范围： Shift+Alt+Left 和 Shift+Alt+Right
• 多行编辑(列编辑)：Alt+Shift+鼠标左键，Ctrl+Alt+Down/Up
• 同时选中所有匹配： Ctrl+Shift+L
• Ctrl+D 下一个匹配的也被选中 (在 sublime 中是删除当前行，后面自定义快键键中，设置与 Ctrl+Shift+K 互换了)
• 回退上一个光标操作： Ctrl+U

重构代码

• 跳转到定义处：F12
• 定义处缩略图：只看一眼而不跳转过去Alt+F12
• 列出所有的引用：Shift+F12
• 同时修改本文件中所有匹配的：Ctrl+F12
• 重命名：比如要修改一个方法名，可以选中后按F2，输入新的名字，回车，会发现所有的文件都修改过了。
• 跳转到下一个Error或Warning：当有多个错误时可以按F8逐个跳转
• 查看 diff： 在explorer里选择文件右键 Set file to compare，然后需要对比的文件上右键选择Compare with 'file_name_you_chose'。

查找替换

• 查找 Ctrl+F
• 查找替换 Ctrl+H
• 整个文件夹中查找 Ctrl+Shift+F

• 匹配符：

          * 匹配一个或者多个

          ? 匹配任意一个

          ** 匹配任意数量，包括 空

          {} 分组条件 (示例： {**/*.html,**/*.txt} matches all html and txt files)

          [] 定义匹配排列的字符，[0-9] 表示 "匹配0到9任意一个"

Ctrl + F	查找 Find
Ctrl + H	替换 Replace
F3 / Shift + F3	查找下一个/上一个 Find next/previous
Alt + Enter	选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D	将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D	将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W	切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

显示相关

• 全屏：F11
• zoomIn / zoomOut：Ctrl + =/Ctrl + -
• 侧边栏显/隐：Ctrl+B
• 侧边栏4大功能显示：
  • 显示资源管理器： Ctrl+Shift+E
  • 显示搜索：Ctrl+Shift+F
  • 显示 Git：Ctrl+Shift+G
  • 显示 Debug ：Ctrl+Shift+D
• Show Output：Ctrl+Shift+U
• 预览 markdown：Ctrl+Shift+V

其他

• 自动保存：File -> AutoSave ，或者 Ctrl+Shift+P，输入 auto

修改默认快捷键

打开默认键盘快捷方式设置：
File -> Preferences -> Keyboard Shortcuts，或者：Alt+F -> p -> k

修改 keybindings.json：

// Place your key bindings in this file to overwrite the defaults
[
    // ctrl+space 被切换输入法快捷键占用
    {
        "key": "ctrl+alt+space",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+d 删除一行
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
    },
    // 与删除一行的快捷键互换
    {
        "key": "ctrl+shift+k",
        "command": "editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    },
    // ctrl+shift+/多行注释
    {
        "key":"ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    },
    // 定制与 sublime 相同的大小写转换快捷键
    editor.action.transformToLowercase
    editor.action.transformToUppercase
    {
        "key": "ctrl+k ctrl+u",
        "command": "editor.action.transformToUppercase"
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+l",
        "command": "editor.action.transformToLowercase"
        "when": "editorTextFocus"
    }
]

自定义设置参考

vscode 自定义配置参考：

{
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "editor.fontLigatures": true,
        // 使用等宽字体 Fira Code
    "editor.fontFamily": "Fira Code, 'Noto Sans CJK SC Medium', Consolas, 'Courier New', monospace",
        // 关闭右侧的 minimap
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    "files.associations": {
        "*.es": "javascript",
        "*.es6": "javascript"
    },
    // 控制编辑器是否应呈现空白字符
    "editor.renderWhitespace": "all",
    // 启用后，将在保存文件时剪裁尾随空格。
    "files.trimTrailingWhitespace": true,
    // File extensions that can be beautified as javascript or JSON.
    "beautify.JSfiles": [
        "",
        "es",
        "es6",
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc"
    ],
    // 关闭 git 自动刷新、fetch、add 操作
    "git.enableSmartCommit": false,
    "git.enabled": true,
    "git.autorefresh": false,
    "git.autofetch": false,
}

主题及配色方案实时预览

f1 后输入 theme 回车，然后上下键即可预览。

自定义 settings.json

• User settings 是全局设置，任何vs Code打开的项目都会依此配置。
• Workspace settings 是本工作区的设置，会覆盖上边的配置。存储在工作区的 .vocode 文件夹下。

几乎所有设定都在 settings.json 里

Visual Studio Code 功能、插件、设置

功能 Features

VS Code 最重要的功能是它的侧边栏，它集成了在编码和重构时会用到的核心功能，你需要的其他任何功能都可以通过安装扩展来满足。

智能感知 IntelliSense

一个非常有用的语法高亮和自动完成功能，提供了基于变量类型、函数定义和导入模块的自动补全功能。https://code.visualstudio.com/docs/editor/intellisense

调试 Debugging

内置调试器可以通过添加断点和观察器进行调试，以帮助你加快编辑，编译等。
默认情况下，它支持 NodeJS ，并且可以调试任何可以被转换为 JavaScript 的语言(愚人码头注：比如，TypeScript 等)，但像 C++ 或 Python 这样的其他运行时则需要安装扩展才能进行调试。
https://code.visualstudio.com/Docs/editor/debugging

内置 Git

VS Code 内置了一个 Git GUI，支持最常用 Git 命令，这使得您可以很容易地看到您在项目中所做的更改。

图标

跟主题及配色方案的修改类似，VS Code 也提供了图标主题的修改功能，如下所示：

需要安装插件：直接搜索 icon，可以选择一个安装比较多的。vscode-icons (侧边栏图标插件)：可以更换侧边栏中漂亮的图标。

终端命令行工具 Terminal

VS Code 提供了一个功能齐全的集成终端，可以让你选择终端，并且运行常用命令。

前端开发必备插件

• PostCSS Sorting
• stylelint
• stylefmt
• ESLint
• javascript standard format
• beautify
• Babel ES6/ES7
• Debugger for Chrome
• Add jsdoc comments
• javascript(ES6) code snippets
• vue
• weex
• Reactjs code snippets
• React Native Tools
• Npm Intellisense
• Instant Markdown
• Markdown Shortcuts
• TextTransform

 

实用的 Visual Studio Code 插件：https://www.cnblogs.com/hjpqwer/p/7636643.html

60 个神级 VS Code 插件：https://www.sohu.com/a/528387273_121124359

推 荐 插 件

• 汉化：安装 Chinese (Simplified) Language Pack for Visual Studio Code 插件，完成后重启 VS Code 即可
• 背景图片：安装 background 插件，完成后重启编辑器
• 注释美化：安装 Better Comments 
• 括号上色：安装 Bracket Pair Colorizer 2 插件（相较于 Bracket Pair Colorizer，Bracket Pair Colorizer 2 的性能更优）。配置的话，可以在settings.json中加上这一行："bracket-pair-colorizer-2.showBracketsInGutter": true，意思是在行号前显示配对的括号，方便定位。
• 缩进高亮：高亮显示文本前面的缩进，交替使用四种不同的颜色。安装插件 indent-rainbow
• SVG 插件：提供语法高亮，自动补全，文档提示，颜色选择，URL 跳转，ID 快速修改，SVG 预览与导出 PNG 等功能。
• git 可视化：安装 Git Graph 插件，使用快捷键Shift + Alt + G打开 Git Graph 页面。
• Git 日志：一个强大的 Git 日志管理工具 GitLens — Git supercharged
• npm 管理：npm 扩展支持运行 package.json 文件中定义的 npm 脚本，并支持根据 package.json 中定义的依赖项验证已安装的模块。
• 代码运行：安装 Code Runner 后，可直接运行当前文件/当前选中的代码。运行结果会展示在“输出”面板中。在 VS Code 中快速运行代码
• open in browser：在浏览器中打开页面文件。
• 绘制流程图：Draw.io Integration 插件将 Draw.io 集成到 VS Code 中。
• Sublime Keymap (Sublime 键盘快捷键)：在安装这个插件和重启 VS Code 之后，将在 VS Code 中导入 Sublime Text 的键盘快捷键。可以通过 VS Code 的强大智能感知来使用熟悉的 Sublime Text 键盘快捷键。
• Project Manager (项目管理器插件)
• AutoFileName (文件路径自动补全插件)：提供基于你输入的文件路径的自动补全的选项。
• vscode-icons (侧边栏图标插件)：可以更换侧边栏中漂亮的图标。
• npm Intellisense (npm 模块导入插件)：在 import 导入语句中自动完成npm 模块。
• Document This (JSDoc注释插件)：在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。