VIM

编辑模式
a：在光标后插入
A：在当前行之后插入
i：在光标前插入
I：在当前行之前插入
o：在当前行之下插入
O：在当前行之上插入

粘贴复制
y：复制当前选中内容
yy：复制当前行
x：剪切当前选中内容
p ：在下一行粘贴
P：在上一行粘贴

移动光标
j 向下
k 向上
h 向左
l 向右
w 下一个字母的首字符
b 上一个字母的首字符
g 跳到文件头
G 跳到文件尾
gg 跳到文件开头
行号+G 跳转到指定行(例如:10G,跳转到第10行)
0 数字0，跳到一行开始
shift+4 跳到行尾
shift+6 跳到行首
o 下面插入一行
O 上面插入一行

选中功能
v+w 打开选中模式，并向后移动一个单词
v+b 打开选中模型，并向前移动一个单词
v+i+w 打开选中模式，并选中当前单词

x 删除当前光标下的字符
dw 删除光标之后的单词剩余部分。
d$ 删除光标之后的该行剩余部分。
dd 删除当前行

image.png

IDEA

快捷键
1，窗口搜索
CMD + n：自动getter/setter，Contructor… (输入首字母可以筛选)
CMD + f：查找
CMD + r：替换
CMD + [：跳转回原来的地方（也可以Ctrl+e，列出的第一个文件就是）
CMD + shift + f：在项目中按关键字搜索
CMD + shift + r：在项目中全局替换
shift + shift：全局搜索
CMD + o：在项目中搜索类
CMD + shift + o：在项目中按文件名搜索
CMD + shift + a：按功能搜索 #如果你记不住快捷键，试试这个！

2，代码编辑
OPT + 左：上一个单词
OPT + 右：下一个单词
CMD + 左：跳到行尾
CMD + 右：调到行首
OPT + shift + 上：移动当前行到下面一行
OPT + shift + 下：移动当前行到上面一行
CMD + shift + 上：移动当前函数到上一个函数
CMD + shift + 下：移动当前函数到下一个函数
CMD + D：复制当前行并插入到下一行中
OPT + 回车：智能添加局部变量/智能创建方法声明
shift + 回车：智能换行
shift + 回车 + CMD：智能添加分号/换行
shift + f6：重命名变量
Ctrl + G：多选同一个单词
Ctrl + N：下一行
OPT + CMD + b：跳转到方法实现处
OPT + CMD + L：格式化文档

3，调试与运行
Ctrl + shift + R：运行当前函数
Ctrl + R：运行当前项目
Ctrl + shift + D：调试当前函数
Ctrl + D：调试当前项目
CMD + F2：停止项目运行
F8：单步运行
F9：恢复运行至下一个断点

4，代码快速定位
CMD + e：列出最近访问过的文件 （再次CMD+e会列出最近修改过的文件）
Ctrl + shift + 1~9：设置书签
Ctrl + 1~9：访问书签
CMD + F3：显示所有书签

Live Template
psvm => public static void main(String[] args){}
sout => System.out.println()
psfs => public static final String
fori => for循环
itli => List迭代

自定义Live Template
第一步：shift + command + a 打开功能搜索框
第二步：输入live template，在下拉列表中选择Live Templates
第三步：点击弹出框右边的“+”，选择“Template Group”，并输入“custom”
第四步：选中新建的”custom”分组，再次点击”+“，选择”Live Template“
第五步：输入LIve Template的名称，比如 al
第六步：输入Live Template的描述，比如 create ArrayList
第七步：输入Template text，比如 List<$VAR1$> $VAR2$ = new ArrayList()
第八步：选择语言 deine => java

常用功能
功能1：引入外部jar包
在IntelliJ IDEA 中选择File->Project Structure->Modules->Dependencies 点击下面的小加号，选择JARs or directories选择你要添加的外部jar包。

功能2：终端打开idea
选择Tools/Create Command-line Launcher…
直接点击OK按钮
终端进入项目目录，然后输入 idea . 就直接用idea打开当前项目了

常用插件
插件1：ideaVim
插件2：IdeaVimExtension
#该插件可以解决进入normal模式后，需要频繁切换输入法的问题

Eclipse

创建工程
1，创建工程：File -> New -> Java Project
2，创建包：File -> New -> Package
3，创建类：File -> New -> Class
4，编写Java程序
5，执行Java程序：右键 -> Run as -> 1 Java Application

快捷键
Ctrl + D：删除当前行
Ctrl + Shift + F：格式化代码，如果无效就把搜狗输入法的简繁快捷键取消了
Alt + Shift + J：生成注释
Alt + Shift + S：打开Source菜单
Alt + Shift + S => Generate Getters and Setters：生成类的set 和 get方法
Ctrl + Shift + o：引入已使用类相应的包
Alt + Shift + Z：Try/Catch Block
Alt + /：自动提示参数
F11：开始调试
F6：单步调试，下一步
F8：跳到下一个断点
F5：单步调试，进入函数内部
F7：由方法内部返回调用处

Eclipse常用快捷键

调试方法
设置断点：在代码行号处 Toggle BreakPoint / 双击左键
结束调试：右下角的红色方框按钮
切回目录：右上角的java按钮

文档注释

  • /** + 回车键可以生成文档注释
  • Alt + Shift + J 可以生成注释

在控制台中输入以下命令可以自动生成文档
javadoc -d doc

VSCode

VSCode是微软提供的一款轻量级代码编辑器

常用插件：

  1. vscode-icons：给vscode 资源树目录加上图标
  2. prettier：格式化代码
  3. eslint：语法检查
  4. Path Intellisense：自动路劲补全
  5. Git History：查看git履历
  6. es7 react/redux/graphql/react-natie snippets

输入 rfc ，会自动生成以下代码片段

  1. import React from 'react'
  3. export default function test() {
  4.     return (
  5.         <div>
  7.         </div>
  8.     )
  9. }

辅助插件：

  1. vim

解决需要频繁切换输入法的问题

安装： im-select: Switch your input method from terminal
配置：

  1. "vim.autoSwitchInputMethod.enable": true,
  2. "vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
  3. "vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
  4. "vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

来源：
https://www.jianshu.com/p/cbfa86c8d8a5

  1. View InBrowser：右击HTML文件在浏览器中打开
  2. Debugger for Chrome：

让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试。
配置：
安装完之后会弹出以下配置文件，把url改成你的项目地址就可以了。
比如我现在正在做的一个React项目，地址是localhost:3000，那么就把url改成"http://localhost:3000"

  1. {
  2.     // 使用 IntelliSense 了解相关属性。 
  3.     // 悬停以查看现有属性的描述。
  4.     // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  5.     "version": "0.2.0",
  6.     "configurations": [
  7.         {
  8.             "type": "chrome",
  9.             "request": "launch",
  10.             "name": "Launch Chrome against localhost",
  11.             "url": "http://localhost:3000",
  12.             "webRoot": "${workspaceFolder}"
  13.         }
  14.     ]
  15. }

使用：(以React项目为例)
第一步，在终端中输入yarn start启动项目
第二步，在需要调试的地方打上断点
第三步，按F5启动调试。当你在页面上的操作触发断点时，可以调试看到相关变量的值。
**

  1. HTMLHint：html代码检测
  2. HTML Snippets：H5代码片段以及提示
  3. JavaScript (ES6) code snippets ：JavaScript 代码片段以及提示
  4. Easy LESS：根据LESS文件自动生成CSS文件
  5. jQuery Code Snippets：jQuery代码提示，必备良品

在终端中输入 code . 就可以用vscode打开了
command + shift + p => 输入 install => 选择 Shell command install ‘code’ command in PATH

补充：解决vetur和eslint的冲突问题：

  1. 单双引号问题

image.png
image.png

  1. 函数后的括号问题

.eslintrc.js
image.png