如何在代码库和 VSCode 中安装 Prettier

更漂亮

Prettier 是一个固执己见的代码格式化程序，支持多种语言。

自从我开始使用 Prettier 以来，我不想再在没有它的情况下编写代码。尽管一开始有一些担忧（例如强制线宽），但我爱上了默认设置。

安装和配置 Prettier

安装 Prettier 很简单，以下是简要的步骤。您也可以按照官方安装指南进行操作。

首先您需要在本地安装准确版本的 prettier。这确保每个人都将使用完全相同相同的版本来格式化项目中的代码。

npm install --save-dev --save-exact prettier

接下来，您需要在项目的根目录中创建 Prettier 配置文件 .prettierrc 和 .prettierignore（可选）。

您可以运行此命令来创建带有空对象的默认配置文件：

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

.prettierignore 文件的工作方式与 .gitignore 文件相同。事实上，Prettier 已经遵循 .gitignore 中规定的规则，因此您可能甚至不需要：

？默认情况下，prettier 会忽略版本控制系统目录（“.git”、“.sl”、“.svn”和“.hg”）和 node_modules 中的文件（除非指定了 --with-node-modules CLI 选项）。如果 Prettier 存在于运行它的同一目录中，它还将遵循“.gitignore”文件中指定的规则。

这是一个示例 .prettierignore 来跳过所有 HTML 文件：

# Ignore all HTML files:
**/*.html

格式化所有现有代码

在继续格式化整个代码库之前，请提交您的更改。我还建议合并所有打开的拉取请求，因为很多文件都会受到影响。

现在在项目的根文件夹中运行此命令以格式化所有文件：

npx prettier . --write

ℹ️ 此处使用 npx 可确保执行本地安装的 Prettier 版本。如果您还全局安装了 Prettier，这一点很重要。

现在您的所有项目文件都应该具有良好的格式。 ?✨

安装 Prettier VSCode 扩展

接下来您可以为您的 IDE 设置 Prettier 插件。我使用 Visual Studio Code，但也有许多其他编辑器的插件。

对于 VSCode，安装此扩展：esbenp.prettier-vscode

完成后，您可以导航到 VSCode 设置并搜索“formatter”。在这里您可以将 Default Formatter 设置为 esbenp.prettier-vscode。

但是，如果您像我一样从事许多不同的项目，并且并非所有项目都有 Prettier，那么您可能会将其保留为默认设置（无）。

相反，您可以在您使用 prettier 的项目的本地 VSCode 设置文件 (.vscode/settings.json) 中设置默认格式化程序。

为了确保本地配置覆盖任何特定于语言的全局 VSCode 设置，您可能需要为每种语言单独指定 defaultFormatter。

这里有一个示例 .vscode/settings.json 供参考：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

以上是如何在代码库和 VSCode 中安装 Prettier的详细内容。更多信息请关注PHP中文网其他相关文章！