Windows_VsCode 开发环境构建

明月看潮生

于 2025-05-24 07:04:00 发布

阅读量794

点赞数 24

分类专栏：开发环境构建文章标签： windows vscode ide 开发环境

本文链接：https://blog.csdn.net/qq_40071585/article/details/148179921

版权

开发环境构建专栏收录该内容

8 篇文章

订阅专栏

Windows_Visual Studio Code 开发环境构建

一、Visual Studio Code简介
二、安装 Visual Studio Code
三、配置 Visual Studio Code
四、安装通用扩展
五、构建全栈开发环境
六、构建Python开发环境

一、Visual Studio Code简介

Visual Studio Code（简称VS Code）是一款由微软开发的免费开源的代码编辑器。

本文主要推荐前端开发、Python开发、Go语言开发使用VS Code。先看它的特点：

（一）功能强大

代码编辑

它支持多种编程语言，如JavaScript、TypeScript、Python、C++、Java等。对于每种语言，VS Code都能提供语法高亮功能，让代码的结构和关键部分一目了然。例如，在编写Python代码时，关键字（如def用于定义函数）会以一种颜色显示，字符串以另一种颜色显示，方便开发者快速区分代码的不同部分。

还具备智能感知功能。当开发者输入代码时，它能够根据上下文提供代码补全建议。比如在编写HTML代码时，当输入<div>并按下回车键，它会自动补全为<div></div>，并且光标会定位在两个标签之间，方便用户继续输入内容。
调试功能

VS Code内置了强大的调试工具。开发者可以在代码中设置断点，当程序运行到断点处时，程序会暂停。此时，开发者可以查看变量的值、调用栈等信息。例如，在调试一个JavaScript程序时，如果在某一行设置断点，当程序执行到该行时，就可以查看当前函数中各个变量的值，分析程序的执行状态，这对于发现和修复程序中的错误非常有帮助。
版本控制集成

它很好地集成了Git等版本控制系统。用户可以直接在VS Code中进行版本控制操作，如提交更改、查看更改历史、拉取和推送代码等。例如，开发者可以在VS Code的源代码管理视图中看到文件的更改状态，通过简单的操作就能将更改提交到远程仓库，方便团队协作开发。
扩展功能

VS Code拥有丰富的扩展生态系统。用户可以根据自己的需求安装各种扩展。例如，对于前端开发人员，可以安装Prettier格式化工具扩展，它能够按照预设的代码格式规范自动格式化代码，使代码风格保持一致。还有像Live Server这样的扩展，可以让开发者在本地快速启动一个开发服务器，并且当代码更改保存后，浏览器页面会自动刷新，方便实时查看网页的更新效果。

（二）轻量高效

启动速度快

相比一些重量级的集成开发环境（IDE），VS Code的启动速度很快。它不需要加载大量的组件和服务就能快速启动，这对于快速打开代码文件进行查看和编辑非常方便。例如，开发者可能只是想快速查看一个简单的配置文件，VS Code能够迅速启动并打开文件，不会像一些大型IDE那样需要等待较长时间。
资源占用低

在运行过程中，VS Code对系统资源的占用相对较低。它不会占用过多的内存和CPU资源，即使在配置较低的计算机上也能比较流畅地运行。这使得它可以在各种不同的开发环境中使用，包括一些老旧的设备或者资源有限的虚拟机环境。

（三）跨平台

VS Code支持Windows、macOS和Linux等多种操作系统。这意味着开发者可以在不同的操作系统上使用相同的开发工具，保持一致的开发体验。例如，一个开发团队中有的成员使用Windows系统，有的使用macOS系统，他们都可以使用VS Code进行协作开发，共享配置和开发习惯。

二、安装 Visual Studio Code

好的，以下是 Windows 系统下安装 Visual Studio Code 的详细步骤：

（一）下载安装程序

访问官网：打开浏览器，访问 Visual Studio Code 官方网站：https://code.visualstudio.com/。
选择下载：

在官网首页，找到 “Download” 按钮，点击它。

网站会自动检测你的操作系统并推荐合适的版本。如果你使用的是 Windows 系统，它会推荐 “Windows” 版本的下载链接。

点击 “Download for Windows” 按钮，开始下载安装程序。下载的文件通常是一个 .exe 文件，例如 VSCodeSetup-x64-1.100.0.exe（版本号可能会有所不同）。

（二）运行安装程序

查找下载文件：

打开文件资源管理器，找到下载的 .exe 文件。默认情况下，它通常位于浏览器的下载文件夹中。
双击运行：

双击下载的 .exe 文件，启动安装程序。

安装程序启动后，会打开一个安装向导窗口。

（三）安装向导步骤

阅读许可协议：

在安装向导的欢迎页面，点击 “Next” 按钮。

阅读许可协议，如果你同意协议条款，勾选 “I agree to the terms of the license agreement” 选项，然后点击 “Next” 按钮。
选择安装路径：

选择好安装路径后，点击 “Next” 按钮。
选择开始菜单文件夹：

在这个步骤，你可以选择将 Visual Studio Code 的快捷方式添加到哪个开始菜单文件夹中。通常使用默认设置即可，点击 “Next” 按钮。
选择附加任务：

这里有几个可选的附加任务：

Create a desktop icon：创建一个桌面快捷方式，方便你快速启动 Visual Studio Code。

Add to PATH：将 Visual Studio Code 添加到系统的 PATH 环境变量中，这样你就可以在任何位置通过命令行启动 Visual Studio Code。

Add to File Explorer context menu：将 Visual Studio Code 添加到文件资源管理器的右键菜单中，方便你直接在文件夹中打开 Visual Studio Code。

建议勾选所有这些选项，然后点击 “Next” 按钮。
安装：

点击 “Install” 按钮，开始安装 Visual Studio Code。

安装过程可能需要几分钟时间，具体取决于你的电脑性能和网络速度。安装完成后，会弹出一个提示窗口，告诉你安装已经完成。
完成安装：

点击 “Finish” 按钮，完成安装。

（四）官方文档

Documentation for Visual Studio Code

（五）启动 Visual Studio Code

通过桌面快捷方式启动：

如果你在安装过程中选择了创建桌面快捷方式，可以在桌面上找到 Visual Studio Code 的图标，双击它启动程序。
通过开始菜单启动：

点击 “开始” 按钮，在开始菜单中找到 Visual Studio Code 的快捷方式，点击它启动程序。
通过命令行启动（如果添加到 PATH）：

如果你在安装过程中选择了将 Visual Studio Code 添加到 PATH 环境变量，可以在命令提示符或 PowerShell 中输入以下命令启动 Visual Studio Code：
```
code
```

（六）验证安装

检查版本：

打开 Visual Studio Code 后，点击左下角的版本号信息，或者通过 “帮助”->“关于” 菜单，查看安装的 Visual Studio Code 版本号，确认安装成功。
测试功能：

创建一个新的文件，输入一些代码（如 HTML、JavaScript 等），保存并运行，测试 Visual Studio Code 的基本功能是否正常。

通过以上步骤，你就可以在 Windows 系统上成功安装并启动 Visual Studio Code，开始你的开发工作了。

三、配置 Visual Studio Code

（一）固定到任务栏

可以把安装好的VS Code固定到任务，便于使用。

（二）资源管理器操作

在资源管理器中，建立一个用于建立新项目的文件夹，先不管是什么项目。然后单击鼠标右键，会出现用Code打开的操作项。

这只是一种方法，还有，双击进入此文件夹。

在地址栏输入cmd回车。

这时会在当前文件夹中打开命令行窗口。在命令行上输入code . 后回车，则会直接用VS Code打开当前文件夹。

这时会弹出一个对话框：

图中内容翻译如下：

您是否信任此文件夹中文件的作者？

Code 提供了一些功能，这些功能可能会自动执行此文件夹中的文件。

如果您不信任这些文件的作者，我们建议您在受限模式下继续，因为文件可能是恶意的。请参阅我们的文档了解更多信息。

G:\Code Project

[ ] 信任父文件夹 ‘G:’ 中所有文件的作者

[是，我信任作者] [不，我不信任作者]

信任文件夹并启用所有功能浏览文件夹时使用受限模式

点击左侧按钮。先出现的是一个欢迎页面。新功能中有一个Copilot，请另行了解，此处略过。

（三）选择主题

直接在欢迎面中选定第二个选择按钮，选择一个主题。

（四）设置中文显示

使用左侧的扩展图标，在搜索框中输入chinese,然安装图示中的中文扩展，这在有些软件中称为插件，微软称为扩展。

安装完成后，右下角会弹出对话框，要求重新启动软件。重启后，VS Code就变成中文界面了。

（五）设置外观

整体窗口有edge浏览器一样，可以使用Ctrl +,Ctrl -进行缩放。
进入设置界面，先进行常用设置。每项根据自己需要确定选项的值。暂时不了解或用不上的先不用更改。
阅读更多的参考文章。

四、安装通用扩展

这里推荐几个扩展（插件）。较为常用。

（一）翻译插件：Translation

可以将英文翻译成中文。

（二）代码检查插件：Eslint

ESLint 是一个非常流行的 JavaScript 代码质量和代码风格检查工具。它通过静态代码分析来识别代码中的问题，包括潜在的错误、代码风格不一致等问题，并提供自动修复建议。ESLint 可以帮助开发者编写更高质量的 JavaScript 代码，提高代码的可读性和可维护性。主要功能：

代码质量检查：

ESLint 可以检查代码中的语法错误、逻辑错误、性能问题等，帮助开发者提前发现并修复这些问题。
代码风格检查：

ESLint 可以检查代码风格问题，如缩进、空格、分号等，确保代码风格一致。
自定义规则：

ESLint 允许开发者自定义检查规则，以适应不同的项目需求和团队规范。
自动修复：

ESLint 可以自动修复一些简单的代码问题，减少手动修改的工作量。
集成支持：

ESLint 可以与多种编辑器和构建工具集成，如 Visual Studio Code、WebStorm、Gulp 等，提供实时的代码检查和提示。

（三）代码格式化插件：Prettier

Prettier 是一个流行的代码格式化工具，它支持多种编程语言，包括 JavaScript、TypeScript、CSS、HTML、JSON、YAML 等。Prettier 的主要目的是自动格式化代码，使代码风格保持一致，从而减少手动调整代码格式的工作量，并避免因代码风格不一致而导致的合并冲突。

主要特点

自动格式化：

Prettier 可以自动调整代码的格式，包括缩进、空格、换行等，使代码看起来更加整洁和一致。
支持多种语言：

Prettier 支持多种编程语言和文件格式，可以满足不同项目的需求。
配置灵活：

Prettier 允许用户自定义格式化规则，以适应不同的项目规范和团队风格。
集成支持：

Prettier 可以与多种编辑器和 IDE 集成，如 Visual Studio Code、WebStorm、Atom 等，提供实时的代码格式化功能。
与 ESLint 配合使用：

Prettier 可以与 ESLint 等代码检查工具配合使用，Prettier 负责代码格式化，ESLint 负责代码质量检查，两者互补，提高代码质量。

这里先安装，需要用时再配置。

（四）开发服务器插件：Live Server

Live Server 是一个用于在 Visual Studio Code (VS Code) 中快速启动本地开发服务器的扩展。它主要用于前端开发，特别是 HTML、CSS 和 JavaScript 的开发。以下是 Live Server 的主要功能和用途：

主要功能

快速启动本地服务器：

Live Server 可以快速启动一个本地开发服务器，让你在浏览器中查看和测试你的网页。
实时预览：

当你在 VS Code 中编辑和保存文件时，Live Server 会自动刷新浏览器页面，让你实时看到更改的效果。这大大加快了开发和调试的速度。
支持多种浏览器：

Live Server 支持在多种浏览器中打开预览页面，包括默认浏览器、Chrome、Firefox 等。
自定义端口和路径：

你可以自定义服务器的端口号和根路径，以适应不同的开发需求。
支持 HTTPS：

Live Server 支持 HTTPS 协议，可以用于开发需要 HTTPS 的网页。
热模块替换（HMR）：

对于一些支持热模块替换（HMR）的前端框架（如 React、Vue 等），Live Server 可以与 HMR 配合使用，实现更高效的开发体验。

安装和使用

安装 Live Server 扩展：

在 VS Code 中打开扩展视图，搜索并安装 “Live Server” 扩展。
启动 Live Server：

打开一个 HTML 文件，右键点击编辑器区域，选择 “Open with Live Server”。

或者，使用快捷键 Right-click > Open with Live Server。
自定义设置：

你可以通过 VS Code 的设置来自定义 Live Server 的行为，如设置默认浏览器、端口号等。
使用 HTTPS：

如果需要使用 HTTPS，可以在启动 Live Server 时选择 “Open with Live Server (HTTPS)”。

优势

提高开发效率：实时预览功能让你可以快速看到代码更改的效果，减少手动刷新浏览器的频率。
简化开发流程：无需手动配置本地服务器，只需安装扩展并点击一下即可启动。
兼容性好：支持多种浏览器和开发环境，适用于各种前端项目。

总的来说，Live Server 是一个非常实用的 VS Code 扩展，特别适合前端开发人员使用。它可以让你更高效地开发和调试网页，提高开发体验。

Auto Rename Tag 和 Path Intellisense 是 Visual Studio Code (VS Code) 中的两个非常实用的扩展，它们可以显著提高前端开发效率。以下是它们的用途和功能：

（五）标签自动匹配重命名：Auto Rename Tag

Auto Rename Tag 是一个专门针对 HTML 开发的 VS Code 扩展。它的主要功能是：

自动重命名标签：
- 当你在 HTML 文件中修改一个标签的名称时，Auto Rename Tag 会自动更新对应的闭合标签。例如，如果你将一个 <h1> 标签改为 <h2>，扩展会自动将对应的 </h1> 改为 </h2>。
减少手动错误：
- 手动修改 HTML 标签时，很容易忘记更新对应的闭合标签，导致标签不匹配的错误。Auto Rename Tag 可以自动完成这一过程，减少手动错误。
提高开发效率：
- 通过自动重命名标签，你可以更快地修改 HTML 结构，而不必担心标签不匹配的问题。

（六）文件路径自动补全：Path Intellisense

Path Intellisense 是一个用于增强 VS Code 文件路径自动补全功能的扩展。它的主要功能是：

文件路径自动补全：

当你在代码中引用本地文件（如图片、CSS 文件、JavaScript 文件等）时，Path Intellisense 会提供文件路径的自动补全建议。
提高文件引用效率：

手动输入文件路径不仅费时，而且容易出错。Path Intellisense 可以自动补全路径，提高文件引用的效率和准确性。
支持多种文件类型：

Path Intellisense 支持多种文件类型，包括图片（如 .jpg、.png）、CSS 文件（如 .css）、JavaScript 文件（如 .js）等。
自定义路径模式：

你可以根据项目的需求自定义路径补全的模式，如使用相对路径、绝对路径等。

通过使用 Auto Rename Tag 和 Path Intellisense，你可以显著提高前端开发效率，减少手动错误，提高代码的准确性和可维护性。这两个扩展是前端开发者的必备工具之一。

（七）AI助手：lingma

通义灵码是由阿里云提供的智能编码辅助工具，提供 代码智能生成、智能问答、多文件修改、编程智能体 等能力，为开发者带来高效、流畅的编码体验。同时，我们为提供企业客户提供了企业标准版、专属版，具备企业级场景自定义、私域知识增强等能力，助力企业研发智能化升级。

兼容 VS Code、Visual Studio、JetBrains IDEs 等主流 IDE；

编程语言：支持 Java、Python、Go、C/C++、JavaScript、TypeScript、PHP、Ruby、Rust、Scala 等主流编程语言。

五、构建全栈开发环境

下面是一个完整的指南，帮助你设置基于 Vue 3.5+ 和 Vite 的全栈开发环境。

（一）环境准备

1. Node.js安装

Node.js (建议 LTS 版本) - 官网下载。

下载完成后，点击安装。

这个复选框不要点。

验证安装：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. Vue.js devtools (浏览器扩展，用于调试)

进入浏览器扩展安装站点，搜索 Vue.js devtools 扩展并安装。

3. 推荐 VS Code 扩展

Vue - Official

这是最新官方用于VS Code的扩展。

（二）创建 Vue 3 + Vite 项目

# 使用 npm
npm create vite@latest my-vue-app -- --template vue

# 或使用 yarn
yarn create vite my-vue-app --template vue

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install
# 或
yarn

打开网址，出现如下内容的网页，中间是一个计数按钮。

至此，Vue项目已经创建。

（三）项目结构优化

my-vue-app/
├── src/
│   ├── api/                # API 请求相关
│   ├── assets/             # 静态资源
│   ├── components/         # 公共组件
│   ├── composables/        # 组合式函数
│   ├── router/             # 路由配置
│   ├── stores/             # Pinia 状态管理
│   ├── styles/             # 全局样式
│   ├── utils/              # 工具函数
│   ├── views/              # 页面组件
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── server/                 # 后端代码
├── public/                 # 静态文件
├── vite.config.js          # Vite 配置
└── package.json

（四）添加必要依赖

# 前端常用依赖
npm install vue-router@4 pinia axios sass

# 后端开发依赖 (Express 示例)
npm install express body-parser cors --save-dev

# 开发工具
npm install @vitejs/plugin-vue @vue/compiler-sfc -D

（五）配置 Vite (vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务器地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

（六）设置 Vue Router

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue')
  }
  // 其他路由...
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

（七）设置 Pinia 状态管理

// src/stores/index.js
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

// 在 main.js 中使用
import pinia from './stores'
app.use(pinia)

（八）创建简单的后端服务器

// server/index.js
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()
const PORT = 3000

app.use(cors())
app.use(bodyParser.json())

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from backend!' })
})

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`)
})

（九）配置 package.json 脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "server": "node server/index.js",
    "dev:full": "concurrently \"npm run dev\" \"npm run server\""
  }
}

（十）开发工作流

启动开发服务器:
```
npm run dev
```
启动后端服务器 (另一个终端):
```
npm run server
```
或使用 concurrently 同时启动:
```
npm install concurrently -D
npm run dev:full
```

（十一）生产环境构建

npm run build

构建后的文件会在 dist 目录中。

（十二）进阶配置

环境变量

在项目根目录创建 .env 文件:

VITE_API_BASE_URL=/api

在代码中访问:

const baseUrl = import.meta.env.VITE_API_BASE_URL

TypeScript 支持

创建项目时使用 vue-ts 模板:

npm create vite@latest my-vue-app -- --template vue-ts

代码规范

安装 ESLint 和 Prettier:

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier -D

创建 .eslintrc.js 和 .prettierrc 配置文件

（十三）常见问题解决

端口冲突: 修改 vite.config.js 中的 server.port 或后端端口
热更新失效: 确保文件保存在正确的目录，检查文件名大小写
代理不生效: 检查 vite.config.js 中的 server.proxy 配置
Vue 组件未解析: 确保安装了 @vitejs/plugin-vue 并在配置中添加

这样你就拥有了一个完整的 Vue 3.5+ 和 Vite 全栈开发环境！

六、构建Python开发环境

在 VS Code 中构建 Python 开发环境，主要需要安装 Python 相关插件并进行适当的环境配置。以下是具体步骤：

一、安装 Python 插件

打开扩展面板：点击 VS Code 左侧的扩展图标，或者使用快捷键 Ctrl+Shift+X。
搜索 Python 插件：在扩展搜索框中输入“Python”，找到由 Microsoft 提供的 Python 扩展。
安装插件：点击“安装”按钮，安装完成后，建议重启 VS Code 以启用插件。

二、配置 Python 解释器

打开命令面板：按下 Ctrl+Shift+P，输入“Python: Select Interpreter”并选择该命令。
选择解释器：从列表中选择已安装的 Python 解释器路径。如果未显示，可以手动浏览到 Python 安装路径下的 python.exe 文件。

三、安装其他推荐插件

为了提升开发效率，可以安装以下插件：

Pylance：轻量级 AI 驱动的代码助手，提供智能提示和错误修复功能。
Jupyter：支持 Jupyter Notebook，方便进行数据分析和可视化。
Pylint：用于代码风格检查和质量保证。
GitLens：增强 Git 功能，显示代码提交历史。

安装方法与安装 Python 插件类似，通过扩展面板搜索并安装。

四、创建和使用虚拟环境

创建虚拟环境：
- 打开 VS Code 的终端（Ctrl+）。
- 在项目目录下运行以下命令创建虚拟环境：
```
python -m venv venv
```
激活虚拟环境：
- Windows：运行 .\venv\Scripts\activate。
- macOS/Linux：运行 source venv/bin/activate。
在 VS Code 中选择虚拟环境：
- 重新运行“Python: Select Interpreter”，选择虚拟环境中的 Python 解释器。