发表常用工具

IDE 小结

在日常开发中，时常会碰到各种各样的坑，本文总结了开发过程中碰到的常见问题。

VSCode

插件篇

shalldie.background

安装完成后，在setting.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
25
{
  "background.enabled": true, // 开关
  // 设置全屏背景图片
  // "background.fullscreen": {
      //   "image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Ff603918fa0ec08fa55410a5859ee3d6d54fbda8f&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670039224&t=f44f8815ca858834b87a534df461a6e1", // 图片的url
  //   "opacity": 0.88, // 建议值 0.85 ~ 0.95
  //   "size": "cover", // css, 建议使用 `cover`自适应，或者 `contain`、`200px 200px`
  // },
  // 自定义图片及样式
  // "background.useDefault": false, // 是否使用默认图片
  // "background.customImages": [
  //   "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Ff603918fa0ec08fa55410a5859ee3d6d54fbda8f&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670039224&t=f44f8815ca858834b87a534df461a6e1"
  // ],
  "background.style": {
    // "content": "''",
    // "pointer-events": "none",
    // "position": "absolute",
    // "z-index": "99999",
    // "width": "100%",
    "background-position": "98% 100%",
    // "background-repeat": "no-repeat",
    // "background-size": "36vw",
    "opacity": 0.4
  }
}

WS

css 预编译配置

以 scss 为例：

1
npm install sass -g

在 Setting -> Tools -> File Watchers 进行如下配置：

  1. Program：C:\Users\yuce\AppData\Roaming\npm\sass.cmd
  2. Arguments：$FileName$:$FileNameWithoutExtension$.css
  3. Output：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

sourcemap: 在生产环境中，以 scss 为例，我希望看到的未经编译文件的调试信息，而非编译后的，这样会方便开发人员调试，快速定位问题，生成的 source map, 同时需要在 chrome 中开启才能生效。

nodejs 环境配置

打开 setting 搜索 node.js
配置 Node interpreter
勾选 code assistance for node.js

![ws配置nodejs环境](/img/images/nodejs.png)

最后重启 ws 即可。

WS 优化

exclude项目中不用的文件

进入Settings->Project->Directories，把用不到的文件目录都Excluded（选中该文件目录，右击鼠标，点Excluded）
进入Settings->Editor->File Types，在最下面的Ignore files and folders中加入要ignore的文件或文件夹
在project窗口的文件夹上，右击鼠标，点击Mark Directory As->Excluded

优化代码检查

进入Settings->Editor->Inspections，把用不到的检查都关掉
进入Settings->Editor->General，把最下面的Error highlighting->Autoreparse delay(ms) 改成比较大的值（如20000)

去掉平时用不到的插件

进入Settings->Plugins，去掉平常用不到的插件，在一定程度上会提高软件打开时的加载速度。

优化typescript编译

进入Settings->Languages & Frameworks->Typescript，取消Track changes

优化文件保存

可以取消自动保存功能（建议保留该功能！）：

进入Settings->Apparence & Behavior->Synchronization，取消 Synchronize file on frame deactivation 和 Save files automatically 的选择。

清除缓存

项目久了之后可以清除缓存：点击File -> Invalidate Caches / Restart

常用快捷键

搜索类

快捷键 说明
Alt + f7 查找实例
Ctrl + f7 在文件中查找实例
Ctrl + Shift + f7 在文件中高亮实例
Ctrl + Alt + F7 显示实例

编辑类

快捷键 说明
Ctrl + Space 基本代码完成 （任何类、 方法或变量名称）
Alt + Enter 展示意图动作和快速修复
Ctrl + P 显示调用方法内参数信息
Ctrl + Q 快速记录查找
Ctrl + mouse 放在代码上面-显示简短的代码信息
Ctrl + F1 在插入符号显示错误或警告的说明
Alt + Insert 生成代码
Ctrl + Alt + T 快速生成（if..else, try..catch, for, etc.）等
Ctrl + J 插入Live模板
Ctrl + / 行注释与取消行注释
Ctrl + Shift + / 块注释与取消块注释
Ctrl + W 增加选择中代码块
Ctrl + Shift + W 减少当前所选内容代码块
Alt + Q 上下文信息
Ctrl + Alt + L 格式化代码
Ctrl + Alt + I 自动缩进的行数
Tab / Shift + Tab 缩进/取消缩进选定的行
Ctrl + X , Shift + Delete 剪切到剪贴板的当前行或者所选代码块
Ctrl + C Ctrl + 插入复制当前行或者所选代码块到剪贴板
Ctrl + V Shift + 从剪贴板插入粘贴
Ctrl + Shift + V 最近缓冲区粘贴
Ctrl + D 复制当前行或者所选代码块
Ctrl + Y 删除行
Ctrl + Shift + J 加入行
Ctrl + enter 拆分行
shift + Enter 重新开始一行（无论光标在哪个位置）
Ctrl + Shift + U 切换选中词或所选代码块的大小写
Ctrl + Shift +] 选中直到代码块的开始
Ctrl + Shift +[ 选择直到代码块的结束
Ctrl + Delete 删除光标右侧的词
Ctrl + backspace 删除光标左侧的词
Ctrl + NumPad+ 展开代码块
Ctrl + NumPad- 折叠代码块
Ctrl + Shift + NumPad+ 展开所有代码块
Ctrl + Shift + NumPad- 折叠所有代码块

同时编辑多行

快捷键 说明
Ctrl + F4 关闭当前标签页
Alt + Click 同时选中多行，同时编辑
Shift + Ctrl + Alt + J 选择所有当前选中的词
Alt + J 选择下一个相同的词

运行类

快捷键 说明
Alt + Shift + J 取消所有选中的词
Esc 取消选择所有选中的词或插入符号
Alt + Shift + F10/F9 选择配置和运行/调试
Shift + F10/F9 运行/调试

调试类

快捷键 说明
Ctrl + Shift + F10/F9 运行/调试上下文配置从编辑器
Alt + Shift + R 重新运行测试
F8 不进入函数
F7 单步执行
Shift + F7 只能单步执行
Shift + F8 跳出
Alt + F9 运行到光标处
Alt + F8 计算表达式的值
F9 重新开始

导航类

快捷键 说明
Ctrl + f8 切换断点
Ctrl + Shift + F8 查看断点
Ctrl + N 跳转到指定类
Ctrl + Shift + N 通过文件名快速查找工程内的文件
Ctrl + Alt + Shift + N 通过一个字符查找函数位置
Alt + Right 进入下一个编辑器选项
Alt + Left 进入上一个编辑器选项
f12 进入上一个工具窗口
esc 从工具窗口进入编辑器
Shift + Esc 隐藏活动窗口
Ctrl + Shift + F4 关闭活动运行/消息/查找/选项卡
Ctrl + G 跳转到指定行
Ctrl + E 弹出最近打开的文件列表
Ctrl + Alt + Left 导航前进
Ctrl + Alt + Right 导航回退
Ctrl + Shift +Backspace 定位到最近编辑窗口
Alt + F1 查找当前选中的代码或文件在其他界面模块的位置
Ctrl + B/Click 跳转到定义处
Ctrl + 单击 转到声明
Ctrl + Alt + B 跳转方法实现处
Ctrl + Shift + I 打开定义快速查找
Ctrl + Shift + B 跳转方法定义处
Ctrl + U 转到超级方法/超级类
Alt + Up/Down 在方法间快速移动定位
Ctrl +]/[ 移动到代码块结束/启动
Ctrl + f12 弹出文件结构
Ctrl + H 类型层次结构
Ctrl + Alt + H 调用层次结构
F2/Shift + F2 跳转到后一个/前一个错误，在出错的语句之间进行跳转。
F4/Ctrl + Enter 编辑源代码/查看源代码
Alt + home 显示导航栏
F11 切换标记
Ctrl + F11 采用记忆切换标记

搜索/替换

快捷键 说明
Ctrl + T 从VCS更新项目
Alt + Shift + C 查看最近的更改
Ctrl + F 查找
F3 查找下一个
Shift + F3 查找上一个
Ctrl + R 替换

重构类

快捷键 说明
Ctrl + Shift + F 在路径中找到
Ctrl + Shift + R 替换路径中的查找
F5 拷贝当前文件
F6 移动当前文件
Alt + delete 安全删除
Shift + F6 重命名
Ctrl + Alt + N 嵌入变量
Ctrl + Alt + M 提取函数
Ctrl + Alt + V 引入变量
Ctrl + Alt + C 引入常量

常规类

快捷键 说明
Ctrl + Alt + P 引入参数
Ctrl + F6 改变方法名
Ctrl + Shift +a 查找当前
双击shift 查找所有的（包括文件、命令等）
Alt + #[0-9] 打开相应的工具窗口
Ctrl + Shift + f12 键切换最大化编辑器
Alt + Shift + F 将添加到收藏夹
Alt + Shift + I 检查当前文件与当前配置文件
Ctrl + 反引号 (‘) 快速切换当前计划
Ctrl + Alt + S 打开设置
Ctrl + Tab 切换选项卡和工具窗口

IDE 小结

https://yc609.cn/2018/10/26/IDE小结/

作者

晓策

发布于

2018-10-26

更新于

2023-05-25

许可协议

#

评论

分类

最新文章

归档

标签

Cross-Domain1
Git1
GitHub1
Grunt1
HTML/CSS1
Hexo2
IDE1
JavaScript7
Markdown1
React1
React Native1
Vue2
Webapck1
better-scroll1
canvas1
css1
location2
npm1
sass1
yarn1
小程序1
组件库1
×