安装插件,快速进入高效开发模式

1. 插件下载位置下如图所示(笔者已汉化,但是位置还是相同位置)

VS Code高效开发插件汇总

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 代码高亮

相关文章: