VSCode中关于Vue的配置

最新推荐文章于 2024-08-13 16:52:28 发布
最新推荐文章于 2024-08-13 16:52:28 发布
阅读量301 收藏
点赞数
分类专栏： 前端工程化 文章标签： vue vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisa_lisa/article/details/88572377
版权

最基本的配置

打开文件 ——> 首选项 ——> 设置 ——> 打开设置

在这里插入图片描述

  • 复制以下片段
{
    "window.zoomLevel": 1,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],
"git.ignoreMissingGitWarning": true,
"liveServer.settings.donotShowInfoMsg": true,
}

vscode 自动换行

打开文件 ——> 首选项 ——> 设置 ——> 搜索设置 ——> 输入editor.wordWrap

在这里插入图片描述

呱呱•.•
关注
专栏目录
vue项目中配置vscode
周家大小姐
06-28 2182
需求：多人开发的时候每个人的风格都不同；为了项目的统一化便于开发可以在项目的根目录建立.vscode文件夹 extensions.json 用于编写扩展插件插件如果成员没有的话并不会自己下载；但可以在扩展中点击筛选器扩展选中推荐就会出来然后一一安装就可以了 添加扩展方法可以去到你想添加扩展的详情中 找到右边的详细信息下的标识符值复制放到extensions.json文件中就可以 settings.json 用于针对项目开发时vscode的风格如格式化 当团队成员下下来后；会优先使用项目中的vsc
利用vscode编写vue的简单配置详解
08-30
3. Vue相关插件：VSCode关于Vue插件现在只有vscode-vue一个，但是安装完成代码提示并没有生效，需要在setting.json中设置language mode为Vue。 4. 代码补全与代码片段：编写Vue项目主要需要代码补全与代码片段，...
VSCode中配置Vue开发环境
lbf198303的博客
06-17 1343
【代码】VSCode中配置Vue开发环境。
Visual Studio Code搭建VUE开发环境
qq_40112624的博客
08-13 1356
安装成功后，npm安装的全局模块和缓存默认安装在C:\Users\用户名\AppData\Roaming\npm文件夹里，这里可以进行路径更改，统一放在我们的Nodejs安装文件夹里，新建两个文件夹。但是需要注意的是，关闭SSL验证会使你的npm操作不安全，因为它会绕过SSL证书的验证，使你的数据传输存在被中间人攻击的风险。加上后，再npm run serve，是npm run serve，还是npm run dev，就看package.json文件，运行成功截图。有时候，npm 的缓存可能会导致问题。
VSCode开发Vue推荐配置
m0_65908376的博客
05-21 2146
1、安装插件 1.1 ESLint （ESLint语法检查工具） 1.2 Prettier（格式化工具） 1.3 Vetur（Vue开发必备插件，高亮，格式化等） 1.4 图标集（为了文件图标好看） 1.5 Vue常用代码块 1.6 前端简易服务器（让html能以服务器模式运行） 2、配置settings.json文件 { "workbench.iconTheme": "vscode-icons", "files.associations": { "...
vscode 构建vue项目常用的配置
qq_23939265的博客
05-27 767
vscode代码保存时自动格式化成ESLint风格 现在汉化包（Chinese） 安装 eslint 插件 打开用户配置：文件 -> 首选项 -> 设置 在用户设置中填写如下配置： { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", ...
vs code 搭建 vue 开发环境
htydowd的博客
06-01 780
vue-cli ： 输入 npm install -g @vue/cli。nodejs：官网下载安装后 输入 node -v 验证是否安装成功。以管理员身份打开 vs code ，导入 vue 项目。-project-name ，创建vue 项目。安装后，vue --versoin 验证。终端执行 npm run serve。vs code 环境准备好。进入目标文件夹，输入。现在开发越来越简单了。
详解VSCode配置启动Vue项目
01-21
下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入...
vscode中Vue别名路径提示的实现
11-19
当使用 Vue 框架进行项目开发时，在 vue.config.js 中配置好了路径别名后，到其他页面引入组件、引入 css 、引入静态文件路径时，使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件，...
VSCode和VUE环境的初始安装配置
西京刀客
05-16 8059
文章目录vscode和vue初始安装vue-cli初始化一个vue项目常见问题整理vue init卡住，缓慢问题vscode字体放大vscode 如何快速定位到某文件、全局搜索、修改快捷键vue init webpack 与vue create 创建项目有什么区别vue-cli3去掉vue.js中的EslintSetup e2e tests with Nightwatch?vue简单入门Webpa...
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）
明静致远
07-12 6915
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。
Vue——vsCode配置vue
张文慧 期待每一天更好的自己
07-19 298
【有项目】 1.首先安装node https://nodejs.org/en/download/ 2.打开cmd命令， 输入node-v，判断安装是否成功 输入npm -v，判断安装是否成功 3.输入npm install -g cnpm --registry=http://registry.npm.taobao.org，安装淘宝镜像安装相关依赖 4.安装vue-cli脚手架构...
VsCode搭建Vue项目
开心博客
10-14 236
在vscode上搭建一个vue项目—初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。 安装命令：npm install -g vue-cli 打开VScode的终端，调出命令输入框。点击终端-新建终端，输入上述命令，回车，等待安装完成。 3.安装webpack，它是打包js的工具 安装命令：npm install -g webpack 安装方法同上。 如果安装时出现下列情况： 点击这里查看解决方法 4.安装完成之后
vsCode搭建vue环境,（亲身经历，真实可靠）
qq_65255086的博客
02-02 779
6.我建议切换到D盘，尽量不要装在C盘，因为vue的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘。然后我们开始创建新的项目输入命令：vue init webpack my-vue 回车，my-vue是我自己的文件夹的名字，（建议项目名称不要大写不然会报错，听别人说的我没试过哈），输入之后就一直回车，直到出现‘’是否要安装vue-router‘’，这个我们在项目要用到，所以就输入y 回车就好。5.输入Vue - V,显示版本号表示安装成功。4.安装完后输入Vue，显示信息即可。
VSCode 常用插件推荐
全栈程序员小黑的博客
05-03 4196
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。适用于 VS Code 的中文（简体）语言包拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。
2022 VSCode+Vue3安装详细教程
热门推荐
菜鸟的专栏
11-18 1万+
2022 VSCode+Vue3安装详细教程
Vue别名配置简录（alias配置）
AlexGeek
02-18 3091
配置文件的路径：项目名/build/webpack.base.conf.js 相关函数：resolve function resolve (dir) { return path.join(__dirname, '..', dir) } 字段配置：alias alias: { 'vue$': 'vue/dist/vue.esm.js', 'src': resolve(...
前端开发部署：Visual Studio Code + vue
xingshanchang的博客
06-10 2197
本教程全部采用默认安装路径，因为在进行自定义路径安装的时候，需要配置各种环境变量，在这个配置过程中，可能出现各种很混乱的问题。 ==C:\Program Files\nodejs== 这里不勾选，后续需要什么tools的时候，再进行安装即可。 Win + R 打开 CMD 输入版本查看命令，查看安装是否成功 2 输入下面指令查看路径 webpack用来项目构建、打包、资源整合等。 注意这里安装新的脚手架。 出现warn没关系，继续执行即可。 查看vue版本及是否成功： 四 基于上述vue创
vscode怎么配置vue
最新发布
09-09
Visual Studio Code (VSCode) 配置 Vue.js 开发环境主要包括安装插件、设置工作区和项目配置。以下是简单的步骤： 1. **安装Vue插件**: - 打开VSCode，在扩展商店搜索"Vue"，找到官方推荐的 "Volar" 插件（适用于Vue 3+）以及 "vetur"（兼容Vue 2及低版本），点击安装。 2. **启用Vue支持**: - 安装完成后，重启VSCode，插件会自动加载并生效。在编辑器右侧的 Activity Bar 或者命令面板里输入 "Vue: Select Project" 来选择或创建一个新的Vue项目。 3. **设置工作区**: - 如果你的项目是通过`npm`或`yarn`管理依赖的，需要在根目录下创建一个 `package.json` 文件，并运行初始化命令如 `npm init` 或 `yarn create`. 确保`main`字段指向你的`src/main.js`或`src/App.vue`文件。 4. **配置`launch.json`**: - 在`~/.vscode`或`workspace`下的`launch.json`文件中，你可以配置调试Vue应用的启动配置。例如： ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Serve with Hot Module Replacement", "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js", "args": ["serve", "--hot"], "outFiles": [ "<rootDir>/dist/**/*.js" ], "restart": "auto" } ] } ``` 5. **代码提示和智能感知**: - Vetur插件提供了很好的Vue语法高亮和代码提示功能，你不需要额外配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值