VS Code高效开发插件汇总
安装插件,快速进入高效开发模式
1. 插件下载位置下如图所示(笔者已汉化,但是位置还是相同位置)
2. 插件表一览
| 插件 | 说明 |
|---|---|
| Chinese (Simplified) Language Pack for Visual Studio Code | 中文简体语言包 |
| Auto Close Tag | 自动添加HTML / XML关闭标签 |
| Auto Rename Tag | 自动重命名配对的HTML / XML标签 |
| Beautify | 格式化代码 |
| Bracket Pair Colorizer | 颜色识别匹配括号 |
| Code Runner | 非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等安装完成后,右上角会出现:▶ |
| change-case | 虽然 VSCode 内置了开箱即用的文本转换选项,但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式,包括驼峰命名、下划线分隔命名,snake_case 命名以及 CONST_CAS 命名等 |
| Color Info | 这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了 |
| CSS Pee | 使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码 |
| ESLint EsLint | 可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性 |
| filesize | 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 |
| Git History | 以图表的形式查看 git 日志 |
| GitLens — Git supercharged | 显示文件最近的 commit 和作者,显示当前行 commit 信息 |
| HTML Boilerplate | 通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构 |
| HTMLHint | HTML 代码格式检测 |
| HTML Snippets | 代码自动填充 |
| Image Preview | 鼠标移到路径里显示图像预览 |
| Indenticator | 突出目前的缩进深度 |
| intelliSense for CSS class names in HTML | 把项目中 css 文件里的名称智能提示在 html 中 |
| JavaScript (ES6) code snippets | ES6代码片段 |
| Live Server | 安装之后可以打开一个简单的服务器,并可以实现浏览器实时刷新,安装之后,打开项目文件夹,再在文件点击右键就会出现一个Open with Live Server的选项,就会自动打开浏览器了。默认端口号是5500 |
| Node.js Modules Intellisense | 可以在导入语句中自动完成JavaScript / TypeScript模块 |
| Path Intellisense | 路径自动补全 |
| jQuery Code Snippets | jQuery代码智能提示 |
| Vetur | Vue多功能大集成插件 语法高亮显示, 语法错误检查, 代码自动补全 (配合 ESLint 插件效果更佳) |
| open in browser | VScode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari |
| npm Intellisense | node 必备 |
| TODO Highlight | 代码高亮 |