使用WebStorm的Macros宏指令,实现保存的同时格式化代码,并跳至行尾

本文介绍如何在IntelliJ IDEA中通过宏指令录制格式化代码和保存两个操作,并分配快捷键,实现同时保存与格式化代码的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

经常习惯性的Ctrl+S,以及格式化代码,严重浪费时间。偶有所得,分享给大家,算是一个奇技淫巧,同样适用于phpstorm

核心:利用宏指令,录制格式化代码和保存两个动作,然后进行快捷键分配。

1.Edit>Macros>Start Macros Recording


2.开启录制后右下角会有如下状态。
按下【Ctrl】+【S】(保存)然后按下【Ctrl】+【Alt】+【L】(格式化),【end】(跳转行尾)然后点击右下角录制按钮结束录制,输入你想要保存的名字。


3.进入设置页面添加快捷键------按下【Ctrl】+【Alt】+【S】或者File>Settings。在搜索框输入你刚才保存的名字,然后添加快捷键。如果提示警告该快捷键已存在,不用管直接移除,然后apply>OK.


好的完成,保存的同时格式化代码,并且光标跳至行尾,这样搬砖的时候我们的手就可以不离开主键盘区域来实现操作了,来快去体验一下吧。
PS:每一次折腾都是那么的兴奋。


WebStorm 中进行代码格式化可以通过多种方式实现,包括使用 Prettier、ESLint 等工具来自动格式化代码,也可以使用 WebStorm 自带的格式化功能。以下是几种常见的方法: ### 使用 Prettier 进行代码格式化 Prettier 是一个流行的代码格式化工具,支持 JavaScript、TypeScript、CSS、HTML、JSON 等多种语言。要在 WebStorm 中配置 Prettier 实现保存时自动格式化,可以按照以下步骤操作: 1. **安装 Prettier** 在项目根目录下打开终端,运行以下命令安装 Prettier: ```bash npm install --save-dev prettier ``` 2. **创建 Prettier 配置文件(可选)** 在项目根目录下创建 `.prettierrc` 文件以自定义格式化规则,例如: ```json { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "arrowParens": "always" } ``` 3. **配置 WebStorm 使用 Prettier** - 打开设置:Windows 快捷键 `Ctrl + Alt + S`,macOS 上使用 `Command + ,` - 导航到 `Tools > External Tools` - 点击 `+` 号添加新的外部工具: - Name: `Prettier Format` - Program: 输入 `npx` 或者 `npm` 脚本路径(如 `./node_modules/.bin/prettier`) - Arguments: `--write $FilePathRelativeToProjectRoot$` - Working directory: `$ProjectFileDir$` - 回到主界面后,右键点击任意代码文件,选择 `External Tools > Prettier Format` 即可手动格式化代码[^1]。 4. **设置保存时自动格式化** - 安装 Prettier 插件(可在 Plugins 市场中搜索安装) - 在设置中进入 `Languages & Frameworks > JavaScript > Prettier` - 设置默认的 Prettier 配置,勾选“On save”选项以实现保存时自动格式化。 --- ### 使用 ESLint 进行代码格式化 ESLint 是一个用于识别和报告 JavaScript 代码中问题的工具,同时也支持自动修复部分问题,包括格式化。要配置 WebStorm 使用 ESLint 实现保存时自动格式化: 1. **安装 ESLint 插件** - 打开插件市场(`Settings > Plugins`),搜索 `ESLint` 安装插件[^2]。 2. **安装 ESLint** 在终端运行以下命令安装 ESLint: ```bash npm install eslint --save-dev ``` 3. **初始化 ESLint 配置** 运行以下命令生成 `.eslintrc.js` 配置文件: ```bash npx eslint --init ``` 按照提示选择适合项目的规则集(如 Airbnb、Standard 等)。 4. **配置 WebStorm 使用 ESLint** - 打开设置,导航至 `Languages & Frameworks > JavaScript > Code Quality Tools > ESLint` - 启用 ESLint 指定 ESLint 的工作目录和配置文件路径。 - 勾选“Run eslint --fix on save”选项以实现保存时自动修复代码格式问题[^2]。 --- ### 使用 WebStorm 内置格式化功能 如果不依赖第三方工具,WebStorm 提供了内置的代码格式化功能,适用于大多数前端语言: - **快捷键格式化** Windows/Linux 上使用 `Ctrl + Alt + L`,macOS 上使用 `Command + Option + L`,即可对当前文件进行格式化。 - **设置默认格式化规则** - 打开设置,进入 `Editor > Code Style` - 选择对应的语言(如 JavaScript、HTML 等),调整缩进、空格、换行等格式化规则 - 应用更改后,每次使用格式化快捷键或保存时都会按照该规则进行格式化 --- ### 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值