VS Code安装及配置需五步：一、官网下载对应系统安装包；二、按系统执行安装程序；三、启动后修改settings.json基础设置；四、安装ESLint等插件并重载窗口；五、配置.eslintrc.json与.prettierrc文件，设置Prettier为默认格式化工具。
如果您希望在电脑上使用轻量级但功能强大的代码编辑器，Visual Studio Code（简称 VS Code）是一个常见选择。以下是完成 VS Code 安装及基础插件配置的具体步骤：
一、下载 VS Code 安装包
VS Code 提供官方支持的 Windows、macOS 和 Linux 版本，所有安装包均需从其官网获取以确保安全性和完整性。
1、打开浏览器，访问 https://code.visualstudio.com/Download。
2、根据您的操作系统，点击对应图标：Windows 系统选择“Windows 64-bit”，macOS 用户选择“.zip”或“.dmg”，Linux 用户选择“.deb”（Debian/Ubuntu）或“.rpm”（Fedora/RHEL）。
3、等待下载完成，确认文件名包含“code-stable”字样且大小合理（通常为 80–120 MB）。
二、执行本地安装程序
安装过程依赖操作系统特性，需按平台分别操作，安装程序会自动注册系统路径与文件关联。
1、Windows 用户双击下载的 VSCodeSetup-x64-*.exe 文件，勾选“Add to PATH”和“Register Code as an editor for supported file types”后点击“Install”。
2、macOS 用户解压 .zip 文件，将 Visual Studio Code.app 拖入“应用程序”文件夹；首次运行时若提示“已损坏”，需在“访达 → 右键 → 显示简介 → 勾选‘仍要打开’”。
3、Linux（Debian/Ubuntu）用户在终端中执行：sudo apt install ./code_*.deb；RPM 系统则执行：sudo rpm -i code_*.rpm。
三、启动并初始化设置
首次启动 VS Code 会生成用户数据目录，并加载默认配置，此时可快速验证安装是否成功并进入个性化调整阶段。
1、在开始菜单（Windows）、Launchpad（macOS）或应用网格（Linux）中搜索并点击 Visual Studio Code 启动程序。
电脑手机电子配件电子商城网站模板是一款提供手机、手表、电脑等电子配件和设备的电子商城宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
2、启动后按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入“Preferences: Open Settings (JSON)”并回车。
3、在打开的 settings.json 文件中，可手动添加基础配置项，例如："editor.fontSize": 14, "files.autoSave": "onFocusChange"。
四、安装常用扩展插件
VS Code 的功能扩展依赖 Marketplace 中的插件，安装后需重启相关窗口或重新加载窗口才能生效。
1、点击左侧活动栏第四个图标（Extensions），或按 Ctrl+Shift+X 打开扩展面板。
2、在搜索框中依次输入以下插件名称并点击“Install”：ESLint、Prettier、GitLens、Bracket Pair Colorizer。
3、全部安装完成后，按下 Ctrl+Shift+P 输入“Developer: Reload Window”并执行，使插件完全载入。
五、配置 ESLint 与 Prettier 协同工作
为避免代码格式化冲突，需明确指定 Prettier 作为格式化工具，并让 ESLint 仅负责语法校验，二者通过配置文件协同运作。
1、在项目根目录新建文件 .eslintrc.json，填入基础规则，如：{"extends": ["eslint:recommended"]}。
2、在相同目录下创建 .prettierrc，写入格式配置，例如：{"semi": true, "singleQuote": true}。
3、在 VS Code 设置（settings.json）中添加两项关键配置："editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true。
