背景:公司使用前后端分离技术,前端使用vue,在跳转时明显体验更好,传统网页,容易出现空白页,公司采用cs code开发,
这块记录下一份公司要求的基础设置,主要是为了代码规范,同时提高效率,这个文档可以帮助你熟悉vs的使用
1)安装vue插件vetur,实现支持vue文件的代码高亮,在插件窗口中(快捷键是ctrl+shift+x)输入vetur点击安装插件就行
2)ESLint 插件
点击设置
搜索prettier
将js.ts设置为prettier-eslint
Setting.json中添加以下配置
//打开文件不覆盖
"workbench.editor.enablePreview": false,
//关闭快速预览
"editor.minimap.enabled": false,
//打开自动保存
"files.autoSave": "afterDelay",
// 头部注释
"fileheader.customMade": {
"Author": "yhy",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
"LastEditors": "yhy", // 设置后,保存文件更改默认更新最后编辑人
"Description": ""
},
// 函数注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
//手机项目rem适配
"px-to-rem.px-per-rem": 100,
// -----------------------自动格式化配置eslint+prettier-----------------------
// 每次保存自动格式化ctrl+s
"editor.formatOnSave": true,
// 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
3)Auto Close Tag 自动闭合HTML/XML标签
4)Auto Rename Tag 自动完成另一侧标签的同步修改
5)Debugger for Chrome 映射VSCode上的断点到chrome上,方便调试
6)语言的修改
Ctrl+Shift+P ,切入到命令行模式,输入“Configure Language”,然后点击下拉框出来的 Configure Display Language,下载新的语言包