格式化 ReactJS Visual Studio 的快捷方式 - Javascript

在日常开发中，代码格式化是一项非常重要的任务，它可以使你的代码更易于阅读和理解。 在Visual Studio中使用 ReactJS 开发时，可能会需要制定一些格式化规则和快捷键。下面我们就来介绍如何在 Visual Studio中创建格式化的快捷方式。

步骤 1：安装 Prettier

Prettier 是一个流行的 JavaScript 代码格式化程序。它可以自动将代码格式化为所需的格式，以便代码更加易于阅读。 如果你还没有安装 Prettier，你可以使用以下命令来安装它:

npm install prettier --save-dev

步骤 2：创建一个格式化脚本

在项目根目录下，创建一个名为 'prettier-format.js' 的文件。

const fs = require('fs');
const prettier = require("prettier");

const files = process.argv.slice(2);
files.forEach(file => {
    const fileContent = fs.readFileSync(file, "utf8");

    const options = prettier.resolveConfig.sync(file);

    const formattedContent = prettier.format(fileContent, options);

    fs.writeFileSync(file, formattedContent, "utf8");
});

该脚本将使用 Prettier 来格式化传递给它的文件。我们可以使用 NodeJs 来运行这个脚本。

由于我们将在 Visual Studio Code中使用该脚本，因此我们需要通过以下命令来安装必要的运行时库：

npm install --save-dev @types/node

步骤 3：创建一个自定义命令

在 Visual Studio Code的配置文件( setting.json )中添加一个命令，以便调用我们的格式化脚本。

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "workbench.startupEditor": "newUntitledFile",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.env.windows": {
    "PATH": "${env:PATH};C:\\Program Files\\Git\\bin\\;C:\\Program Files\\nodejs\\"
  },
  "terminal.integrated.shellArgs.windows": [
    "--login",
    "-i"
  ],
  "terminal.integrated.cursorStyle": "block",
  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#73d0de55",
    "editor.selectionHighlightBackground": "#439bad55"
  },
  "workbench.activityBar.visible": true,
  "workbench.sideBar.location": "left",
  "workbench.editor.showIcons": true,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.editor.tabSizing": "shrink",
  "workbench.editor.tabCloseButton": "right",
  "workbench.editor.tabCloseButtonBehavior": "prompt",
  "editor.tabCompletion": "on",
  "workbench.editor.enablePreview": true,
  "workbench.editor.enablePreviewFromQuickOpen": true,
  "workbench.editor.highlightModifiedTabs": true,
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "editor.wordWrap": "on",
  "editor.wordWrapColumn": 80,
  "editor.wrappingIndent": "indent",
  "window.zoomLevel": 0,
  "workbench.editorAssociations": {
    "*.md": "default"
  },
  "workbench.colorTheme": "One Dark Pro",
  
  // 自定义命令
  "javascript.format": {
    "command": "${workspaceFolder}/scripts/prettier-format.js",
    "args": ["${file}"],
    "label": "Format File (Prettier)"
  }
}

步骤 4：添加快捷键

我们可以使用以下命令添加一个快捷键来调用我们刚刚创建的自定义命令：

{
    "key": "ctrl+shift+h",
    "command": "javascript.format",
    "when": "editorLangId == javascript"
}

总结

我们现在已经创建了一个可以在 Visual Studio中使用的自定义格式化快捷方式。它将使用 Prettier 来自动格式化 JavaScript 文件。 我们还可以使用与我们的快捷方式相同的方法创建格式化其他类型的文件的快捷方式，例如 CSS和 HTML 文件。