VSCode常用好用插件大全
Auto Rename Tag自动重命名配对的HTML / XML标签Auto Close Tag自动添加HTML / XML结束标签Bracket Pair Colorizer高亮匹配代码块括号Code Runner非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完......
·
| 名称 | 功能 |
|---|---|
| Auto Rename Tag | 自动重命名配对的HTML / XML标签 |
| Auto Close Tag | 自动添加HTML / XML结束标签 |
| any rule | 常用正则表达式合集和工具 |
| Browser Preview | 编辑器中嵌入浏览器可视化窗口 |
| Bracket Pair Colorizer | 高亮匹配代码块括号 |
| Better Comments | 文档注释 /** * 我的方法 * *重要的信息会被高亮显示 * !及其反对的代码,不要使用 * TODO 重构此方法 * @param 该方法的参数 */ |
| Better Align | 根据符号（如冒号、等于号）对齐多行代码 使用方法：Ctrl+Shift+p输入“Align”确认即可 |
| Bookmarks | 让你在代码中设置书签，方便快速跳转到重要位置。 |
| Comment Translate | 注释翻译 |
| Code Translate | 划词翻译 |
| Code Runner | 非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角会出现：▶ 解决输出乱码和支持输入问题：选择 文件->首选项->设置，打开VS Code设置 > Extensions，找到 Run Code configuration，勾上 Run In Terminal选项。设置之后代码就会在 Terminal 中运行了，无乱码及支持输入。 |
| change-case | 修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等 使用方法1：Ctrl+Shift+p输入“change”然后选择要修改的格式 使用方法2：Ctrl+Shift+p输入“command”然后选择要修改的格式 |
| Color Info | 颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息 |
| Color Highlight | 在编辑器中高亮显示颜色值 |
| Color Picker | 代码的颜色选择器 |
| Csscomb | css 、less、sass 的代码格式化。 |
| CSS Peek | 快速定位元素设置CSS文件及位置 在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码 |
| Class autocomplete for HTML | 自动补全class=“” 属性 |
| Codelf | 给变量起名的神器 |
| css-auto-prefix | 给css加不同浏览器前缀 |
| Debugger for Chrome | js调试的插件，前端项目在Chrome中运行起来之后，可以直接在VSCode中打断点、查看输出、查看控制台 |
| Document This | 为js文件生成文档的代码注释。 |
| Draw.io Integration | 画流程图 |
| Data Preview | 预览数据文件 |
| DotENV | 识别和高亮 .env 文件中的环境变量，方便管理和使用。 |
| ESLint | 检查Javascript编程时的语法错误 |
| ESLint Chinese Rules | eslint中文规则提示插件 |
| EditorConfig for VS Code | 代码风格统一 |
| Mithril Emmet | 快速扩展HTML/CSS缩写，加速前端标记和样式编写。 |
| filesize | 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间 |
| Format Files | 在侧栏文件夹右键，选择‘Start Format Files：This Folder’ 对文件夹所有的文件格式化 |
| Error Lens | 可及时提示不规范的代码问题 |
| Git blame | 编辑器左下角展示最近一次的编辑信息 |
| Git History | 以图表的形式查看 git 日志 |
| GitLens | 查看每一行代码的提交日志 |
| Git History Diff | 查看提交记录及比较代码 |
| Git Graph | 所有分支合并时间线轴 |
| Guides | 代码的标签对齐线。 |
| Highlight Matching Tag | 选中标签高亮标签对 |
| HTML CSS Class Completion | 为基于工作空间上的CSS文件的HTML类属性提供CSS类名称提示。 |
| HTML Boilerplate | 提供生成标准HTML样板代码。 |
| HTML CSS support | css 自动补齐 |
| HTMLHint | HTML 代码格式检测 |
| HTML Snippets | 支持HTML5标签提示 |
| htmltagwrap | 在选中HTML标签后按快捷键”Alt + W” 在外面套一层标签 |
| Image Preview | 鼠标移到路径里显示图像预览 |
| Indenticator | 突出目前的代码缩进深度 |
| Indent-Rainbow | 给缩进添颜色，更加直观的看到代码层次 |
| intelliSense for CSS class names in HTML | 把项目中 css 文件里的名称智能提示在 html 中 |
| Import Cost | 您查看导入模块的大小 |
| i18n Ally | 国际化语言查看，鼠标放在字段上会提示所有的语言效果 ，https://blog.csdn.net/qq_51532249/article/details/131442641 |
| JavaScript (ES6) snippets | 支持JavaScript ES6 语法 |
| JavaScript (ES6) code snippets | ES6语法提示 |
| jQuery Code Snippets | jq代码段提示。 |
| JS-CSS-HTML Formatter | 代码格式化。 |
| JSON to TS | 将 JSON 数据一键转换为 TypeScript 接口。 |
| koroFileHeader | 自动生成文档注释 |
| Live Server | 实时简易服务器 |
| Lodash | lodash 函数提示，输入下划线列出可用函数。 |
| Lodash Snippets | lodash 函数提示，输入函数名列表默认第一个是lodash的函数。 |
| Lorem ipsum | 快速填充文本 |
| Log File Highlighter | 日志文件(.log后缀的文件)高亮 |
| LeetCode | 刷算法题的插件 |
| local history | 查看本地历史代码 |
| markdownlint | markdown语法检测 |
| Markdown Preview Enhanced | 编辑器内看markdown编译出来的效果 |
| Markdown All in One | markdown编辑器 |
| Material Icon Theme | 文件目录图标美化 |
| MongoDB for VS Code | MongoDB 数据库支持 |
| npm Intellisense | 在import语句中自动完成npm模块引入的代码插件。 |
| Node.js Modules Intellisense | 可以在导入语句中自动完成JavaScript / TypeScript模块 |
| Output Colorizer | 输出提示的文字颜色有一些变化，方便获取关键信息 |
| open in browser | 在浏览器中打开，安装后在左侧目录中右键点击会出现 open in browser 选项。 |
| Path Intellisense | 文件路径提示。 |
| Prettier - Code formatter | 代码保存自动格式化 |
| Partial Diff | 文件比较 |
| Project Manager | 让你轻松管理和切换不同的项目文件夹，尤其适合有多项目并行开发的开发者。 |
| Quokka.js | Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈 使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了 |
| Polacode | 生成代码截图工具 打开文件在屏幕截图中选择想要的代码并复制它，转到 View> Command Palette，然后在框中输入> polacode 并选择 Polacode 选项。 它将创建一个单独的水平窗口。 点击窗口按 Ctrl + V 粘贴代码。 在代码下面，粘贴另一个窗口，会看到像图标这样的摄像头。 点击这个图标并保存图片。 |
| px to rem | px转换rem工具 |
| REST Client | 接口测试工具 |
| Regex Previewer | 这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。 快捷键Ctrl+Alt+M呼出右边的并排文本框，左边窗口输入的正则会实时匹配右边文本内容 |
| Remote - SSH | 连接服务器管理文件 |
| Settings Sync | 多设备同步Vue插件 |
| Stylelint | CSS/SCSS/Less语法检测 |
| Sort Lines | 选中多行文字排序 |
| SCSS IntelliSense | SCSS 变量与混入智能提示 |
| SVG | SVG 编码、压缩、美化、预览一体化 |
| SVG Viewer | 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。在svg文件上右键菜单选择"SVG Viewer: View SVG" |
| Surround | 在代码块中增加外包裹模板 |
| Tailwind CSS IntelliSense | TailwindCSS工具 |
| TODO Highlight | 高亮todo注释 |
| TODO Tree | todo树展示，快速定位到todo位置 |
| Toggle Quotes | 切换双引号、单引号、反引号 |
| Turbo Console Log | 快速添加 console.log 信息，js debug 必备 快捷键 ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log |
| Vetur | Vue 语法高亮显示, 语法错误检查, 代码自动补全 |
| VS Code CSS Comments | css代码注释。 |
| VSCode Google Translate | 多语言开发时，切换语言包。 |
| vscode-browser-plus | 在编辑器内预览HTML，通过开启端口(10086)监听当前打开项目的根目录，在编辑器内预览网站，省去了频繁切换浏览器、编辑器看页面效果，修改代码后自动刷新页面。 |
| vscode-fileheader | 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间 快捷键: Ctrl+Alt+i |
| vscode-icons | 设置目录列表文件类型图标 |
| vscode-spotify | 音乐播放控制器 |
| Window Colors | 打开多个窗口时显示不同的颜色 |
| wakatime | 编程时间及行为跟踪统计 |
AI工具常用插件
| 名称 | 功能 |
|---|---|
| CodeGeeX: AI Coding Assistant | 自动生成代码 |
React常用插件
| 名称 | 功能 |
|---|---|
| Reactjs code snippets | 代码提示 |
| React-Native/React/Redux snippets for es6/es7 | 代码提示 |
| Typescript React code snippets | tsx的react组件片段 |
| CSS Modules | 对使用了css modules的jsx标签的类名补全和跳转到定义位置 |
数据库常用插件
| 名称 | 功能 |
|---|---|
| vscode-database | 支持mysql |
| SQLite | 支持sqlite |
| MongoDB for VS Code | 支持MongoDB |
| Redis | 支持Redis |
参考资料：
https://www.cnblogs.com/zhn0823/p/6542335.html
https://blog.csdn.net/shenxianhui1995/article/details/81604818
https://github.com/varHarrie/varharrie.github.io/issues/10
插件批量下载方式
1.在项目根目录创建.vscode/extensions.json文件
2.在vscode左侧插件右键复制插件id
3.粘贴到.vscode/extensions.json的recommendations数组中
前端开发常用推荐插件extensions.json ：
{
"recommendations": [
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"formulahendry.auto-close-tag",
"formulahendry.auto-rename-tag",
"aaron-bond.better-comments",
"naumovs.color-highlight",
"oouo-diogo-perdigao.docthis",
"donjayamanne.githistory"
]
}
4.在插件输入框位置输入 @recommended，点击下载按钮一键安装
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
9
0- 0
已为社区贡献3条内容
所有评论(0)