使用这 60 个 VS Code 快速修复来提升你的 JavaScript 水平

编程时，我们经常直接编辑文本来实现目标。这种手动编辑速度慢且容易出错。对于保留行为的更改（重构），自动化可以节省您的时间，确保转换正确执行，并警告潜在的错误。您可以更直接地传达您的意图，例如“我想将此表达式提取到一个变量中”，然后让机器来处理细节。

我为 Visual Studio Code 编写了一个名为 P42 JavaScript Assistant 的扩展，它为 JavaScript 和 TypeScript 添加了 60 个自动重构、快速修复和清理功能，让您的生活更轻松。这篇博文概述了不同的代码操作及其类别。

💡 这篇博文展示了 P42 JavaScript Assistant v1.64

但首先，这里有一个 P42 工作原理的示例，让您了解它如何帮助您：

核心重构

Visual Study Code 已包含重命名和提取函数等基本重构功能。P42 添加了额外的重构或扩展功能，例如安全检查。

• 提取变量
• 将子字符串提取到变量中
• 行内变量
• 内联到模板
• 内联返回

React 重构和快速修复

在React中，组件通常包含JSX（JavaScript 的语法扩展）。P42 提供了一些代码操作，使使用 JSX 和 React 更加容易：

• 提取 React 函数组件
• 将 {...} 添加到 JSX 属性&从 JSX 属性中删除 {...}
• 折叠 JSX 元素&展开 JSX 元素
• 用 <>...</> 包围并删除不必要的 <>...</>

ECMAScript 现代化

得益于TC39的出色工作，JavaScript 生态系统正在快速发展。然而，保持代码库与 JavaScript 的新特性保持同步并非易事，而且由于 codemod 的频繁变动和潜在的破坏性，它并非总是可行的选择。P42 既支持类似 codemod 的大规模代码重构，也支持更具针对性的代码现代化，以实现以下升级：

ES2015

• 将对象属性折叠成简写形式
• 将 .apply() 转换为使用扩展语法
• 将函数转换为箭头函数
• 将函数转换为对象方法
• 将循环转换为 For...Of
• 将 Var 转换为 Let & Const
• 将默认值提升为参数
• 使用 String.startsWith()和使用 String.endsWith()
• 使用模板字符串

ES2016

• 将 Math.pow 转换为指数运算符
• 使用 Array.includes()

ES2020

• 在默认表达式中使用空值合并
• 使用可选链

ES2021

• 添加数字分隔符
• 将运算符推入赋值语句（用于短路表达式）

逻辑表达式的操作

布尔逻辑的阅读难度较大，尤其是在表达式越来越复杂的情况下。P42 提供了一些重构功能，可以帮助您简化和梳理逻辑表达式，使其更易于理解：

• 翻转运算符
• 反转条件
• 上拉否定&下推否定
• 简化二进制表达式
• 删除双重否定
• 使用 == null 比较
• 提取变量
• 使用可选链

If-Else 语句的操作

If-else 语句是许多程序的核心元素。重构它们可以提高程序的可读性，通常与重构它们的条件语句结合使用：

• 从 If-Else 中移除语句
• 合并嵌套的 If 语句
• 将 Else 中的嵌套 If 合并到 Else-If 中
• 将条件拆分为嵌套的 If
• 删除空的 If 块和删除空的 Else 块
• 删除多余的其他
• 将 If-Else 转换为 Guard 子句
• 将条件表达式转换为 If-Else并将If-Else 转换为条件表达式
• 将 If-Else 转换为 Switch

语法转换

通过编辑文本进行细微的语法更改通常很烦人。通常需要编辑多个位置，而且在编辑过程中代码会被破坏，导致不正确的错误和自动补全功能出现问题。您可以使用一个 P42 快速修复程序执行以下语法转换：

• 将 {...} 添加到箭头函数并从箭头函数中删除 {...}
• 将 {...} 添加到 JSX 属性&从 JSX 属性中删除 {...}
• 折叠 JSX 元素&展开 JSX 元素
• 将对象属性折叠为简写并展开简写属性
• 将属性访问转换为点表示法&将属性访问转换为括号表示法
• 拆分变量声明

转换语言元素

有时，你会想切换到更适合你当前工作的语言元素。例如，for..of循环更简洁，在很多情况下可以替代常规的 for 循环。

• 将条件表达式转换为 If-Else并将If-Else 转换为条件表达式
• 将函数转换为箭头函数&将函数转换为对象方法
• 将 If-Else 转换为 Switch
• 将循环转换为 For...Of &将循环转换为 ForEach
• 将运算符推入赋值语句并将运算符拉出赋值语句
• 将 Var 转换为 Let & Const &将 Let 转换为 Const

代码清理

代码清理会删除不必要的代码。这类代码可能是由于代码变动造成的，例如，应用其他重构、添加新功能或修复错误。P42 提供了提示，并针对以下情况自动执行清理：

• 删除双重否定
• 删除空的 If 块和删除空的 Else 块
• 删除多余的其他
• 删除不必要的条件表达式
• 删除不必要的表达式语句
• 删除不必要的 JSX 片段
• 删除不必要的模板文字
• 简化二进制表达式

其他行动

• 插入 console.log 作为变量
• 使用 Try-Catch 包围

如果您觉得这些重构和操作有用，可以从 VS Code 市场安装P42 JavaScript 助手。
如需反馈和更新，您可以在Twitter或LinkedIn上找到 P42 。

干杯!