- vscode常用插件:
prettier 代码格式化插件 可配置.prettierc.js文件,配合eslint、git hooks 一起使用,提升项目代码的规范性
HTML CSS Support 提示css属性 //antdesignpro用这个插件会卡死CPU占用率高
Beautify css/sass/scss/less 代码格式化
Npm Intellisense 依赖包提示
ESlint代码检查
Vscode Greate Icon 图标展示
JavaScript (ES6) code snippets 语法提示
Path Intellisense自动路径补全
Auto Rename Tag 修改html标签时首尾同时改
vscode icons /vscode greate icons
Path Intellisense 智能路径提示
stylient/stylient plus 语法检查css 排序优化
Turbo Console Log 快捷添加console.log 快捷键:ctrl alt l,注释所有console alt shift c
git lens git提交日志
- 常用设置:首选项-》用户设置
editor.tabCompletion on
editor.lineNumbers true
“editor.formatOnSave”: true,保存自动格式化
“files.autoSave”: “afterDelay”,自动保存
“emmet.triggerExpansionOnTab”: true,设置tab标签补全
“editor.codeActionsOnSave”: {
“source.organizeImports”: true, //保存时,自动调整 import 语句相关顺序,能够让你的 import 语句按照字母顺序进行排列
“source.fixAll”: true, //纠正语法错误
“source.fixAll.eslint”: true,
“source.fixAll.tslint”: true,
“source.fixAll.stylelint”: true
},
最新设置见文末
其他个人设置可在jsconfig.json里配置。 - 常用快捷键:
对于 行 的操作:
重开一行:光标在行尾的话,回车即可;不在行尾,ctrl + enter 向下重开一行;ctrl+shift + enter 则是在上一行重开一行
删除一行:光标没有选择内容时,ctrl + x 剪切一行;ctrl +shift + k 直接删除一行
移动一行:alt + ↑ 向上移动一行;alt + ↓ 向下移动一行
复制一行:shift + alt + ↓ 向下复制一行;shift + alt + ↑ 向上复制一行
ctrl + z 回退
对于 词 的操作:
选中一个词:ctrl + d
搜索或者替换:
cmd+ f :搜索
cmd + alt + f: 替换
cmd+ shift + f:在项目内搜索
cmd+P 快速打开最近打开的文件
cmd+Shift+N 打开新的编辑器窗口
cmd+Shift+W 关闭编辑器
Home 光标跳转到行头
End 光标跳转到行尾
cmd + Home 跳转到页头
cmd + End 跳转到页尾
cmd + Shift + [ 折叠区域代码
cmd + Shift + ] 展开区域代码
cmd+ / 添加关闭行注释
Shift + Alt +A 块区域注释
cmd+p 打开文件
cmd+b 打开侧边栏
cmd+\分区,多文件编辑
cmd+shift+\找到{ }函数结束/开始位置
cmd+i 选中一行
cmd+opt+F 打开文件中替换
cmd+F 文件查找
cmd+shift+F 文件夹查找
cmd+opt+up/down 多行编辑
opt+shift+up/down 复制一行
opt+up/down 移动到上一行
ctrl+tab标签之前切换
ctrl+` 打开控制台
cmd+shift+u git输出 - node断点调试
- mock数据:
mock 是基于 浏览器代理加node代理实现的。 本地start后自动启动一个端口为8989的proxy server。浏览器通过代理(我使用的是switchy omega)代理到8989的服务器,然后8989服务器读取本地proxy.config.js的配置完成转发。假设mock serverIP为3.23.1.1。
-
浏览器switchomega
添加情景模式
mock 端口为8989
添加域名通配符
条件设置为*XX.com 情景模式为mock -
设置proxy.config.js进行转发
module.exports = {
// Forward 到另一个服务器
“/hrmregister/(.)": “http://3.23.1.1:2016”,
“GET rlw”: “http://3.23.1.1:8000”,
};
可通过配置host将IP指向某域名:
host添加,命令行进入etc/hosts修改或者安装switch hosts进行修改 3.23.1.1 mock.XX.com
module.exports = {
// hrmregister开头的动态请求转发到mock server
"/hrmregister/(.)”: “http://mock.XX.com:2016”(存放动态文件),
“GET rlw”: “http://mock.XX.com:8000”(存放静态文件),
}; -
PS:可配置mock server 将测试接口的服务器地址改为mock server地址,即入3.23.1.1:2016。填入接口mock数据即可使用mock数据进行测试~~~
PS:提供代理服务的电脑系统或其它类型的网络终端称为代理服务器(英文:Proxy Server)
另:关于开发 线上环境请求url处理:https://my.oschina.net/wanjubang/blog/916105。代理模式线上环境不走proxy.config.js?
- 移动端调试工具 连接手机 输入chrome://inspect/,点击inspect进行调试即可
- charles
- 部署发布工具 shell 发布不直观,建议使用web管理工具比如pyledo
- 其它:nvm可切换node版本;JIRA是集项目计划、任务分配、需求管理、错误跟踪于一体的商业软件;
vscode设置:
{
“workbench.iconTheme”: “vscode-great-icons”,
“window.zoomLevel”: -1,
“extensions.ignoreRecommendations”: true,
“workbench.startupEditor”: “newUntitledFile”,
“emmet.triggerExpansionOnTab”: true,
“explorer.confirmDragAndDrop”: false,
“explorer.confirmDelete”: false,
“files.autoSave”: “afterDelay”,
“editor.formatOnSave”: true,
“editor.formatOnPaste”: true,
“vetur.format.defaultFormatter.js”: “vscode-typescript”,
“vetur.format.defaultFormatter.html”: “js-beautify-html”,
“vetur.format.defaultFormatterOptions”: {
“js-beautify-html”: {
“wrap_attributes”: “auto”
}
}
}
安装插件:
Auto Rename Tag //自动补全
Beautify css/sass/scss/less //格式化
GitLens — Git supercharged //git代码最近的commit和作者
HTML CSS Support //css提示(支持vue)
JavaScript (ES6) code snippets//ES6语法代码段
npm Intellisense //导入模块时,提示已安装模块名称
Path Intellisense //路径自动补全
Vetur //Vue语法高亮
Prettier - Code formatter //格式化
Settings Sync //同步配置插件信息
VSCode Great Icons//图标
REST client //本地请求发送
在VS Code新建一个以.http或者.rest 结尾的文件,填入你的HTTP请求,点击Send Request,或者右键选择Send Request,或者直接用快捷键 Ctrl+Alt+R ,你的REST API就执行了,然后API Response就会显示在右边区域。更方便的是,通过###分隔符,同一个HTTP文件里可以涵盖多个HTTP请求。不像Postman,不同的HTTP请求需要放在不同的tab里。
POST http://10.45.11.67:8700/rest/bizService/listPagination
content-type: application/json
Authorization: 626f2e3a-2bb2-4179-83a0-0524b759a446
{"pageNumber":1,"pageSize":20}
####
GET http://10.45.11.67:8700/security/rest/operator/getCurrentOperator?_hash=0.21774316768178514&
Authorization: 44d22273-facf-4684-b879-240dd3c1474d
{
"_hash":0.21774316768178514
}