Visual Studio Code 安装与配置细节 Vue

原创 已于 2024-06-28 16:04:20 修改 · 568 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #ide

于 2024-06-20 10:33:53 首次发布

1.官方网址：Visual Studio Code - Code Editing. Redefined

2.打开项目的方式之一（这种方式便于在命令框中输入其他命令）：

windows操作系统下，项目文件夹下->鼠标右键->在终端中打开->输入命令 code .

或

（只在vscode中打开项目）win+r快捷键->输入命令 code [项目路径]

3.前端开发vscode插件

插件名称作用
Chinese (Simplified) Language Pack中文（简体）语言包
HTML CSS Support在编写样式表的时候，自动补全功能大大缩减了编写时间
JavaScript (ES6) code snippets支持ES6语法提示
Mithril Emmet一个能大幅度提高前端开发效率的一个工具，用于补全代码
Path Intellisense路径提示插件
Vue 3 Snippets在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。
Auto Close Tag自动闭合HTML/XML标签
Auto Rename Tag自动完成另一侧标签的同步修改
open in browservscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
 
Live Server一个具有实时加载功能的小型服务器，也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
Vue Language Features (Volar)一个专门为 Vue 3 构建的语言支持插件。它基于@vue/reactivity按需计算一切，实现原生 TypeScript 语言服务级别的性能。
TypeScript Vue Plugin (Volar)TypeScript Vue Plugin是一个对Vue.js框架进行扩展的插件，它允许开发者使用TypeScript语言编写Vue组件和应用程序，并提供了更好的类型检查和编辑器支持。通过使用TypeScript Vue Plugin，开发者可以在编写Vue应用时获得更好的开发体验和代码可维护性。
 
File UtilsFile Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。
IntelliJ IDEA Keybindings安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

4.设置把vscode 左下角的 NPM脚本（NPM SCRIPT）显示出来

（1）点击vscode左下角齿轮图标 -> 设置 -> 用户 -> 扩展->

Auto Detect on

Enable Run From Folder 勾选

（2）显示NPM Scripts

VS Code必备插件神器（2026）
前端必备小窝
07-28 1万+
VSCode能够如此强大还源自于它的插件市场，一款好的插件能够较为明显的提升大家的开发效率，废话不多说，直接上插件！
前端开发 VSCode 插件推荐
liangshanbo1215的博客
03-04 4420
为多种语言运行代码段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F#脚本、F#（.NET核心）、C#脚本、C#（.NET核心）、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml脚本、R、AppleScript、Elixir、Visual Basic。你的 AI 编程搭档。
【大模型】在VS Code(Visual Studio Code)上安装中文汉化版插件
weixin_43416960的博客
03-21 1万+
1、安装：在扩展中安装中文简版的插件2、对 VS Code 设置：在搜索栏，>Configure Display Language 后选中文3、设置完成的时候直接 restart。以上。
VsCode安装及常用插件下载
weixin_60872974的博客
01-26 4301
提取码：l3ca内有VsCode,NodeJs安装包。
vsCode安装插件
热门推荐
py_xiaoguaishou的博客
11-07 1万+
vscode安装的几种方式，包括无线安装在线安装
使用Visual Studio Code编写第一个Vue
柳老师的博客
07-04 3422
在components文件夹下创建:child.vue文件,代码由两部分组成,js和template(也就是html代码)3) index.html 引用main.js,利用其将vue组件加载到页面.在你准备放置项目的地方创建一个文件夹,例如:D:\VSCodeProject。js是由vue框架书写,负责数据和逻辑,template负责内容的呈现.src/App.vue :父组件,引用了HelloWorld.vue。2) src/main.js 将组件加载到页面的一个对象.cd
Visual Studio Code + vue快速安装配置Node.js+Vue+webpack+vscode
weixin_74009895的博客
07-24 2968
Visual Studio Code + vue快速安装配置Node.js+Vue+webpack+vscode
VUE开发工具Visual Studio Code安装配置
sinat_39502751的博客
08-06 884
VUE开发工具Visual Studio Code安装配置 一、官方下载Visual Studio Code 下载地址:https://code.visualstudio.com/ 下载成功后，安装指定目录或者自定义目录。 二、安装Visual Studio Code所需插件 打开开发软件Visual Studio Code 点击图中箭头所指处，打开应用商店 在箭头所指处搜索如下所列插件并安装 1、Chinese(Simplified) Language 2、ESLint 3、Git Blame
浅析Visual Studio Code断点调试Vue
08-27
1. 使用Visual Studio Code断点调试Vue需要配置Chrome远程调试端口。 2. 需要安装Debugger for Chrome插件以便断点调试。 3. 需要添加Visual Studio Code配置文件以便断点调试。 4. 需要修改webpack的sourcemap以...
Visual Studio Code搭建VUE开发环境
qq_40112624的博客
08-13 3122
安装成功后，npm安装的全局模块和缓存默认安装在C:\Users\用户名\AppData\Roaming\npm文件夹里，这里可以进行路径更改，统一放在我们的Nodejs安装文件夹里，新建两个文件夹。但是需要注意的是，关闭SSL验证会使你的npm操作不安全，因为它会绕过SSL证书的验证，使你的数据传输存在被中间人攻击的风险。加上后，再npm run serve，是npm run serve，还是npm run dev，就看package.json文件，运行成功截图。有时候，npm 的缓存可能会导致问题。
vscode插件
04-11
VS code常用语言插件，包括python，Java，go，r，scala，code runner
VScode插件
10-21
VScode插件,常用插件开发 VScode插件,常用插件开发 VScode插件,常用插件开发
vscode c插件安装包
04-25
vscode c插件安装包，C语言的扩展插件，支持vscode进行C调试
VS Code的下载以及常用插件
2401_86052333的博客
08-13 1140
vscode插件
VScode插件安装
weixin_45323842的博客
08-05 2385
实用、有用的vscode插件分享，按需安装即可
VSCode下载离线插件vsix
dlf_123456的博客
05-31 7632
网址https://marketplace.visualstudio.com/search?三、bin文件夹下面输入cmd命令 code --install-extension xxxxx.vsix 提示安装成功重启vs code即可。二、文件放在vs code 的安装目录的bin文件夹下。
VSCode 常用插件推荐
全栈程序员小黑的博客
05-03 4939
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。适用于 VS Code 的中文（简体）语言包拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。
安装visualstudiocode后配置vue环境
最新发布
04-30
<think>好的，用户已经安装了Visual Studio Code，现在想要配置Vue开发环境。我需要根据之前的回答和提供的引用信息来构建一个清晰的步骤指南。 首先，用户可能需要安装必要的扩展。根据引用[1]和[2]，Vetur和ESLint是必须的，所以应该包括这些扩展。另外，Node.js和npm是基础，需要确认用户是否已经安装，如果没有，需要指导他们安装。 接下来是创建Vue项目。用户可能不熟悉Vue CLI，所以需要详细说明如何安装和使用vue-cli来初始化项目。需要确保命令正确，比如使用npm install -g @vue/cli，然后vue create project-name。 然后是项目结构解析，引用[1]中提到了一些关键目录和文件，比如src、components、router等，需要解释这些部分的作用，帮助用户理解项目结构。 配置VSCode部分，用户可能需要设置ESLint和Prettier，确保代码风格一致。这里需要指导用户如何修改settings.json，并安装必要的插件。另外，调试配置也很重要，引用中提到需要配置launch.json，所以要给出具体步骤。 最后，优化工作流和测试部署的建议可以帮助用户更高效地开发。可能需要包括热重载、插件推荐以及构建命令。 需要检查之前的回答是否有遗漏，比如是否提到了汉化设置，但用户现在的问题是关于Vue环境配置，所以重点放在相关工具和扩展上。确保步骤清晰，命令准确，并参考之前的引用内容来增强可信度。同时，要使用用户熟悉的术语，避免过于技术化的表达，保持指导的易懂性。</think>根据您的要求，以下是$Visual Studio Code$配置Vue开发环境的完整指南（整合环境搭建与最佳实践）： --- ### 一、基础环境准备 1. **安装必要扩展** - 必装插件： - `Vetur` (Vue语法高亮/智能提示) [^1] - `ESLint` (代码规范检查) [^2] - `Vue VSCode Snippets` (代码片段生成) ```bash # 通过VSCode扩展商店搜索安装 ``` 2. **Node.js环境** $$ \text{要求版本} \geq v16.x $$ ```bash # 验证安装 node -v npm -v ``` *未安装可访问Node.js官网下载LTS版* --- ### 二、Vue项目创建 #### ▶ 通过Vue CLI创建（推荐） ```bash # 全局安装Vue CLI npm install -g @vue/cli # 初始化项目（选择Vue3默认配置） vue create my-vue-project ``` *交互式界面中需选择：* - ☑ Babel - ☑ Router (引用[1]中的路由配置依赖) - ☑ ESLint + Standard config (代码规范) #### ▶ 项目结构解析（对应引用[1]） ```text my-vue-project/ ├── node_modules/ # 依赖库 ├── public/ # 静态资源 │ ├── index.html # 入口模板 │ └── favicon.ico ├── src/ │ ├── assets/ # 图片/字体等资源 │ ├── components/ # 可复用组件 │ ├── router/ # 路由配置（需引用[1]中的结构） │ ├── views/ # 页面级组件 │ ├── App.vue # 根组件 │ └── main.js # 项目入口 ├── .eslintrc.js # ESLint配置（对应引用[2]的规则扩展） └── package.json # 依赖管理 ``` --- ### 三、VSCode深度配置 #### 1. **ESLint集成** (优化引用[2]的配置) ```json // settings.json { "eslint.validate": ["vue", "javascript"], "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } ``` *保存时自动修复规范问题* #### 2. **Vue文件格式化** ```json { "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "vetur.format.defaultFormatter.html": "prettier" } ``` #### 3. **调试配置** (需引用[1]中的入口文件关联) ```json // launch.json { "configurations": [ { "type": "chrome", "request": "launch", "name": "Vue Debug", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src" } ] } ``` --- ### 四、开发工作流优化 1. **启动开发服务器** ```bash npm run serve ``` *自动启用热重载（修改代码实时刷新）* 2. **推荐插件扩展** - `Auto Close Tag` (自动闭合HTML标签) - `Path Intellisense` (文件路径自动补全) - `npm Intellisense` (npm依赖自动补全) 3. **生产环境构建** ```bash npm run build ``` *生成dist/目录用于部署* --- ### 常见问题解决方案 | 问题现象 | 解决方法 | |---------|----------| | ESLint报错`Parsing error` | 安装依赖：`npm install eslint-plugin-vue` | | VSCode无法识别`@/`路径别名 | 创建`jsconfig.json`[^1] | | 浏览器未自动打开 | 检查`vue.config.js`是否设置`devServer.open: true` | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你喜欢喝可乐吗？

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值