IDEA使用时常用技巧

发表于 | 分类于
保存时自动格式化、@支持跳转

常用快捷键

Shift两次：查找代码

Ctrl+E：当前打开的文件

Ctrl+Alt+B：查找对应的实现

Alt+F7：查找引用

关闭拼写检查

单词拼写检查太烦人了，建议关掉。

Settings中查找Inspections,右侧搜索Typo，取消勾选即可。

image-20220303114035182

保存格式化插件

打开Setting,找到Plugins选项

搜索save action安装后重启IDEA

重启后Setting中打开Save Actions

勾选如图框中的选项

image-20211130112051916

宏+快捷键

在开发前端的时候 我们会用到eslint插件，插件要求的格式和IDEA默认的格式可能不一样，这样就算我们使用了上面的save action插件，也没有意义，因为格式的规则不一样，那么就有两种解决方法

  • 录制宏 设置快捷键
  • 设置IDEA代码格式化规则

两种方式录制宏会相对简单点

首先点击 Edit => Macros 进入录制状态

在我们的代码页面右键点击Fix ESLint Problems,再点击Ctrl+S进行保存

image-20220303103725886

结束录制 宏名称设置为eslint_fix_save

打开IDEA设置页面，点开keymap设置页，搜索eslint_fix_save

设置快捷键为Alt+S,这样我们就可以按Alt+S进行格式化并且保存了。

注意：

这里快捷键是可以设置为Ctrl+S的，因为宏中记录的不是快捷键而是快捷键对应的操作。

这种方式一定要把save action关闭掉。

对应的宏如图所示：

image-20220303104722944

修改格式化规则

上面的两种方式各有缺点

  • 插件的形式针对后端开发，非常好用，但是前端不行。
  • 宏的形式前端好用，后端不行。

所以为了兼容前后端，另一种方案就是save action插件+修改格式化规则。

但是

这种方式要配置的规则太多了，我已经放弃这种方式了，不推荐。

@路径支持跳转

IDEA创建前端项目的时候，相对路径可以直接点击连接，跳转到对应的文件中，但是如果我们配置了@后，添加@的路径就不支持跳转了。

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require("path");

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "@": resolve("src"),
        },
    },
};

这是只要我们在项目根目录添加以下文件，就可以支持跳转了

jsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "./src/**/*"
  ]
}