【开发环境】Mac 安装 Visual Studio Code ( VSCode 简介 | 下载 VSCode | 安装 VSCode | 安装中文语言包 )

news/2024/7/16 7:23:18 标签: macos, vscode, ide, 开发环境, VSCode, 开发工具, 微软

文章目录

  • 一、Visual Studio Code 简介
  • 二、MAC 安装 Visual Studio Code
    • 1、下载 Visual Studio Code
    • 2、安装 Visual Studio Code
    • 3、安装中文语言包
    • 4、编辑 html 并运行





一、Visual Studio Code 简介



Visual Studio Code 简称 VSCode , 是 微软 开发的一款 轻量级 / 跨平台 的代码编辑器 ;

VSCode 支持 Windows、macOS 和 Linux 操作系统 ;

VSCode 支持如下 编程语言 :

  • JavaScript
  • TypeScript
  • Node.js
  • C++
  • C#
  • Java
  • Python
  • PHP
  • Go

VSCode 集成了调试器 , 可以调试 上述 多种语言 ;

VSCode 内置了 Git 版本控制插件 , 可以进行 版本控制 和 代码提交 ;





二、MAC 安装 Visual Studio Code




1、下载 Visual Studio Code


进入 Visual Studio Code 官网 https://code.visualstudio.com/

在 首页 中 , 网站会根据 浏览器 的 访问信息 , 自动判断出当前访问的平台 , 可以根据访问平台自动判断出要下载的 软件版本 ;

在这里插入图片描述

点击 下载按钮 右侧的 下拉菜单 , 可以选择下载 Windows / MAC / Linux 系统的 Visual Studio Code 软件 ;

在这里插入图片描述

2、安装 Visual Studio Code


下载完成之后 , 下载的 VSCode-darwin-universal.zip 文件有 218.7MB ;

在这里插入图片描述

双击 VSCode-darwin-universal.zip 压缩包之后 , 会自动解压到本地目录中 ;

在这里插入图片描述

将上述解压的 Visual Studio Code 文件 移动到 应用程序 目录中 ;

在这里插入图片描述

双击 Visual Studio Code 弹出如下对话框 , 同意打开即可 ;

在这里插入图片描述

打开后的界面如下 :

在这里插入图片描述


3、安装中文语言包


启动 VSCode 之后 , 会弹出 安装中文语言包 提示 , 这里点击 " 安装并重启 " 按钮 ;

在这里插入图片描述

安装语言包完毕后的效果如下 :

在这里插入图片描述


4、编辑 html 并运行


打开一个空目录 , 创建一个 html 页面 ,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // JavaScript 函数

        // 定义函数
        function add(num1, num2) {

            // 打印所有的实参
            console.log(arguments);

            // 返回返回值
            return num1 + num2;
        }

        // 函数有返回值
        var ret = add(1, 2);
        console.log("函数返回值 : " + ret);

        ret = add(3, 4, 5, 6, 7, 8, 9, 10);
        console.log("函数返回值 : " + ret);
    </script>
</head>

<body>
</body>

</html>

按下 Fn + F5 执行程序 , 会弹出选择 调试器 选项 , 这里选择 Web 应用 ( Chrome ) 选项 ;

在这里插入图片描述

在弹出的 Chrome 浏览器中 , 使用 Fn + F12 快捷键 , 可以打开 浏览器 的控制台 ;

在这里插入图片描述


http://www.niftyadmin.cn/n/5469812.html

相关文章

windows or ubuntu mount 文件

windows 实测环境:windows 11, 64 bit. ref: Mount-DiskImage (Storage) | Microsoft Learn Dismount-DiskImage (Storage) | Microsoft Learn Get-DiskImage (Storage) | Microsoft Learn # 查询 Get-DiskImage -ImagePath "f:\wsl\ext4.vhdx"# mount Mount-…

RAMS (Mesoscale Model System) 和 WRF 区别

历史和发展&#xff1a; RAMS&#xff1a;RAMS 最早于1970年代由美国科罗拉多州立大学开发&#xff0c;并在之后几十年不断发展壮大。它是最早用于模拟地区尺度大气动力学、热力学和降水过程的模型之一。WRF&#xff1a;WRF 是由美国国家大气研究中心&#xff08;NCAR&#xff…

微信小程序——小程序和页面生命周期详解

小程序的生命周期 小程序的生命周期主要分为以下几个阶段&#xff1a; 创建&#xff08;onLoad&#xff09;&#xff1a; 当小程序启动时&#xff0c;或者从其他页面跳转到当前页面时&#xff0c;会触发 onLoad 生命周期函数。 这个阶段通常用于初始化页面数据&#xff0c;从服…

第十一届蓝桥杯物联网试题(省赛)

对于通信方面&#xff0c;还是终端A、B都保持接收状态&#xff0c;当要发送的数组不为空再发送数据&#xff0c;发送完后立即清除&#xff0c;接收数据的数组不为空则处理&#xff0c;处理完后立即清除&#xff0c;分工明确 继电器不亮一般可能是电压不够 将数据加空格再加\r…

SpringBoot整合ELK8.1.x实现日志中心教程

目录 背景 环境准备 环境安装 1.JDK安装 2.安装Elasticsearch 3.安装zookeeper 4.安装Kafka 5.安装logstash 6.安装file beat 解决方案场景 1.日志采集 1.1 应用日志配置 1.1.1 创建logback-spring.xml文件 1.1.2 创建LoggerFactory 1.1.3 trace日志的记录用法 …

使用SpringBoot实现的登录注册后端功能

1、系统演示视频&#xff08;演示视频&#xff09; 2、需要交流和学习请联系

windows下安装iteliij Idea2023.3

首先从官网下载 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击un…

面了美团大模型算法岗(实习),这次我要上岸了。。。

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总…