入职必会-开发环境搭建28-VSCode下载和安装

简介: Visual Studio Code(简称 VS Code)是由微软开发的免费开源代码编辑器,支持几乎所有主流操作系统,包括 Windows、macOS 和 Linux。它具有丰富的功能和扩展性,适用于各种编程语言和应用场景。

VS Code介绍

Visual Studio Code(简称 VS Code)是由微软开发的免费开源代码编辑器,支持几乎所有主流操作系统,包括 Windows、macOS 和 Linux。它具有丰富的功能和扩展性,适用于各种编程语言和应用场景。

VS Code的特点如下:

  1. 跨平台支持:可以在多个操作系统上运行,提供一致的用户体验。
  2. 丰富的扩展生态系统:拥有丰富的扩展库,支持各种编程语言、框架和工具,用户可以根据自己的需求自定义编辑器。
  3. 内置调试器:集成了调试器,支持多种语言的调试,使开发者能够轻松进行代码调试。
  4. Git 整合:内置了 Git 版本控制工具,支持版本控制、分支管理等操作。
  5. 轻量高效:启动速度快,占用系统资源少,适合于各种规模的项目。

总的来说,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的快捷键。


相关文章
|
19天前
|
IDE Ubuntu 开发工具
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
Visual Studio Code(简称VSCode)是一款由微软开发的轻量级IDE,支持多种操作系统,以其高效、跨平台和免费的特点受到广泛欢迎。针对国内用户下载速度慢的问题,终于有了国内镜像,访问 https://www.baihezi.com/vscode/download
47 10
2025年vscode (visual studio code)国内高速下载加速镜像,极速秒下!
|
4月前
|
TensorFlow 算法框架/工具 Python
【Mac 系统】解决VSCode用Conda成功安装TensorFlow但程序报错显示红色波浪线Unable to import ‘tensorflow‘ pylint(import-error)
本文解决在Mac系统上使用VSCode时遇到的TensorFlow无法导入问题,原因是Python解析器未正确设置为Conda环境下的版本。通过在VSCode左下角选择正确的Python解析器,即可解决import TensorFlow时报错和显示红色波浪线的问题。
175 9
|
4月前
|
存储 Java 开发工具
【Azure Developer】VS Code运行Java 版Azure Storage SDK操作Blob (新建Container, 上传Blob文件,下载及清理)
【Azure Developer】VS Code运行Java 版Azure Storage SDK操作Blob (新建Container, 上传Blob文件,下载及清理)
|
4月前
|
Rust Shell 开发者
7步开始rust(自定义环境安装与vscode开发环境配置)
本文档详细记录了当改变Rust安装路径至特定目录(如 `/home/local_rust`)时,如何在VSCode环境中正确配置Rust开发环境的过程。主要包括:设置环境变量、使用清华大学镜像安装Rust及更新镜像源、手动部署 `rust-analyzer`、安装标准库源码、安装与配置VSCode插件等七个步骤,确保开发者能够顺利搭建并使用定制化的Rust开发环境。
721 0
|
4月前
|
C++
安装VS Code报错:您选定的驱动器或UNC共享不存在或不能访问。请选择其他位置。
安装VS Code报错:您选定的驱动器或UNC共享不存在或不能访问。请选择其他位置。
|
5月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
346 3
|
5月前
|
JavaScript 安全
下载安装 vscode(含汉化、插件的推荐和安装)
下载安装 vscode(含汉化、插件的推荐和安装)
84 0
下载安装 vscode(含汉化、插件的推荐和安装)
|
6月前
cocos creator+vscode安装及配置介绍
cocos creator+vscode安装及配置介绍
218 0
|
6月前
|
IDE 开发工具
一文搞懂:【Haxe】(一)VSCode搭建Haxe开发环境
一文搞懂:【Haxe】(一)VSCode搭建Haxe开发环境
68 0
|
1月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
下一篇
DataWorks