vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）
File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
方法1：File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
Setting.json
方法2：File - Preference - 搜索框输入：files.autoSave
之后能看到 files.autoSave 的可选项有
off : 关闭自动保存（默认）
afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；
onFocusChange: 编辑器失去焦点时自动保存；
onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；
安装 ESLint
vscode 中安装 ESLint 插件
然后配置 vscode 的 setting.json
File - Preference - User Snippers
vue.json文件，然后添加下面模板
然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置
如果你的Setting.json文件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。
files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。
vue 的开发中 vscode 可装用于开发规范的插件有
Prettier ：规范js
ESLint: 规范js
Vuter: 规范 .vue 文件中 template
stylus: 规范 stylus
注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。
或者：
其中：
4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号
根目录下创建eslint规则文件 .eslintrc.js
（下面browsers 多了s 正确的为 browser ）
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 实例打开 ，你的断点现在应该被命中了。
vsCode中编写vue项目时，webpack配置的alias别名无效
1、vsCode工具配置（settings.json文件配置所有项目可用）
解决方案一：
在插件市场中安装Path Intellisense插件并启用。根据以下提示信息，修改vsCode配置文件settings.json文件：
解决方案二：
在插件市场中安装Path Autocomplete插件并启用。根据以下提示信息，修改vsCode配置文件settings.json文件：
2、项目配置
如项目需要单独配置，可根据以下提示信息。在项目根目录中添加jsconfig.json或tsconfig.json文件：
具体配置如下：
{
"compilerOptions": {
// 项目根路径
"baseUrl": "./",
// 别名映射路径
"paths":{
"@/*": ["src/*"],
"store/*": ["src/store/modules/*"]
}
},
// 编译时排除以下目录文件使用配置规则
"exclude": [
"node_modules",
"dist"
],
// 编译时包含以下目录文件使用配置规则
"include": [
"./src/**/*.vue"
]
}
结语：vsCode工具配置别名时推荐使用第二种方案（因为第一种不太好用）
在 VS Code 中调试vue项目
1.VS Code 中安装Debugger for Chrome扩展的最新版本：
2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：
3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：
4.在vue项目的文件中设置断点
5.启动vue项目：
6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。
7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉vscode的断点处。
遇到的问题：
官网中的launch.json配置中"url": " "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。
参考：
在 VS Code 中调试：
vscode为啥重复引入vue组件
vscode本身是一个源代码编辑器，本身并不具备运行前端应用的功能。
正确的做法是：
首先用本地git客户端将vue项目从github克隆到本地，用vscode打开，完成编辑。
然后在vscode里新打开一个命令行终端，在终端窗口里使用vue对应的脚手架命令启动项目。
注意，这种方式只适用于vue项目开发流程。
vscode中配置@路径提示
在使用vscode开发Vue项目的过程中，经常会使用各种路径，当你想找到src目录下的某个文件的时候，通常会用../进行定位，通过配置@路径提示后，@/就代表是src目录下了，使用起来非常方便。
具体配置如下：
安装插件：Path Intellisense
在setting.json中添加配置（此时注意要开发哪个项目就打开哪个项目，否则很有可能不生效）：
