vscode怎么运行vue代码?

发布网友 发布时间：2024-09-25 17:28

我来回答

共1个回答

热心网友 时间：2024-11-22 00:45

先决条件

你必须安装好Chrome和VSCode。同时请确保自己在VSCode中安装了DebuggerforChrome扩展的最新版本。

在可以从VSCode调试你的Vue组件之前，你需要更新webpack配置以构建sourcemap。做了这件事之后，我们的调试器就耐笑逗有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被webpack优化过了也没关系。

打开config/index.js并找到devtool属性。将其更新为：

如果使用vue-cli3你需要设置vue.config.js内的devtool属性：

进入Debugger视图，添加Chrome配置，将内容替换成以下内昌卖容

设置断点

此处response返回数据

启动调试

在终端使用如下命令开启这个应用

进入Debug视图，选择‘vuejs:chrome’配置，然后按升尺F5或点击绿色的play按钮

随着一个新的Chrome实例打开，你的断点现在应该被命中了。

在VSCode中调试vue项目

1.VSCode中安装DebuggerforChrome扩展的最新版本：

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

3.点击运行调试按滑粗做钮，再点击设置按钮，修改launch.json文件，配置如下：

4.在vue项目的文件中设置断点

5.启动vue项目：

6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉凳灶vscode的断点处。

遇到的问题：信衡

官网中的launch.json配置中"url":""，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：

在VSCode中调试：

1、通过快捷方式打开VisualStudioCode工具，然后新建静态页面。

2、创建一个静态页面table.html，并添加页面代码，然后保存，使用浏览器查看。

3、点击File菜单，选择OpenFolder，将项目导入到VisualStudioCode。

4、导入进去后，查看项目所依赖的包是否安装，项目配置文件。

5、新建一个终端窗口，在命令行输入npmrundev运行项目。

6、再点击File，然后新建一个TypeScript文件ct.ts，添加对应的代码。

7、好知打开凯袜如一个终端窗口，查看是否安装TypeScript插件盯启，利用tsc命令运行文件。

找到vscode安装目录。右键-属漏悄性-兼容性-勾选以管理员身份运行即可。在vscode运行vue输入npminstall时没权限找到vscode安装目录。右键-属性-兼容性-勾选以管理员身份运闹扒行即可。权限是指为了保证功能的有效执行，用户必须具备液搜昌的，对文件进行处理的范围和程度。

先来扒一扒使用PHPStorm遇到的问题：

vue文件虽然可以通过插件来解决高亮问题，但是script标签中的ES6代码的识别老是出问题，箭头函数有的时候能正确识别，有的时候会报错

无法正确识别vue文件中的jsx语法

无法正确识别和高亮vue文件style标签中使用的less语法

vue文件中template部分使用了大量的自定义标乱裂签（自定义组件）和自定义属性，会报一堆warning

经常性卡死

webpack实时编译的错误不能直接展示在代码编辑器内，还得自己到控制台中查看

如何安装vscode

很简单，传送门：官网下载安装

第一步，要支持vue文件的基本语法高亮

这里，我试过好3个插件：vue,VueHelper和vetur，最终选择使用vetur。

安装插件：Ctrl+P然后输入extinstallvetur然后回车点安装即可。

p.s:vscode的插件安装比PHPStorm的插件安装更快捷方便，安装完成后还不用重启整个程序，只要重新加载下工作区窗口就可以了。

安装完vetur后还需要加上这样一段配置下：

"emmet.syntaxProfiles":{

"vue-html":"html",

"vue":"html"

}

这时可以打开一个vue文件试试，注意下右下角状态栏是否正确识别为vue类型：

如差尘果被识别为text或html，则记得要点击切换下。

第二步，要支持vue文件的ESLint

可能还有人会问为什么要ESLint？没有lint的代码虽然也可能可以正确运行，但是lint作为编译前的一道检测成本更小，而且更快。此外，ESLint还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。

jshint本来也是个不错的选择，但是ESLint对jsx的支持让我还是选择了ESLint.

安装插件：Ctrl+P然后输入extinstalleslint然后回车点安装即可。

ESLint不是安装后就可以用的，还需要一些环境和配置：

首先，需要全局的ESLint,如果没有安装可以使用npminstall-geslint来安装。

其次，vue文件是类HTML的文件，为了支持对vue文件的ESLint，需要eslint-plugin-html这个插件。可以使用npminstall-geslint-plugin-html来安装

接着，安装了HTML插件后，还需要在vscode中配置下ESLint：

"eslint.validate":[

"javascript",

"javascriptreact",

"html",

"vue"

],

"eslint.options":{

"plugins":["html"]

},

最后，别忘了在项目根目录下创建.eslintrc.json,如果还没创建，还可以使用下面快捷命令来创建：

这样一来vue中写的js代码也能正确地被lint了。

要是不小心少个括号之类的都可以有对应的报错:

多余import也都能报错:

还是蛮智能的。

第三步，配置构建任务

vue项目的构建我选择用webpack，不过，并不是直接使用命令行下的webpack而是使用了webpack的API写的node脚本。脚本主要有两个，一个是build/bin/build.js另一个是build/bin/watch.js分别是单次构建和实时构建。

于是乎，对应vscode中的tasks也是有两个：build和watch，简单配置如下：

{

//哗庆闭See

//forthedocumentationaboutthetasks.jsonformat

//use`Ctrl+P`andtype`task`+SPACE+taskNametorunatask

"version":"0.1.0",

"tasks":[

{

"taskName":"build",

"echoCommand":true,

"command":"node",

"args":[

"build/bin/build.js"

],

"suppressTaskName":true,

"isBuildCommand":true

},

{

"taskName":"watch",

"echoCommand":true,

"command":"node",

"args":[

"build/bin/watch.js"

],

"suppressTaskName":true,

"isBackground":true

}

]

}

这样配置好后，按Ctrl+Shift+B即可开始单次构建。不过单次构建比较慢（要10秒+），一般我都用实时构建：Ctrl+P然后输入taskwatch回车即可开始实时构建。实时构建除了第一次比较慢，其他时候还是非常快的，一般1秒内就可以构建好。

最后，webpack构建错误提示

webpack构建失败后一般都会有错误提示，会显示在输出窗口中：

为啥是彩色的？因为装了OutputColorizer这个插件。

当然，这样还是不够方便--实时构建是后台运行的，“输出”窗口一般也都是在后台，每次保存完文件还得点开岂不麻烦。

要是能做到像ESLint一样直接把错误标到编辑器上面就好了。真的可以吗？翻了下vscode的文档，发现有神奇的problemMatcher--可以对任务输出进行解析，解析出的问题会显示在“问题”窗口中，如果还有文件名行号和列号，则会在源代码编辑窗口中对应的位置标出来。

先放个最终效果：

在这个文件的第32行，import了一个不存在的模块，这样的错误在ESLint中当然是检查不出来的，然而在webpack的实时构建中会报错：

这个事情的困难在于两点：

如何通过problemMatcher把这个错误给抓出来？

如何找到错误对应的行号？（如果可能的话，还有列号）

webpack的错误输出格式并不是完全统一的，而且有些还没有行号--一方面可能是webpack的bug，另一方面vue文件在构建的时候会拆成template,script和style三个方面进行构建，报错的行号可能对不上。

最终我的解决方案是对webpack的错误重新格式化输出，然后匹配：

首先，重新格式化输出需要format-webpack-stats-errors-warnings这个包（偶新写的）

npminstall--save-devformat-webpack-stats-errors-warnings

然后，到build/bin/build.js和build/bin/watch.js中在webpack构建完成的回调函数中增加这个格式化后的输出：

更多使用介绍见github

最后，在.vscode/tasks.json中，每个任务下添加problemWatcher:

//...

{

"taskName":"build",

//...

//build任务的:

"problemMatcher":{

"owner":"webpack",

"fileLocation":[

"relative",

"${workspaceRoot}"

],

"pattern":{

"regexp":"^!(\\w+):(\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?:(.*)$",

"severity":1,

"file":2,

"line":3,

"column":4,

"endLine":5,

"endColumn":6,

"message":7

}

}

}

{

"taskName":"watch",

//...

//watch任务的：

"problemMatcher":{

"owner":"webpack",

"fileLocation":[

"relative",

"${workspaceRoot}"

],

"pattern":{

"regexp":"^!(\\w+):(\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?:(.*)$",

"severity":1,

"file":2,

"line":3,

"column":4,

"endLine":5,

"endColumn":6,

"message":7

},

"watching":{

"activeOnStart":true,

"beginsPattern":"^\\s*Webpackbeginrun",

"endsPattern":"^\\s*Buildcompleteat"

}

}

//...

}

//...

注：在watch任务中，为了匹配何时开始和何时结束，我在webpack构建的run和watch时增加了一个console.log('Webpackbeginrun')的打印，而在构建完成后增加了一个console.log("Buildcompleteat..")的打印。