您的位置: 首页  >  文章  >  VS Code 高效使用及插件介绍

VS Code 高效使用及插件介绍

分类: 文章 • 2022-10-30 23:17:47

自定义设置

用 VS Code 打开一个项目文件夹后，可以进行一系列自定义操作，其中.vscode包含了个性化的相关设置，如下图所示：

VS Code 高效使用及插件介绍

  • launch.json

    定义如何启动运行某项目或文件，Debug -> Add Configuration…会自动生成该配置文件。

    VS Code 高效使用及插件介绍
    如上图中，我可能需要用到python，也可能用到nodejs，设置好之后在写代码的时候就可以F5调试运行了，前提是这些编译环境已经安装好并且设置好了环境变量。

  • settings.json

    可以根据自己习惯来覆盖默认的界面设置

    VS Code 高效使用及插件介绍
    左侧为编辑器默认设置，不可修改，可以在右侧添加想要修改的属性进行覆盖操作，User Settings中为全局修改，Workspace Settings中设置的仅在该项目范围内生效。

    当然，也可以去 File -> Preferences -> settings 中进行全局修改设置。

常用快捷键

shfit + ctrl + p 打开命令面板

shift + alt + f 代码格式化（format document）

ctrl + ←/→/↑/↓ 以单词为单位左右跳转光标或者屏幕上下滚动

ctrl + backspace/delete 以单词为单位删除光标左边或者右边的内容

alt + ↑/↓ 将光标所在代码行上下移动

shift 在跳转光标的操作过程中只要同时按住shift就可以选中内容

ctrl + shift + k 删除光标所在行的所有内容

ctrl + enter 在当前行下面新开始一行

shift + alt + ↑/↓ 复制光标所在行或选中行粘贴到上面或下面

ctrl + / 注释一行代码

shift + alt + a 注释整段代码

ctrl + u 撤销光标的移动和选择

ctrl + j 切换terminal的显隐

ctrl + d 第一次按下时选中光标附近的单词，随后每一次按下都会寻找下一个出现的位置创建光标并选中，可用来进行批量操作（也可用alt+鼠标左键来创建新光标）

通用插件

  • vscode-icons 让各种文件类型一目了然，更易区分

  • Path Intellisense 文件路径提示及自动补全

  • Project Manager 可以在多个项目之间灵活切换

    简单使用：

    ctrl + shift + p 打开命令行

输入 project manager 可以看到一系列操作指令

save project 把当前项目加入到管理器中

edit project 编辑所有管理器中的项目

list projects to open 切换到其他项目（shift + alt + p）

  • Code Runner 轻松管理切换各类编程语言的开发环境

    简单使用：

    ctrl + alt + n 直接运行当前文件代码
ctrl + alt + m 停止运行当前文件代码
ctrl + alt + j 选择使用何种语言来运行当前代码

    注意，需要将各类语言的环境变量事先配置好，或者在settings.json配置文件中添加执行路径：

    "code-runner.executorMap": {
  "javascript": "node",
  "php": "C:\\php\\php.exe",
  "python": "python",
  "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",
  "go": "go run",
  "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
  "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
  "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
}

前端相关插件

  • Debugger for Chrome

    结合chrome浏览器进行js代码调试

    安装了该插件后，可以在Add Configuration...时看到两种Chrome相关的调试模式: Chrome: launch 和 Chrome: Attach，添加并完成设置:
    VS Code 高效使用及插件介绍

    然后可以下断点，在左侧Debug窗口中选择模式并启动调试。

    launch模式需要事先在配置文件中写好项目的URL，启动时会独立打开一个浏览器界面，执行调试。

    attach模式，需要Chrome浏览器以remote debugging模式启动(--remote-debugging-port=9222)，然后附加到该进程中进行调试。

    详细使用介绍请见官方details。

  • javascript console utils

    快速console变量进行测试

    简单使用：

    选中变量后 -> ctrl + shift + L

删除所有console -> ctrl + shift + D

  • ESLint

    团队开发编码规范

    简单使用：

    全局安装ESLint -> npm install -g eslint

在项目根目录下，运行指令 eslint --init

  • npm Intellisense npm模块导入时自动补全

  • IntelliSense for CSS class names 编写html时自动补全CSS选择器

Markdown相关插件

  • PicGo

    实用的图床上传工具，直接返回url

    简单使用：

    • Uploading an image from clipboard
      Windows/Unix: Ctrl + Alt + u
OsX: Cmd + Opt + u
    • Uploading images from explorer
      Windows/Unix: Ctrl + Alt + e
OsX: Cmd + Opt + e
    • Uploading an image from input box
      Windows/Unix: Ctrl + Alt + o
OsX: Cmd + Opt + 0

相关推荐