vscode 开发Vue项目的方法步骤
下载地址：
vscodehttps://marketplace.visualstudio.com/VSCode或者本地地址：https://www.nhooo.com/softs/606746.html
开始安装插件
- Vetur:vue的文件代码高亮
- AtomOneDarkTheme：好看的代码颜色主题
- Simpleicontheme：清爽文件夹主题
- Prettier-code:代码格式化
- ESLint：代码规范检查
- DebuggerforChrome：断点调试
配置ESLint
打开用户设置文件
//vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation":false,
//重新设定tabsize
"editor.tabSize":2,
//#每次保存的时候自动格式化
"editor.formatOnSave":true,
//#每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave":true,
//添加vue支持
"eslint.validate":[
"javascript",
"javascriptreact",
{
"language":"vue",
"autoFix":true
}
],
//#让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration":true,
//#去掉代码结尾的分号
"prettier.semi":false,
//#使用带引号替代双引号
"prettier.singleQuote":true,
//#让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis":true,
//#这个按用户自身习惯选择
"vetur.format.defaultFormatter.html":"js-beautify-html",
//#让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js":"vscode-typescript",
"vetur.format.defaultFormatterOptions":{
"js-beautify-html":{
"wrap_attributes":"force-aligned"
//#vue组件中html代码格式化样式
}
}
保存代码自动按照eslint格式化，一应俱全
断点调试
官网推荐https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
1、在浏览器中展示源码
如果你使用的是VueCLI2，请设置并更新config/index.js内的devtool属性：
devtool:'source-map',
如果你使用的是VueCLI3，请设置并更新vue.config.js内的devtool属性：
module.exports={
configureWebpack:{
devtool:'source-map'
}
}
2、在vscode中
点击在ActivityBar里的Debugger图标来到Debug视图，然后点击那个齿轮图标来配置一个launch.json的文件，选择Chrome/Firefox:Launch环境。然后将生成的launch.json的内容替换成为相应的配置：
{
"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}/"}]
}
]
}
然后就去使用吧，希望对大家的学习有所帮助，也希望大家多多支持毛票票。