| 名称 | 功能 |
|---|---|
| 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”确认即可 |
| 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 命名等 使用方法：Ctrl+Shift+p输入“change”然后选择要修改的格式 |
| 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 | 预览数据文件 |
| ESLint | 检查Javascript编程时的语法错误 |
| EditorConfig for VS Code | 代码风格统一 |
| filesize | 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间 |
| Format Files | 在侧栏文件夹右键，选择‘Start Format Files：This Folder’ 对文件夹所有的文件格式化 |
| 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 | 您查看导入模块的大小 |
| JavaScript (ES6) snippets | 支持JavaScript ES6 语法 |
| JavaScript (ES6) code snippets | ES6语法提示 |
| jQuery Code Snippets | jq代码段提示。 |
| JS-CSS-HTML Formatter | 代码格式化。 |
| 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 | 文件比较 |
| 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 | 选中多行文字排序 |
| SVG Viewer | 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。在svg文件上右键菜单选择"SVG Viewer: View SVG" |
| Surround | 在代码块中增加外包裹模板 |
| 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 | 编程时间及行为跟踪统计 |
React常用插件
| 名称 | 功能 |
|---|---|
| Reactjs code snippets | 代码提示 |
| React-Native/React/Redux snippets for es6/es7 | 代码提示 |
| Typescript React code snippets | tsx的react组件片段 |
| CSS Modules | 对使用了css modules的jsx标签的类名补全和跳转到定义位置 |
参考资料：
https://wwwblogs/zhn0823/p/6542335.html
https://blog.csdn/shenxianhui1995/article/details/81604818
https://github/varHarrie/varharrie.github.io/issues/10
更多推荐
VSCode常用好用插件大全
发布评论