VS Code介绍
Visual Studio Code(简称 VS Code)是由微软开发的免费开源代码编辑器,支持几乎所有主流操作系统,包括 Windows、macOS 和 Linux。它具有丰富的功能和扩展性,适用于各种编程语言和应用场景。
VS Code的特点如下:
- 跨平台支持:可以在多个操作系统上运行,提供一致的用户体验。
- 丰富的扩展生态系统:拥有丰富的扩展库,支持各种编程语言、框架和工具,用户可以根据自己的需求自定义编辑器。
- 内置调试器:集成了调试器,支持多种语言的调试,使开发者能够轻松进行代码调试。
- Git 整合:内置了 Git 版本控制工具,支持版本控制、分支管理等操作。
- 轻量高效:启动速度快,占用系统资源少,适合于各种规模的项目。
总的来说,VS Code 是一款功能强大、灵活性高的代码编辑器,适用于广泛的开发需求,从前端开发到后端开发,甚至是数据科学和人工智能领域。它的强大扩展能力和活跃的社区使得它成为许多开发者的首选工具之一。
VS Code下载
在线下载
官网下载地址:https://code.visualstudio.com/
离线下载
有可能因为网络原因无法从官方下载,为了大家方便,我已经把软件上传到网盘了,效果如下图:
VS Code安装
找到下载的VSCodeUserSetup-x64-1.87.2.exe
,双击VSCodeUserSetup-x64-1.87.2.exe
安装,点击我同意此协议
,效果如下图:
弹出下面窗口,点击下一步
。
弹出下面窗口,点击下一步
。
弹出下面窗口,点击下一步
。
弹出下面窗口,点击安装
。
弹出下面窗口,正在安装
,等待安装即可。
弹出下面窗口,点击完成
。
启动VS Code,效果如下图:
到此完成了VSCode的安装。
VS Code 配置
打开VS Code的配置面板,用户可以根据自己的喜好,可以修改字体、背景样式等偏好设置,效果如下图:
VS Code插件安装
VS Code提供了非常丰富的插件,用户根据自己的需要安装对应的插件,可以大大提高开发效率。VS Code插件安装步骤:
这里推荐前端开发常用插件。
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
适用于 VS Code 的中文(简体)语言包。
重启后,界面显示为中文,效果如下图:
HTML CSS Support
在编写HTML和CSS样式表的时候,自动补全。
Code Spell Checker
Code Spell Checker 插件可以检查单词拼写是否出现错误,检查的规则遵循 camelCase (驼峰拼写法)。比如 yellow 单词写错成 yellaw ,会提示你是否修改成 yellow。
wakatime
编程时间及行为跟踪统计。
Turbo Console Log
快速添加 console.log 信息,js debug 必备
快捷键
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
CSS Peek
使用该插件,可以直接从 HTML 和 JavaScript 文件快速导航和编辑外部样式表中定义的 CSS 样式。它提供了一个“Peek”功能,在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。
vscode-icons
VSCode 官方出品的图标库。
JavaScript (ES6) code snippets
支持ES6语法提示
Mithril Emmet
一个能大幅度提高前端开发效率的一个工具,用于补全代码
Path Intellisense
路径提示插件
MySQL
支持 MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, Redis, and ElasticSearch
Image Preview
当鼠标悬浮在图片的链接上时,此插件可以实时预览该图片,除此之外,还可以看到图片的大小和分辨率。
Codelf
给变量起名的神器。
Vue 3 Snippets
在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高开发效率。
VueHelper
VS Code中最好的Vue代码提示插件,不仅包括了Vue2所有API,还含有vue-router2和vuex2的代码。
Auto Close Tag
自动补全闭合HTML/XML标签。
Auto Rename Tag
自动完成另一侧标签名的修改。
Beautify
格式化 HTML、JS、CSS。该插件显示已经弃用,但是可以接着使用,安装过程中,如果提示是否需要继续安装,选择 "仍要安装"。
Bracket Pair Colorizer
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色,该插件显示已经弃用,但是可以接着使用,安装过程中,如果提示是否需要继续安装,选择 "仍要安装"。
open in browser
该插件支持快捷键或鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器。
Vetur
Vetur 是专为 Vue.js 开发而设计的 Visual Studio Code 插件。它提供了一系列功能,帮助开发者在 VS Code 中更高效地编写、调试和管理 Vue.js 项目。
Vetur 插件的特点包括:
语法高亮:对 Vue 单文件组件(.vue 文件)进行语法高亮,使代码结构清晰易读。
代码片段:提供了丰富的代码片段,可以快速生成常用的 Vue 模板代码,如组件定义、生命周期钩子等。
智能感知:支持自动补全、跳转定义、符号搜索等功能,提升代码编写效率。
语法检查:集成了对 Vue 模板以及 JavaScript/TypeScript 的语法检查,帮助开发者发现潜在的问题并进行修复。
语法错误提示:在编辑 Vue 文件时,能够及时提示语法错误,并给出相应的修复建议。
File Utils
在VS Code中可以方便快捷的来创建、复制、移动、重命名文件和目录。
IntelliJ IDEA Keybindings
可在VS Code中使用IDEA的快捷键。