Mac上的VS Code怎么配置_Visual Studio Code for Mac安装与插件【开发者】

Mac上VS Code需完成安装、code命令配置、必备插件（ESLint、Prettier、GitLens、Python、Remote-SSH）、个性化设置及任务调试配置，方可高效开发。

如果您在Mac上安装了Visual Studio Code但尚未完成基础开发环境配置，则可能无法高效进行代码编辑、调试或版本控制。以下是针对Mac平台的VS Code安装与核心插件配置步骤：

一、下载并安装VS Code for Mac

VS Code官方提供专为macOS优化的原生应用，需通过.dmg安装包完成部署，确保签名验证与系统权限兼容。

1、访问https://www.php.cn/link/919431c2f78cb0f50e79937f6dccb356，点击首页的Download for Mac按钮。

2、下载完成后双击打开VSCode-darwin-universal.zip（或类似名称的压缩包），解压出Visual Studio Code.app。

3、将该应用拖拽至/Applications文件夹中完成安装。

4、首次启动时，若系统提示“无法验证开发者”，请右键点击应用图标，选择“打开”，再点击“仍要打开”以绕过Gatekeeper限制。

二、配置终端命令行工具code

在Mac终端中直接调用code命令可快速打开当前目录或指定文件，该功能依赖Shell路径注册，需手动启用。

1、启动VS Code，按下Cmd + Shift + P打开命令面板。

2、输入Shell Command: Install 'code' command in PATH，回车执行。

3、关闭并重新打开终端窗口，运行code --version确认命令已生效。

4、在任意项目目录中执行code .即可在VS Code中打开当前工作区。

三、安装必备开发插件

插件扩展是VS Code实现语言支持、智能补全与调试能力的核心机制，以下为通用开发者高频使用插件清单。

1、点击左侧活动栏中的扩展图标（或按Cmd + Shift + X）。

2、在搜索框中依次输入以下插件名称并点击“安装”：

 • ESLint：提供JavaScript/TypeScript代码规范实时校验与自动修复。

 • Prettier：格式化HTML、CSS、JSON、JS、TS等多语言代码风格。

 • GitLens：增强内置Git功能，显示行级提交历史、作者与变更详情。

 • Python（由Microsoft官方发布）：支持Python解释器选择、调试、Jupyter Notebook集成。

绘蛙AI商品图

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

178

查看详情

 • Remote - SSH：允许通过SSH连接远程Linux/macOS服务器并在本地VS Code中编辑文件。

四、设置用户首选项与快捷键

个性化配置可显著提升编码效率，包括自动保存、缩进统一、字体调整等基础参数，以及自定义快捷键绑定。

1、按下Cmd + ,打开设置界面，切换至“文本编辑器 > 编辑”选项卡。

2、勾选Files: Auto Save，并设为afterDelay模式；启用Editor: Format On Save。

3、在“文本编辑器 > 缩进”中，将Tab Size设为2（前端常用）或4（后端常用），并开启Detect Indentation。

4、点击右上角“打开设置(JSON)”图标，手动编辑settings.json，添加如下内容：

"editor.fontFamily": "'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace",

"editor.fontLigatures": true,

"workbench.colorTheme": "One Dark Pro"。

五、启用开发者专用功能：任务与调试配置

VS Code可通过.vscode/tasks.json和.vscode/launch.json文件定义构建任务与调试会话，实现一键编译与断点调试。

1、在项目根目录下新建.vscode文件夹（如不存在）。

2、在该文件夹中创建tasks.json，填入Node.js脚本执行任务示例：

{ "version": "2.0.0", "tasks": [{ "label": "npm run dev", "type": "shell", "command": "npm run dev", "group": "build", "isBackground": true, "problemMatcher": [] }] }。

3、创建launch.json，配置Chrome调试器启动参数：

{ "version": "0.2.0", "configurations": [{ "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }] }。

4、按下Cmd + Shift + B运行任务，按Cmd + F5启动调试会话。

以上就是Mac上的VS Code怎么配置_Visual Studio Code for Mac安装与插件【开发者】的详细内容，更多请关注php中文网其它相关文章！