12 个 VSCode 快捷键和策略，简化开发

所以，你可能已经拥有了一些很棒的工具或扩展来简化你的开发流程，并且正在享受美好的时光。这很棒，但是仍然有一个小小的变化，你可能会错过 VS Code 提供的一些快捷方式。

在这篇文章中，我将列出一些我最喜欢的快捷方式，它们可以让我更快、更高效地编写代码。

我希望通过阅读这篇文章，您能够在即将开展的项目的开发流程中采用一些新的东西！

以下是 12 个 VSCode 快捷方式和策略，可简化开发：

1. 直接在 JSON 中打开 VSCode 设置

如果您不知道打开设置的快捷键，可以使用Ctrl + ,Mac 的快捷键：Command + ,。按下此组合键将打开 VS Code 编辑器正在使用的设置。但是，这将直接以图形用户界面 (GUI) 的形式打开设置。VSCode 还允许您使用 JSON 模式编辑这些设置。

您可以打开设置界面并手动单击右上角的打开设置（JSON）按钮，也可以选择绑定自定义键盘快捷键以直接在 JSON 视图中打开这些设置。

Ctrl + S + K按(Mac: )转到键盘快捷键窗口Command + S + K，然后搜索Preferences: Open Settings (JSON)并应用自定义键盘组合以使其成为快捷键。

下面是一个例子：

2. 转换为标题大小写

当您需要将以小写字母开头的单词转换为以大写字母开头的单词时，此功能非常有用。

我经常遇到需要更改某些变量大小写的问题。我遇到的一些常见场景是将渲染函数转换为实际的 React 组件（按照惯例，组件名称必须严格以大写字母开头）。

另一种情况是在storybook中创建故事时。我有时会为渲染 React 组件的函数创建一个故事。但后来我决定这个故事只是一个 React 组件。记得故事现在开箱即用地支持 React Hooks，我使用，React.useState在浏览器中查看故事时它运行良好。但是，会弹出一个 ESLint/TypeScript linting 错误，告诉我 React Hooks 只能在函数组件内部使用（我使用了渲染函数）。我必须选择保存故事的变量的名称，并手动将其更改为以大写字母开头，才能消除错误。

您实际上可以通过将自定义键盘快捷键绑定到快捷键窗口来使用名为“转换为标题大小写”的命令。

按(Mac: )打开键盘快捷键窗口并为绑定键盘组合。Ctrl + S + KCommand + S + KTransform to Title Case

之后您可以执行以下操作：

当您选择多个选定内容并同时对它们进行转换时，效果会非常好。

3. 折叠/展开代码块

Windows：Ctrl + Shift + [或Ctrl + Shift + ]
Mac：Command + Shift + [或Command + Shift + ]

折叠代码块将帮助您立即将代码块精简为一行，这将帮助您在当前文件中的代码之间快速跳转。

根据我的经验，当你在一个文件中包含多个代码实现，并且需要立即将注意力集中在一个函数或组件上时，这种做法的优势就开始显现。在某种情况下，你可能正在考虑将代码的不同部分提取到单独的文件中，从而实现代码的模块化，以减少文件混乱，但你不确定是否有必要这样做。你可以忍受冗长的代码文件，来回滚动浏览以找到所需的代码块，或者你可以快速折叠它们以使其更轻松：

注意`Shift`：您可以通过在选择代码块时按住按钮来折叠/展开多个代码块。

注释＃2 ：使用折叠区域突出显示功能为折叠线提供自定义突出显示颜色。

您可以通过进入设置（使用 JSON 模式）来提供自定义突出显示颜色，查找workbench.colorCustomizations并输入此键：editor.foldBackground如下所示：

折叠后的代码行现在看起来是这样的：

注意事项 #3：如果您选中的代码块包含多个内部块，且嵌套深度超过一层，则折叠该块只会折叠该内部块。您可以串联折叠，这样下一个父级块也会被折叠，并且会继续向上冒泡。

注 #4：另一种实现类似效果的方法是使用自动换行工具，该工具会将整行自动换行（类似于折叠效果）。此命令适用Alt + Z于 Windows 和Option + ZMac。

4. 显示资源管理器

Windows：Ctrl + Shift + E
Mac：Command + Shift + E

有时，当你突然有想法，想以树状结构查看当前目录时，别忘了打开文件资源管理器，它能准确地显示当前目录。只需按下Ctrl + Shift + E（对于 Mac 用户，按下Command + Shift + E），面板就会在屏幕左侧打开（如果尚未打开）。

5. 查找并打开文件

这可以说是 VS Code 史上十大功能之一，因为它节省了时间和精力。想象一下，只用鼠标搜索文件是什么感觉？如果你正在处理一个大项目，这可能会让你神经紧张。

要搜索并打开您要查找的文件，快捷方式是Ctrl + T（对于 Mac 用户是Command + T）

6. 直接打开你的 TypeScript 配置

有两种方法可以轻松让 VSCode 打开你的。一种方法是通过按(Mac: )tsconfig.json打开文件查找器，然后输入字母来缩小搜索结果，或者你可以轻松地按下组合键直接打开它：Ctrl + TCommand + T

打开 typescript 配置 tsconfig.json vscode 快捷方式

VSCode 会检测并打开tsconfig.json当前工作目录中的。不过，需要注意的是，你当前必须正在查看 glob 模式中包含的内容tsconfig.json。所以，如果你"include": ["src"]的中有tsconfig.json，那么你必须正在查看src目录中的文件，此快捷方式才能正常工作。

Ctrl + S + K要将自定义键盘快捷键绑定到此命令，请按(Mac: )打开键盘快捷键窗口Command + S + K，搜索TypeScript: Go to Project Configuration并将您的组合键绑定到它。

7.重新打开最近关闭的标签页

我经常遇到这种情况：关闭了一批标签页，一分钟后又不得不再次查看同一个文件。在这种情况下，返回该文件的方法是通过按键Ctrl + Shift + T（Mac 系统：Command + Shift + T）回到过去。

有时候，直接用来撤销所有已关闭的标签页会更快Ctrl + Shift + T。但如果你打字速度快，反应灵敏，那么使用快捷键就能更快Ctrl + T（参考第 4 点）。

8. 跳转到另一个编辑器组

当您不想使用鼠标时，切换到上一个或下一个编辑器组是一种快速跳转到另一侧的方法。您只需在键盘上按到之间的任意数字Ctrl + <number>即可。（Mac：）。<number>09Command + <number>

9. 转到同一编辑器组中的选项卡

当您在编辑器组中工作时，您可以按住Ctrl并按下Tab以在该组中当前打开的选项卡之间导航。（Mac：）Command + Tab。

如果您更喜欢使用键盘，那么这是避免使用鼠标的另一种方法：

10. 交换标签页以区分不同的组

我在开发时，经常会把某个选项卡放在错误的选项卡组中。我还尽量避免使用鼠标来操作，因为这需要我把手从键盘上抬起来。我的手很重——我希望它能一直放在键盘上。

幸运的是，VS 代码有一种方法可以将选项卡转移到单独的选项卡组，即按Ctrl + Alt + Right Arrow（Mac：）Command + Option + Right Arrow将选项卡移动到右侧的组，或按Ctrl + Alt + Left Arrow（Mac Command + Option + Left Arrow：）将选项卡移动到左侧的组：

11.转到定义

你可能经常遇到这种情况：导入或引用项目中某个函数，然后需要查看其实现细节。你可以使用鼠标、文件查找器 ( Ctrl + T[Mac: Command + T])，或者选中/高亮显示函数名称并按下F12。

这将立即带您到该函数（适用于 TypeScript 和许多其他类型）的定义位置：

12. 自定义项目片段

如果您不熟悉用户代码片段，此功能允许您创建自己的代码片段以便在整个项目中重复使用。

但“重复使用”它们到底是什么意思呢？

好吧，如果你经常发现自己编写任何类型的样板，如下所示：

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook

实际上，您可以将其直接放入您的用户代码片段中，因此您不必写出（或复制和粘贴）整个内容，而只需键入自定义前缀即可生成您配置的代码片段。

如果您前往File > Preferences > User Snippets，您可以选择通过单击来创建一个新的全局代码片段New Global Snippets File。

例如，要为 TypeScript React 项目创建自己的代码片段文件，您可以单击New Global Snippets File，输入typescriptreact.json，它将引导您进入一个新创建的.json文件，您可以使用该文件来使用 TypeScript 构建的 React 应用程序。

例如，要从上面的代码示例中创建用户代码片段，您可以这样做：

{
  "beforeEach(() => {})": {
    "prefix": "bfe",
    "body": ["beforeEach(() => {", "  $1", "})"]
  }
}

有了它，您可以创建一个以 .tsx 结尾的新 TypeScript 文件，输入前缀 bfe，然后会出现生成代码片段的建议。

按下键盘上的b+ f+将生成以下代码片段：e

beforeEach(() => {})

这里有一些自定义代码片段，它们让我在开发 React 应用程序或 JavaScript 时的生活变得非常简单：

{
  "eslint disable line": {
    "prefix": "eds",
    "body": "// eslint-disable-line"
  },
  "eslint disable next line": {
    "prefix": "ednl",
    "body": "// eslint-disable-next-line"
  },
  "// @ts-ignore": {
    "prefix": "tsg",
    "body": "// @ts-ignore"
  },
  "beforeEach(() => {})": {
    "prefix": "bfe",
    "body": ["beforeEach(() => {", "  $1", "})"]
  },
  "dispatch": {
    "prefix": "dispatch",
    "body": "dispatch({ type: '$1'$2 })"
  },
  "import react": {
    "prefix": "reaa",
    "body": "import React from 'react'"
  },
  "comment section": {
    "prefix": "cs",
    "body": [
      "/* -------------------------------------------------------",
      "  ---- $1",
      "-------------------------------------------------------- */"
    ]
  },
  "@param": {
    "prefix": "@param",
    "body": ["/**", " * @param { $1 } $2 - $3", " */"]
  },
  "ref": {
    "prefix": "ref",
    "body": "const $1 = React.useRef<any$2>()"
  },
  "const initialState = {};  reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "function reducer(state = initialState, action) {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  },
  "Form": {
    "prefix": "rform",
    "body": [
      "<Form",
      "  onSubmit={onSubmit}",
      "  subscription={{",
      "    submitError: true,",
      "  }}",
      "  render={({ handleSubmit, submitError }) => (",
      "    <form onSubmit={handleSubmit}>",
      "      $1",
      "    </form>",
      "  )}",
      "/>"
    ]
  },
  "immer": {
    "prefix": "immer",
    "body": ["import { useImmer } from 'use-immer'"]
  },
  "React.useState": {
    "prefix": "ustate",
    "body": ["const [$1, $2] = React.useState($3)"]
  },
  "React.useEffect": {
    "prefix": "eff",
    "body": ["React.useEffect(() => {", "  $1", "}, [$2])"]
  },
  "React.useContext": {
    "prefix": "ctx",
    "body": ["const $1 = React.useContext($2)"]
  },
  "context": {
    "prefix": "context",
    "body": [
      "import React from 'react'",
      "// import { $1 } from './$1'",
      "",
      "const context = React.createContext<undefined | any>(undefined)",
      "",
      "export default context"
    ]
  },
  "context provider": {
    "prefix": "provider",
    "body": [
      "import React from 'react'",
      "import $1 from './$1'",
      "",
      "function $2({ children }: { children: React.ReactNode }) {",
      "  const ctx = {",
      "    // $3",
      "  }",
      "  return (",
      "    <$1.Provider value={undefined}>",
      "      {children}",
      "    </$1.Provider>",
      "  )",
      "}",
      "",
      "export default $2"
    ]
  },
  "react-final-form": {
    "prefix": "rff",
    "body": ["import { Form, Field } from 'react-final-form'"]
  },
  "classnames": {
    "prefix": "cx",
    "body": "import cx from 'clsx'"
  },
  "typeof window !== 'undefined'": {
    "prefix": "isbrowser",
    "body": ["if (typeof window !== 'undefined') {", "  $1", "}"]
  },
  "process.env.NODE_ENV === 'development'": {
    "prefix": "isdev",
    "body": ["if (process.env.NODE_ENV === 'development') {", "  $1", "}"]
  },
  "import { useSelector, useDispatch } from 'react-redux'": {
    "prefix": "rsd",
    "body": "import { useSelector, useDispatch } from 'react-redux'"
  },
  "import isString from lodash/isString": {
    "prefix": "isstr",
    "body": "import isString from 'lodash/isString'"
  },
  "import isFunction from lodash/": {
    "prefix": "isfnc",
    "body": "import isFunction from 'lodash/isFunction'"
  },
  "import isUndefined from lodash/isUndefined": {
    "prefix": "isund",
    "body": "import isUndefined from 'lodash/isUndefined'"
  },
  "import isArray from lodash/isArray": {
    "prefix": "isarr",
    "body": "import isArray from 'lodash/isArray'"
  },
  "import isNaN from lodash/isNaN": {
    "prefix": "isnan",
    "body": "import isNaN from 'lodash/isNaN'"
  },
  "import isNumber": {
    "prefix": "isnum",
    "body": "import isNumber from 'lodash/isNumber'"
  }
}

在Medium上找到我

文章来源：https://dev.to/jsmanifest/12-vscode-shortcuts-and-tropics-to-ease-development-5856

12 个 VSCode 快捷键和策略，简化开发

12 个 VSCode 快捷键和策略，简化开发

1. 直接在 JSON 中打开 VSCode 设置

2. 转换为标题大小写

3. 折叠/展开代码块

注意Shift：您可以通过在选择代码块时按住按钮来折叠/展开多个代码块。

注释＃2 ：使用折叠区域突出显示功能为折叠线提供自定义突出显示颜色。

4. 显示资源管理器

5. 查找并打开文件

6. 直接打开你的 TypeScript 配置

7.重新打开最近关闭的标签页

8. 跳转到另一个编辑器组

9. 转到同一编辑器组中的选项卡

10. 交换标签页以区分不同的组

11.转到定义

12. 自定义项目片段

注意`Shift`：您可以通过在选择代码块时按住按钮来折叠/展开多个代码块。