史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)

简介: 史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)

@[toc]

一、什么是VSCode?

  VS Code的全称是Visual Studio Code,但这全名实在是太长了,很多用户喜欢叫它VS Code。说起VS Code,官方定义它是一个免费的、开源的跨平台编辑器。之所以强调“编辑器”,我想是因为 VS Code 并无意成为一个全尺寸的集成开发环境,也就是IDE。
  很多人都把编辑器等同于IDE,其实从专业角度来讲并非这样。IDE 更为关注开箱即用的编程体验、对代码往往有很好的智能理解,同时侧重于工程项目,为代码调试、测试、工作流等都有图形化界面的支持,因此相对笨重,Java程序员常用的Eclipse定位就是IDE;而编辑器则相对更轻量,侧重于文件或者文件夹,语言和工作流的支持更丰富和自由,VS Code 把自己定位在编辑器这个方向上,但又不完全局限于此。
  如果你有兴趣,可以打开自己喜欢的编辑器官网看看它是怎么样的定位。总体来说,近几年流行风向是轻量的编辑器,这也是大势所趋。
  要理解VS Code代码编辑器的设计思路,就需要先看看VS Code的发展轨迹。从我的角度看,不管你是学习编程语言,还是框架、编辑器,都应该先去看看它的来龙去脉,了解它们是怎么发展而来的,曾经遇到了什么问题,又是怎么解决的,这些信息都便于你从大局上提高对事情本质的认识。
VSCode官网https://code.visualstudio.com/

二、版本

当前最新版:1.45 2020年4月
版本列表https://code.visualstudio.com/updates/v1_45

三、下载

VSCode下载https://code.visualstudio.com/Download
这里推荐大家下载Zip解压版
大家根据自己系统版本来下载,我在这里下载64bit
在这里插入图片描述

四、安装

下载完成后D盘新建web文件夹,将下载的文件放进web文件夹在这里插入图片描述
解压,为方便以后更新版本,修改文件名为VSCode
在这里插入图片描述
双击进入VSCode文件夹,在此目录下新建data文件夹,此目录存放插件。
在这里插入图片描述
双击Code.exe即可打开VSCode
在这里插入图片描述
下面就可以正常使用了

五、插件安装

点击左边地五个图标可以安装插件,这里推荐一些插件,
在这里插入图片描述

1.Codelf

变量命名神器
在这里插入图片描述

2、View In Browser

在浏览器里面预览正在编辑的html文件
在这里插入图片描述

3、Color Highlight

高亮显示样式颜色
在这里插入图片描述

4、Bracket Pair Colorizer

成对的彩色括号,让括号拥有独立的颜色,便于区分
在这里插入图片描述

5、Highlight Matching Tag

高亮显示对应的HTML标签以及标识出对应的各种括号
在这里插入图片描述

6、Path Intellisense

在编辑器中输入路径的时候,能自动补全
在这里插入图片描述

7、Prettier - Code formatter

格式化代码
在这里插入图片描述

8、Auto Close Tag

自动补全标签
在这里插入图片描述

9、Auto Rename Tag

自动重命名html标签,如修改p标签为a,将自动修改结尾标签p为a
在这里插入图片描述

10、HTML Snippets

智能提示HTML标签,以及标签的含义
在这里插入图片描述

11、HTML CSS Support

在HTML标签上写Class的时候能够智能提示当前所支持的样式
在这里插入图片描述

12、indent-rainbow

带颜色的缩进
在这里插入图片描述

13、change-case

转换命名风格
在这里插入图片描述

六、总结

插件大家根据个人需要进行下载
VSCode需要配合Git,下篇文章为大家介绍Git安装与配置
这里为大家附上VSCode使用教程https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html
VSCode汉化


博主其他文章:
Windows下JDK安装与配置(超详细,图文详解、适合小白查看)


由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!

相关文章
|
1月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
1月前
|
人工智能 C++ iOS开发
ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
本文介绍在Apple M4 MacOS环境下搭建Ollama和qwen2.5-coder模型的过程。首先通过官网或Brew安装Ollama,然后下载qwen2.5-coder模型,可通过终端命令`ollama run qwen2.5-coder`启动模型进行测试。最后,在VS Code中安装Continue插件,并配置qwen2.5-coder模型用于代码开发辅助。
2627 6
|
1月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
509 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
181 1
|
2月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
720 3
|
2月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
388 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
369 2
|
2月前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
989 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
115 2

热门文章

最新文章