# vscode-plugins

**Repository Path**: longmo666/vscode-plugins

## Basic Information

- **Project Name**: vscode-plugins
- **Description**: 
离线安装vscode插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-10
- **Last Updated**: 2025-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 离线安装 vscode 的开发插件

## 安装路径

若是 zip 压缩包格式，请解压后放入

```txt
C:\Users\Administrator\.vscode\extensions
```

若是 vsix 格式，直接 vscode 中选择导入即可

功能：提示函数的参数类型信息

## path-alias-samon

https://marketplace.visualstudio.com/items?itemName=samonxian.path-alias-samon

功能： 一个可以解决路径别名提示，跳转的 vscode 插件

右击插件 -> 扩展设置 -> 路径映射在 settings.json 中编辑

可以自定义路径别名，在设置 pathAlias.aliasMap 中配置，key 是你要定义的别名，value 是路径别名所对应的绝对路径。其中可以使用${cwd}来代替当前工作目录的绝对路径。比方说，我想用@ 代表我工作目录下的 src 目录那么我只用在配置中写

```json
{
  "@": "${cwd}/src",
  "views": "${cwd}/src/views"
}
```

- 提供路径别名的输入提示
- 提供路径别名的文件跳转
- 路径别名更新后会自动更新相应提示
  添加文件和删除文件后会自动更新相应的提示
  对于一些路径的简写可以正确跳转
  支持从路径别名中 import 属性或者函数
- 支持从相对路径到路径别名的重构
- 支持 import 变量的跳转
- 支持组件标签跳转。
- 提供对从路径别名中函数自动导入功能
- 可以自由选择是否开启选择提示后自动触发后面的提示 pathAlias.autoSuggestion 默认开启，如需关闭自行设置为 false

## Canvas API snippets

## Features

This extension, that includes code snippets, helps you make graphics( and maybe games) with Canvas API which are used by HTML and Javascript.

Snippets:

| Snippet                 | Description                                                                                   |
| ----------------------- | --------------------------------------------------------------------------------------------- |
| `ctx2d`                 | This snippet will add 2D Context constant, which are gathered from 'canvas' constant          |
| `cce`                   | This snippet will create new constant that creates new                                        |
| `enable-canvas`         | This snippet will add function, that enables IntelliSense for Canvas API                      |
| `canvas-basic-rect`     | This snippet will add code, for creating basic cube in the middle of                          |
| `canvas-basic-template` | This snippet will add code from a tempelate with all needed things to draw a simple rectangle |

## IntelliJ IDEA Keybindings

https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings

## Auto Import

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

## CSS peek

## IntelliSense for CSS class names in HTML

## JavaScript (ES6) code snippets

JavaScript (ES6) code snippets

## Live Server

## Markdown All in One

Markdown 对于开发者而言，应该是一种常用的文档书写方式，虽然我在独立 Markdown 文档书写时习惯于使用 Typora，但是对于开发过程中涉及到的 API 接口文档、README，我还是习惯于使用 VS Code。

Markdown All in One 这款插件可以实现媲美 Typora 的 Markdown 编辑体验，它具备如下特性，

•丰富的快捷键
•TOC 标签
•数学公式
•自动完成
•列表编辑
•输出 HTML 同时转 PDF
•Github 风格文档
•......

这款插件真正做到了 All in One。

## npm Intellisense

npm Intellisense

## node-snippets

## Parameter Hints

## One Dark Pro

## Partial Diff

文件比较是一种即常用且实用的一项功能，例如，我们想查看哪里修改了代码、查看输出的日志信息有什么区别等等，如果用肉眼逐个词的去分辨，显然是无法承受的。

提起文件比较，我首先想到的就是 Beyond Compare，这是一款好用的工具，但是，仅凭收费这一点就把很多人拒之门外了。
还好，VS Code 插件库里有 Partial Diff 这款神奇的插件，选中一代码，右键 Select Text for Compare，选中另外一部分代码，右键 Compare Text with Previous Selection 即可

## Path Autocomplete

## Path Intellisense

- 路径自动完成插件，方便在 import 语句中快速输入文件路径。
- 提高开发效率。

Visual Studio Code plugin that autocompletes filenames

## Project Manager

## SVG

# 代码格式规范相关

## EditorConfig for VS Code

## koro1FileHeader

## Prettier

## CodeMetrics

代码复杂度分析

# Git 相关

## GitLens

- 提供强大的 Git 功能，方便查看和比较代码的历史版本。
- 支持注释、贡献者信息等。

# Vue 相关插件

## Vetur

- 提供 Vue 文件的语法高亮。
- 支持 Vue 文件的智能感知和自动完成。
- 提供了 Vue 文件的格式化工具。

## Vue 3 Snippets

- 提供 Vue 3 相关的代码片段，方便快速输入常见代码结构。
- 支持 Vue 组件选项、指令、生命周期等。

## Vue VSCode Snippets

## Vue Language Features (Volar)

Vue Language Features (Volar)

## TypeScript Vue Plugin (Volar)

TS 版本的

## Ant Design Vue helper

# Vue Peek

- 允许从模板中跳转到相关的 Vue 文件。
- 支持在模板、样式和脚本之间轻松切换

## Code Spell Checker

## Better Comments Next

是不是觉得注释信息千篇一律？

Better Comments 这款插件可以让 VS Code 注释信息更加人性化。

它可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外，还可以对注释掉的代码进行样式设置。另外，你想要的任何其他注释样式都可以在设置中指定。

7. Bracket Pair Colorizer
   Bracket Pair Colorizer 这款插件可以给()、[]、{}这些常用括号显示不同颜色，当点击对应括号时能够用线段直接链接到一起，让层次结构一目了然。除此之外，它还支持用户自定义符号。

## Local History (New)

Save files into local history

## Draw.io Integration

## vscode-icons-mac

一个好的编辑界面能够让开发过程心情舒畅，甚至可以提升开发效率。

显然，VS Code 默认的图标是达不到这种程度的。

但是，配合 vscode-icons 这款插件就不同了，它具有以下特性，

•自定义图标
•自动检测项目
•自定义配置

它不仅能够给文件夹、文件添加上舒适的图标，而且可以自动检测项目，根据项目不同功能配上不同图标，例如，git、Markdown、配置项、工具类等等。

## change-case

标识符和命名规则是学习一门语言最基本，也是必须要了解的一项。

不同语言对变量名、函数名、类名的命名要求不同，有的是驼峰、有的是下划线...但是，不管是什么要求，都有一个共性--命名很重要。

有些编程语言甚至对命名严格到如果不按规范要求，执行时会直接报错。

而 change-case 就是一款快速修改当前选定内容或当前单词的命名的插件。
使用方法：Ctrl+Shift+p 输入“change”然后选择要修改的格式即可。

## Search node_modules

## npm Intellisense

## Babel JavaScript

# React 相关插件

## Reactjs code snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

## ES7+ React/Redux/React-Native snippets

## Simple React Snippets

# 不再手写 import - VSCode 自动引入 Vue 组件和 Js 模块

https://www.cnblogs.com/terrysu/p/9329570.html

## CSS Modules

## CSS-Modules-transform

用于将 css 转换为 css modules 语法
快捷键
Windows : ctrl+m
Mac : cmd+m

## css-module-intellisense

本插件提供针对*.module.scss/*.scss/_.css/_.sass 文件引用的样式自动补充。

## 别名路径跳转

alias-skip
别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表

使用方法
鼠标移动到路径上，按住 ctrl 并单击就会跳转
## Web Visual Editor: 用于可视化编辑 HTML 文件的 VS Code 扩展
与浏览器开发工具类似，通过元素选择、复制/粘贴元素、放大/缩小、拖动元素等提供视觉变化的实时预览。与流行的 Live Preview 的一个主要区别是预览中的更改会反馈到代码中