【vscode】vscode插件汇总

Eva3288

已于 2024-04-08 16:42:18 修改

阅读量1.1k

点赞数

分类专栏：工具文章标签： vscode ide 编辑器

于 2018-08-14 10:50:04 首次发布

本文链接：https://blog.youkuaiyun.com/Eva3288/article/details/81662735

版权

本文介绍了Visual Studio Code(VS Code)的一些核心特性，如自动保存和格式化，以及如何配置设置。重点是VS Code的各种插件，包括Git插件GitLens和Git History，便捷操作插件如Path Intellisense和Auto Rename Tag，检查校验类插件Code Spell Checker，Vue相关插件Vetur和Vue VSCode Snippets，以及界面美化和增强功能的插件，如Prettier和CodeSnap。这些插件能极大提升开发效率和代码质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. VS Code简介

在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器了！
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作…

2. vscode 下载安装

进入官网下载安装点此进入官网
在这里插入图片描述

3. 配置：

【 ctrl +, 】打开setting设置界面

1. 开启自动保存

【 ctrl +, 】打开setting设置界面，搜索Auto Save
在这里插入图片描述

2. 保存时自动格式化

在这里插入图片描述

具体操作参考：VSCode自动格式化

使用Tab键展开Emmet缩写

【 ctrl +, 】打开setting-扩展 -Emmet下，打开settings.json 添加配置信息：

"emmet.triggerExpansionOnTab": true

在这里插入图片描述

4. 插件

VSCode属于轻便型代码编辑器，可以安装一些插件来扩展它的功能，不像一些集成的大型IDE集成了很多功能，安装、使用起来比较麻烦。

通过点击下方图片所示或者使用快捷键ctrl+shift+x 打开扩展模块安装插件。

4.0 插件汇总

https://segmentfault.com/a/1190000011779959

Auto Close Tag   //自动添加HTML / XML关闭标签（必备）
Auto Rename Tag   //自动重命名配对的HTML / XML标签(必备)
Auto Complete Tag   //自动补全标签，搭配自动重命名(必备)

Beautify   //格式化javascript，JSON，CSS，Sass，和HTML,快捷键ctrl+a    ctrl+k   ctrl+f
css peek   //能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）

Git History   //以图表的形式查看git日志 ,使用 command+shift+p（Ctrl+shift+p） 输入git log就可以看到了

JavaScript (ES6) code snippets    //es6代码片段（必备）
JavaScript Snippet Pack    //js代码片段（必备）

Path Intellisense    //路径自动补全（必备）

Vetur     //添加对.vue后缀文件的快速书写支持。
Vue 2 Snippets     //快速新建vue页面（使用方法：https://blog.youkuaiyun.com/Eva3288/article/details/81662735）