vsCode插件

Mr.Liu大约 8 分钟

vsCode插件

快捷键

Ctrl+P：输入文件名可以快速搜索和打开文件

Ctrl+Shift+P：快速访问丰富的内置命令和扩展功能

Ctrl+Shift+N：新建窗口

Ctrl+B: 快速隐藏或显示VSCode的侧边栏

Ctrl+Tab：如果在同一窗口内打开了多个标签页，用此快捷键可以快速切换

GitHub Copilot

GitHub Copilot 是由 GitHub 和 OpenAI 联合开发的 AI 编程助手。它可以在你编写代码时，实时提供代码建议和自动补全功能，帮助你提高开发效率。GitHub Copilot 支持多种编程语言，包括 Python、JavaScript、TypeScript、Ruby、Go 等。

功能特点

实时代码建议：根据上下文提供代码建议，帮助你快速编写代码。
自动补全：智能补全代码片段，减少重复劳动。
多语言支持：支持多种编程语言，适用于不同的开发需求。
学习和改进：通过不断学习你的编码风格和习惯，提供更精准的建议。

使用方法

安装 GitHub Copilot 插件。
在 VSCode 中登录你的 GitHub 账号。
开始编写代码，GitHub Copilot 会自动提供建议。

GitHub Copilot 官网.

Fitten Code AI编程助手

官网

Fitten Code是由非十大模型驱动的AI编程助手，它可以自动生成代码，提升开发效率，帮您调试Bug，节省您的时间。还可以对话聊天，解决您编程碰到的问题。免费且支持80多种语言：Python、C++、Javascript、Typescript、Java等。

中文插件

Chinese (Simplified) Language Pack for Visual Studio Code

丝滑打字配置

{
    "editor.smoothScrolling": true,
    "editor.cursorBlinking": "expand",
    "editor.cursorSmoothCaretAnimation": "on",
    "workbench.list.smoothScrolling": true,
}

鼠标控制大小

按下 Ctrl + 鼠标滚轮

{
    "editor.mouseWheelZoom": true,
}

彩虹括号

{
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true,
}

tab自动补全代码设置

进入vscode里面 => 文件 => 首选项 => Settings => Workbench => Appearance => Edit in settings.json 进入编辑状态

{
	"emmet.triggerExpansionOnTab":true
}

Typescript 语言设置中文

{
    "typescript.locale": "zh-CN",
}

关闭开屏 VSCode 的亲切问候

{
    "workbench.startupEditor": "none",
}

标签同步修改

Auto Rename Tag settings.json文件中增加配置,修改开始标签，结束标签会同步修改；自动完成同一个标签的同步修改

// settings.json
"editor.linkedEditing": true

自动删除末尾空格

自动删除末尾的空白字符，确保一致的格式

{  
"files.trimTrailingWhitespace": true,  
}

自动导入功能

具有自动导入功能时，当文件中引用了模块的函数、变量或其他成员时，该模块会自动导入到文件中，从而节省时间和精力。如果模块文件被移动，这个扩展将帮助自动更新它们 VsCode 内置功能，设置自动导入：

JavaScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。
TypeScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。

文件移动时更新设置

JavaScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。默认值为 prompt，表示会向您显示一个对话框，询问是否要更新移动文件的导入。将其设置为 always 将跳过对话框，而设置为 never 将完全关闭此功能。
TypeScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。与前一个设置类似，它有可能的值是 prompt、always 和 never，默认值是 prompt。

也可以直接在setting.json文件中设置这些属性来控制

{  
"javascript.suggest.autoImports": true,  
"typescript.suggest.autoImports": true,  
"javascript.updateImportsOnFileMove.enabled": "prompt",  
"typescript.updateImportsOnFileMove.enabled": "prompt"  
}

正则插件

any-rule

使用方法：快捷键：ctrl+shift+p

打字特效插件

power mode

安装插件后打开 settings.json 用户设置

"powermode.enabled": true, //启动效果
"powermode.presets": "particles", // particles 颗粒效果
"powermode.shake.intensity": 0,// 关闭计数
"powermode.combo.counterEnabled": "hide",// par关闭计数
"powermode.combo.counterSize": 0,// 关闭计数
"powermode.shake.enabled": false,// 关闭代码抖动

生成文件头部注释和函数注释

koroFileHeader

 "fileheader.customMade": {
    "Author": "xxx",
    "Date": "Do not edit", // 文件创建时间
    "LastEditors": "Do not edit", // 最后编辑文件的人
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    "Descripttion": "xxx", // 文件在项目中的相对路径 自动更新
  },
  "fileheader.cursorMode": {},

右键打开浏览器

open in browser

VScode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

鼠标右键

快捷键：Alt+B(在默认浏览器中打开) Shift+Alt+B(在其他浏览器中打开)

自动导入npm模块

npm Intellisense 在代码中写npm模块，可自动完成导入语句中的npm模块，require时的包提示

鼠标悬浮在链接上预览图片

Image preview

ES6语法智能提示

JavaScript(ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

Get插件

GitLens 方便查看git日志，git重度使用者必备

文件比较

Partial Diff

使用方法

第一步选中代码右键select text for compare

第二步选中要对比的代码右键点 compare text with previous selection

结果：

运行代码插件

Code Runner 运行代码插件，支持多种语言

在要运行的js文件，鼠标右键选择Run Code，即可运行代码。

快速查看CSS定义

CSS Peek 可以快速查看CSS定义，不用打开浏览器，直接在VSCode中查看

安装完成后打开HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。

本地启动服务预览html文件

Live Server 实时预览html文件

在vVSCode 中打开 HTML 文件，点击右下角的 Live Server 图标，即可启动本地服务，并在浏览器中预览 HTML 文件。

npm Intellisense

npm Intellisense 自动提示npm模块，支持自动导入模块，支持自定义导入路径，支持自定义模块导入顺序

Todo Tree

Todo Tree 显示项目中的TODO、FIXME、XXX等注释，并在文件中快速定位到相应位置

"todo-tree.regex.regex": "((//|#|<!--|;|/\\*|^)\\s*($TAGS):|^\\s*- \\[ \\])",
    "todo-tree.general.tags": [
        "TODOLIU" // 自定义标签
    ],
    "todo-tree.highlights.defaultHighlight": {
        "foreground": "white",
        "background": "Orange",
        "icon": "checklist",
        "rulerColour": "Orange",
        "type": "tag",
        "iconColour": "Orange"
    },