工欲善其事必先利其器 vsode常用设置

  1. 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断点调试
  1. 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?

  1. 移动端调试工具 连接手机 输入chrome://inspect/,点击inspect进行调试即可
  2. charles
  3. 部署发布工具 shell 发布不直观,建议使用web管理工具比如pyledo
  4. 其它: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
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值