一、下载安装VSCode
官方下载：https://code.visualstudio.com/Download
根据自己的系统，下载对应版本安装：
安装后，启动 Visual Studio Code
二、下载安装Node.js
官方下载地址：https://nodejs.org/zh-cn
根据自己系统，下载合适自己系统的安装包。
三、VSCode常用插件介绍
1、Vue 3 Snippets
智能代码提示，语法高亮、智能感知、Emmet等
2、Auto Rename Tag
主要功能是在编辑 HTML、XML、JSX 或 TSX 等文件时，自动同步重命名配对的标签。例如，当你修改一个开始标签（如 <div>）时，插件会自动将对应的结束标签（如 </div>）更新为匹配的名称（如 </div>），从而避免手动修改时可能出现的遗漏或错误。
3、Auto Close Tag
核心功能：
自动闭合标签：在输入 HTML/XML 开标签的结束括号
>时，自动插入相应的闭合标签，并将光标定位在标签中间，提高编码效率。自闭合标签支持：处理如
<br>、<img>等自闭合标签，自动添加斜杠（如<br/>）。语言支持：广泛支持 HTML、XML、PHP、JavaScript、TypeScript、Vue、JSX、TSX 等语言。
4、vscode-icons
图标主题插件，能根据文件类型显示不同的图标，帮你快速识别文件类型，提升开发效率。
5、Path Intellisense
超实用的文件路径自动补全插件，能帮你快速准确地输入文件路径，省去手动敲打的麻烦，特别适合前端开发。
6、indent-rainbow
代码缩进加上彩虹色高亮的插件，让不同层级的代码块一目了然，特别适合处理嵌套复杂的代码结构。
7、Indenticator
Indenticator 是 VS Code 里一个帮你直观查看代码缩进层级的插件。它会在你点击缩进位置时，用一条白线高亮显示当前所处的缩进深度，让代码结构一目了然。
8、Prettier - Code formatter
代码格式化工具，它能自动统一代码风格，支持多种语言，并集成到大多数编辑器中，几乎无需额外配置。它的核心功能是自动格式化代码，确保代码风格的一致性，支持 JavaScript、TypeScript、CSS、HTML、Markdown 等多种语言。
9、ESLint
ESLint 是一个用于识别并报告 ECMAScript/JavaScript 代码中潜在问题的静态检查工具，能有效避免低级错误并统一代码风格。它通过解析代码生成抽象语法树（AST）来分析模式，并完全支持插件化扩展规则。
10、vue-official （官方推荐） 和 vetur 插件。
四、常用插件配置
打开VSCode，点击左下角设置按钮
1、每次保存的时候自动格式化
搜索 format On Save，勾选前面的复选框
2、每次保存的时候将代码按 eslint 格式进行修复
搜索 Code Actions On Save，点击下方圈中的地方
添加 "source.fixAll.eslint": true
"source.fixAll.eslint": true
3、在函数名和后面的括号之间加个空格
搜索 Insert Space Before Function Parenthesis，并将前面的复选框勾上
4、ESLint添加 vue 支持
搜索 validate，选择左边的 ESLint，点击后侧的settings.json
添加这几项：
"eslint.validate": [
"html",
"javascript",
"javascriptreact",
"vue"
]
5、用单引号替代双引号
搜索 Single Quote，勾选前面的复选框
6、代码结尾以分号结束
搜索 Semi，去掉前面的复选框
7、ESLint插件修改
ESLint插件审查很严格，如果空格也会提示错误以及赋值时，类型any等问题也会报错。
如果不适应，可以卸载或停用此插件即可。
五、创建一个vue3项目
1、检测环境安装是否成功。
输入命令：node -v
输入命令：npm -v
2、全局安装vue-cli脚手架。
输入安装命令：npm install -g vue-cli
3、创建项目
输入命令：vue create 您的项目名称
根据提示进入项目根目录文件夹，运行即可
cd helloworld
npm run serve 或者 npm run dev
浏览器输入：http://localhost:8080
4、发布打包命令
npm run build
打包生成完成后，在项目根目录下dist目录下：
六、关于windows系统 VSCode 终端 的配置问题
先打开VSCode，然后 按住 Ctrl + ~ 组合键，打开终端。
点击右下角的小三角，选择默认配置文件。
然后选择你需要的命令程序：一般用 cmd 或者 powershell 都行
七、创建vue项目事，选择自定义说明
按↑↓选择,按 空格 选择或取消：
根据自己需要，选择相应的功能
