vscode怎么运行代码
1、通过快捷方式打开Visual Studio Code工具，然后新建静态页面。
2、创建一个静态页面table.html，并添加页面代码，然后保存，使用浏览器查看。
3、点击File菜单，选择Open Folder，将项目导入到Visual Studio Code。
4、导入进去后，查看项目所依赖的包是否安装，项目配置文件。
5、新建一个终端窗口，在命令行输入npm run dev运行项目。
6、再点击File，然后新建一个TypeScript文件ct.ts，添加对应的代码。
7、打开一个终端窗口，查看是否安装TypeScript插件，利用tsc命令运行文件。
vscode调试Vue提示：crbug/1173575, non-JS module files deprecated.
参考其他的博客使用如下命令，但是不起作用。
使用npm 其他命令则可以成功运行，命令如下
运行成功之后显示如下，之后就可以正常在chrome中调试。
我用新建项目测试时，npm run serve 之后也会提示crbug/1173575, non-JS module files 。这个暂时不清楚是什么原因。但是过了一会之后，关闭终端，之后打开重新执行该命令却又好了。这个有时间才查具体原因吧。。。留个问题。
一、npm run 背后的操作
npm run serve，执行该命令实际是执行package.json 的script中key为serve后面的值。所以执行哪个命令，是由package.json中的key 决定的。
如何优雅地使用 VSCode 来编辑 vue 文件
先来扒一扒使用 PHPStorm 遇到的问题：
vue文件虽然可以通过插件来解决高亮问题，但是 script 标签中的 ES6 代码的识别老是出问题，箭头函数有的时候能正确识别，有的时候会报错
无法正确识别 vue 文件中的 jsx 语法
无法正确识别和高亮 vue 文件 style 标签中使用的 less 语法
vue文件中 template 部分使用了大量的自定义标签（自定义组件）和自定义属性，会报一堆 warning
经常性卡死
webpack实时编译的错误不能直接展示在代码编辑器内，还得自己到控制台中查看
如何安装 vscode
很简单，传送门： 官网下载安装
第一步，要支持 vue 文件的基本语法高亮
这里，我试过好3个插件： vue , VueHelper 和 vetur ，最终选择使用 vetur 。
安装插件： Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。
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 然后输入 ext install eslint 然后回车点安装即可。
ESLint 不是安装后就可以用的，还需要一些环境和配置：
首先，需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。
其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-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
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + taskName to run a task
"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 然后输入 task watch 回车 即可开始实时构建。实时构建除了第一次比较慢，其他时候还是非常快的，一般1秒内就可以构建好。
最后，webpack 构建错误提示
webpack 构建失败后一般都会有错误提示，会显示在输出窗口中：
为啥是彩色的？ 因为装了 Output Colorizer 这个插件。
当然，这样还是不够方便 -- 实时构建是后台运行的，“输出”窗口一般也都是在后台，每次保存完文件还得点开岂不麻烦。
要是能做到像 ESLint 一样直接把错误标到编辑器上面就好了。真的可以吗？翻了下 vscode 的文档，发现有神奇的 problemMatcher -- 可以对任务输出进行解析，解析出的问题会显示在“问题”窗口中，如果还有文件名行号和列号，则会在源代码编辑窗口中对应的位置标出来。
先放个最终效果：
在这个文件的第32行，import 了一个不存在的模块，这样的错误在 ESLint 中当然是检查不出来的，然而在 webpack 的实时构建中会报错：
这个事情的困难在于两点：
如何通过 problemMatcher 把这个错误给抓出来？
如何找到错误对应的行号？（如果可能的话，还有列号）
webpack的错误输出格式并不是完全统一的，而且有些还没有行号 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在构建的时候会拆成 template, script 和 style 三个方面进行构建，报错的行号可能对不上。
最终我的解决方案是对 webpack 的错误重新格式化输出，然后匹配：
首先，重新格式化输出需要 format-webpack-stats-errors-warnings 这个包（偶新写的）
npm install --save-dev format-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*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
注：在 watch 任务中，为了匹配何时开始和何时结束，我在 webpack 构建的 run 和 watch 时增加了一个 console.log('Webpack begin run') 的打印，而在构建完成后增加了一个 console.log("Build complete at ..") 的打印。
vscode导入vue组件重复
打开vscode-------文件---------打开文件夹---------选择工程文件夹--------确定查看----终端或者使用“Ctrl+~”调出终端从终端中输入命令进入程序目录，输入npminstall安装vue插件初始化项目，完成后执行npmrundev启动项目，就可以在浏览器中打开页面了，在终端ctrl+c来停止运行。
isualStudioCode（简称“VSCode”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于MacOSX、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。
在VScode中npm，cnpm，vue提示无法识别
先是两张报错的信息
原本是提示 vue无法识别，但是通过一顿自己都忘记了的操作之后变成了缺少组件，但是后面的方法对无法识别是适用的
图二的解决方案网上提供的方法有两种
一种是通过终端输入 npm/cnpm install commander 对缺少的组件安装
另一种是通过终端输入 vue init webpack 进行初始化
如果两种方法都不行，就是跟第一种情况一样是路径的问题了
然而，路径问题也要注意有两个
首先是去我们的环境变量的 Path 里查看我们的路径是不是对应 nodejs 安装时选择的路径，如果没有就加上去
这是网上提供的第一个方法，只要是路径设置好了，基本上是可以使用的。但是如果进到 VS Code 之后发现 npm 指令不能使用，那么就要通过设置 VS Code 的兼容性来解决
通过上面几个步骤基本上就可以解决 VS Code 不能使用 node、npm 的问题
接下来就是 cnpm、vue-cli 等全局安装之后无法使用的问题
全局安装cnpm： npm install -g cnpm --registry==
全局安装vue-cli： cnpm/npm install -g vue-cli
顺序执行了两个指令之后，使用 cnpm 安装 vue脚手架，提示 cnpm 无法识别，就算使用 npm 安装 vue-cli 成功之后，输入 vue 指令也会提示无法识别（黑人问号问号问号问号...）
于是观察一下安装过程，在进行全局安装 vue脚手架以及在安装 cnpm 的时候很容易会发现一个路径，这个就是你安装的一个路径，相信有人会跟我一样，安装的路径和 nodejs 的安装路径不一致
注意：这个是安装 vue-cli（脚手架）出现的提示信息，是已经安装成功的，但是我在使用的时候提示不是内部或外部指令。cnpm安装的时候也会有类似的显眼的路径信息，这里就不放出来，自己注意找一下就行
解决方法
通过终端输入 npm config ls 查看配置信息
prefix 是安装路径，这个时候会发现这个路径并不是你安装 nodejs 的路径，所以我们需要修改这个安装路径
终端输入 npm config set prefix ( nodejs 的安装路径)
再次终端输入 npm config ls 查看配置信息，就修改成功了
最后再重新进行全局安装 cnpm 和 vue-cli 就可以进行使用了
总结起来就是：
1、环境变量中 Path 中的路经检查是否正确，如果没有就添加上去
2、若1满足，则对 VS Code 兼容性进行修改
3、cnpm 或 vue 还是不能使用的话，考虑安装路径问题，终端输入 npm config ls 进行配置信息查看，检查是否正确。若不正确，终端输入 npm config set prefix ( nodejs 的安装路径) 进行修改；若正确，emmmmmmmmmmm，那就说明这篇笔记不是很适合你的错误哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
好嘞，记录完毕【伸懒腰】
VSCode调试vue项目
先决条件
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
打开 config/index.js 并找到 devtool 属性。将其更新为：
如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：
进入Debugger视图，添加Chrome配置，将内容替换成以下内容
设置断点
此处response返回数据
启动调试
在终端使用如下命令开启这个应用
进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮
随着一个新的 Chrome 实例打开 ，你的断点现在应该被命中了。
