本文摘自PHP中文网,作者尚,侵删。
需要插件: ESLint,Prettier - Code formatter,Vetur
打开用户设置文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | "editor.detectIndentation" : false,
"editor.tabSize" : 2,
"editor.formatOnSave" : true,
"javascript.format.insertSpaceBeforeFunctionParenthesis" : true,
"prettier.eslintIntegration" : true,
"prettier.semi" : false,
"prettier.singleQuote" : true,
"eslint.autoFixOnSave" : true,
"eslint.validate" : [
"javascript" ,
"javascriptreact" ,
{
"language" : "vue" ,
"autoFix" : true
}
],
"vetur.format.defaultFormatter.html" : "js-beautify-html" ,
"vetur.format.defaultFormatter.less" : "prettier" ,
"vetur.completion.autoImport" : true,
"vetur.format.defaultFormatter.js" : "vscode-typescript" ,
"vetur.format.defaultFormatterOptions" : {
"js-beautify-html" : {
"wrap_attributes" : "force-aligned"
}
},
|
保存代码自动按照eslint格式化。
断点调试 (需安装Debugger for Chrome)
1、在浏览器中展示源码 如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool 属性:
如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool 属性:
1 2 3 4 5 | module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
|
2、vscode中 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件,选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | {
"version" : "0.2.0" ,
"configurations" : [
{
"type" : "chrome" ,
"request" : "launch" ,
"name" : "vuejs: chrome" ,
"url" : "http://localhost:8080" ,
"webRoot" : "${workspaceFolder}/src" ,
"breakOnLoad" : true ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : "${webRoot}/*"
}
},
{
"type" : "firefox" ,
"request" : "launch" ,
"name" : "vuejs: firefox" ,
"url" : "http://localhost:8080" ,
"webRoot" : "${workspaceFolder}/src" ,
"pathMappings" : [{ "url" : "webpack:///src/" , "path" : "${webRoot}/" }]
}
]
}
|
推荐教程:vscode教程
以上就是vscode怎么支持vue的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
离线启动vsCode的方法
分享10款高效的vsCode插件,总有一款能够惊艳到你!!
vsCode怎么下载64位
在vsCode中如何调出终端
vsCode怎么创建css文件
分享一些vsCode开发常用插件
vsCode怎么复制一行代码
vsCode怎么生成模板
vsCode如何配置插件
vsCode支持php函数跳转的方法
更多相关阅读请进入《vsCode》频道 >>
转载请注明出处:木庄网络博客 » vscode怎么支持vue