2025年，VsCode插件【多摸鱼，少敲代码】。这篇文章是我们大家的，后续内容将由我们共同编写。不论大佬、萌新都可以将

🍭插件

基础插件

1. Chinese (Simplified) (简体中文) Language Pack

作用：中文

使用方法 关闭VsCode，重新打开

any-rule

作用：使用正则表达式

使用方法 右键选择"🦕正则大全". GIF

Auto Rename Tag

作用：自动完成另一侧标签的同步修改

效果展示

Bracket Pair Colorizer

作用：给括号加上不同的颜色，便于区分不同的区块，可自定义括号颜色

效果展示

翻译(英汉词典)

作用：翻译

效果展示

翻译.gif

Code Runner

作用：在控制面台中运行js

使用方法：选中js文件鼠标右击“run code” 在vscode控制台运行

console helper

作用：帮助开发者更快的输入/移除 log，醒目的主题搭配，极大的提高开发效率。

效果演示

选中变量后按下快捷键，会在代码下方插入一行带颜色的 console 语句

快捷方式：

macOS: cmd + shift + l
Windows: ctrl + l

select-insert

Color Info

作用：只需在颜色上悬停光标，就可以预览并切换色彩模型的（HEX、 RGB、HSL 和 CMYK）

效果展示

CSS Peek

作用：在html文件中按住ctrl并点击类名（将跳转到对应css文件）

效果展示

Debugger for Chrome（VSCode已有）

作用：让 vscode映射 chrome 的 debug功能，静态页面可以用 vscode 来打断点调试

DotENV

作用：在编辑.env文件时添加了便捷的语法高亮显示功能

Easy LESS

作用：将less编译css（保存后生成.css和min.css文件）

Easy Sass

作用：将Sass编译css（保存后生成.css和min.css文件）

ESLint

作用：JS语法检查

filesize

作用：在状态栏显示当前文件大小

使用效果

GitLens — Git supercharged

作用：增强Visual Studio代码中内置的Git功能

Git History

作用：查看git日志，文件历史，比较分支或提交 使用效果

HTML Boilerplate

作用：HTML 模版插件，只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

HTML CSS Support

作用：智能提示CSS类名以及id

HTMLHint

作用：HTML代码检查

Icon Fonts

作用：在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

Iconify IntelliSense

作用：智能图标化预览和搜索VS代码

Image preview

作用：在左侧栏和悬停时显示图像预览 使用效果

JavaScript (ES6) code snippets

作用：ES6语法智能提示，快速输入，还支持.ts，.jsx，.tsx，.html，.vue

Jest

作用：单元测试

jQuery Code Snippets

作用：jQuery代码智能提示

koroFileHeader

作用：规范注释

简单配置

// settings.json

 // 文件头部注释
  "fileheader.customMade": {
    "Descripttion": "",
    "version": "",
    "Author": "Jack",
    "Date": "Do not edit",
    "LastEditors": "Jack",
    "LastEditTime": "Do not Edit"
  },
  //函数注释
  "fileheader.cursorMode": {
    "description": "", // 函数注释生成之后，光标移动到这里
    "param": "",
    "return": ""
  }

language-postcss

作用：PostCSS语言支持

Live Server

作用：开启本地服务器，效果实时预览 使用方式

markdownlint

作用：帮助我们确保markdown语法的正确性。

Material Icon Theme

作用：设置文件图标主题

使用效果

open in browser

作用：允许在默认的浏览器或应用程序中打开当前文件

Path Intellisense

作用：自动补充文件名

Prettier - Code formatter

作用：代码格式化

stylelint

作用：

Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more

作用：AI智能提示（会记录你之前输入的代码。好用，但很吃电脑性能）

Tailwind CSS IntelliSense

作用：智能Tailwind CSS工具

Todo Tree && TODO Highlight

作用：记录代办

常用标记

标签	描述
`TODO`	待办标记，用来标记待办的地方。表示标记处有功能代码待编写，待实现的功能在说明中会简略说明。
`HACK`	待修改标记，用来标记可能需要更改的地方。在写代码的时候，有的地方我们并不确定他是正确的，可能未来有所更改，这时候可以使用HACK标记。
`FIXME`	待修复标记，用来标记一些需要修复的位置。表示标记处代码需要修正，甚至代码是错误的，不能工作，需要修复，如何修正会在说明中简略说明。
`XXX`	改进标记，用来标记一些草率实现的地方。在写代码的时候，有些地方需要频繁修改，代码虽然实现了功能，但是实现的方法有待商榷，希望将来能改进，要改进的地方会在说明中简略说明。
`NOTE`	说明标记，添加一些说明文字。
`INFO`	信息标记，用来表达一些信息。
`TAG`	标识标记，用来创建一些标记。

配置

快捷打开设置 Crtl+Shift+p 搜索 settings.json

 {
 "todohighlight.keywords": ["TODO", "INFO"], // 设置todo-height高亮
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)",
  "todo-tree.filtering.ignoreGitSubmodules": true,
  "todo-tree.tree.showCountsInTree": true,
  "todo-tree.regex.regexCaseSensitive": false,
  "todo-tree.general.statusBar": "current file",
  "todo-tree.general.tags": ["BUG", "FIXME", "TODO", "HACK", "XXX", "TAG", "DONE", "NOTE", "INFO"],
  "todo-tree.highlights.defaultHighlight": {
    "icon": "alert",
    "type": "line"
  },
  "todo-tree.highlights.customHighlight": {
    "BUG": {
      "icon": "bug",
      "foreground": "#F56C6C"
    },
    "FIXME": {
      "icon": "flame",
      "foreground": "#FF9800"
    },
    "TODO": {
      "icon": "checklist",
      "foreground": "#FFEB38"
    },
    "HACK": {
      "icon": "versions",
      "foreground": "#E040FB"
    },
    "XXX": {
      "icon": "unverified",
      "foreground": "#E91E63"
    },
    "TAG": {
      "icon": "tag",
      "foreground": "#409EFF"
    },
    "DONE": {
      "icon": "verified",
      "foreground": "#0dff00"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#67C23A"
    },
    "INFO": {
      "icon": "info",
      "foreground": "#909399"
    }
  }
 }