在 VS Code 中设置 Prettier，编写干净可读性强的代码

编写干净、可读性强的代码是必不可少的，无论你是独自工作还是与一组开发人员合作。虽然很多因素都会影响代码的可读性，但最重要的一个因素是一致的代码格式。

但问题在于：手动格式化代码会非常痛苦，而且容易出错。像 Prettier 这样的工具可以使 HTML、CSS、JavaScript 和其他语言的格式化变得更加容易。了解如何安装和使用 Prettier 扩展进行代码格式化，以及一些高级配置设置。

安装 Prettier

在进行操作之前，请确保您的计算机上已安装 Node.js。您可以从官方的Node.js下载页面安装最新版本。它内置了node包管理器（npm），您将使用它来管理Node.js包。

在确认本地已安装Node.js后，首先创建一个空目录作为项目。您可以将目录命名为 prettier-demo。

接下来，在命令行中使用 cd 进入该目录，然后运行以下命令初始化一个 Node.js 项目：

linuxmi@linuxmi:~/prettier-demo$ npm init -y

此命令生成一个包含默认设置的 package.json 文件。

{
  "name": "prettier-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo /"Error: no test specified/" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

要安装 Prettier 扩展，请运行此终端命令：

linuxmi@linuxmi:~/prettier-demo$ npm i --save-dev prettier

输出如下：

added 1 package, and audited 2 packages in 7s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

–save-dev 标志将 prettier 作为开发依赖项进行安装，这意味着它只在开发期间使用。

现在您已经安装了它，可以通过在命令行上使用它来开始探索 Prettier 的工作方式。

使用命令行通过 Prettier

首先创建一个 script.js 文件，并将以下代码添加到其中：

function sum(a, b) { return a + b }

const user = { name: "Kyle", age: 27,
    isProgrammer: true,
    longKey: "Value",
    moreData: 3
}

若要通过命令行格式化此 script.js文件中的代码，请运行以下命令：

linuxmi@linuxmi:~/prettier-demo$ npx prettier --write script.js

该命令将 script.js 中的 JavaScript 代码重新格式化为 Prettier 的默认标准。结果将会是：

function sum(a, b) {
  return a + b;
}
const user = {
  name: "Kyle",
  age: 27,
  isProgrammer: true,
  longKey: "Value",
  moreData: 3,
};

你也可以通过命令行格式化HTML标记。在与 script.js 相同的目录中创建一个 index.html 文件。然后将以下格式不良的HTML粘贴到文件中:

    <header>
<div>
    <img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
    </header>

运行以下命令以格式化HTML：

linuxmi@linuxmi:~/prettier-demo$ npx prettier --write index.html

该命令将HTML重新格式化为Prettier的默认标准，生成以下代码：

<header>
  <div>
    <img src="" alt="" class="weather-icon large" />
    <div class="currentHeaderTemp"><span>21</span></div>
  </div>
</header>

你还可以使用 –check 标志来检查代码是否符合 Prettier 的标准。以下示例检查 script.js：

linuxmi@linuxmi:~/prettier-demo$ npx prettier --check script.js

这个命令非常有用，如果你想在提交之前通过Prettier检查代码并格式化文件。这在贡献到开源项目时非常有效。

将 Prettier 集成到 Visual Studio Code 中

在 VS Code 中使用命令行来调用 Prettier 可能比较麻烦。你不必每次手动运行命令来格式化代码，可以设置自动在更改文件时进行格式化。幸运的是，Visual Studio Code（VS Code）内置了一种方法来为您执行此操作。

在 VS Code 中进入 Extensions 选项卡，搜索 Prettier。单击 Prettier – Code formatter 安装它，然后启用它。

进入 VS Code 的设置界面，方法是通过导航到”文件(File)” > “首选项(Preferences)” > “设置(Settings)”，在搜索框中搜索 “Prettier”，你会发现很多选项来帮助你配置 Prettier 扩展。

通常情况下，你可以使用默认设置。唯一需要考虑更改的是分号（如果你愿意，可以将它们删除）。否则，一切都是默认设置，但你可以按自己的意愿进行更改。

请确保启用了 format on save 选项，这样每个文件中的代码在保存该文件时都会自动格式化。要启用它，只需搜索 format on save 并勾选该框。

如果你没有使用 VS Code 或者插件无法正常工作，可以下载 onchange 库。这将在你更改文件时运行命令来格式化代码。

如何使用 Prettier 忽略某些文件

如果你对整个文件夹运行 prettier –write 命令，它会遍历每一个 node 模块。但你不应该浪费时间去格式化别人的代码！

为了解决这个问题，你需要创建一个 .prettierignore 文件，并在其中包含 node_modules 这个词。如果你对整个文件夹运行 –write 命令，它将重新格式化所有文件，但是不会处理 node_modules 文件夹中的文件。

你也可以忽略特定扩展名的文件。例如，如果你想忽略所有的 HTML 文件，只需在 .prettierignore 中添加 *.html 即可。

如何配置 Prettier

你可以通过不同的选项来配置 Prettier 的工作方式。其中一种方法是在你的 package.json 文件中添加一个 prettier 键。该键的值是一个包含所有配置选项的对象：

{
  ...
  "scripts": {
    "test": "echo /"Error: no test specified/" && exit 1"
  },
  prettier: {
    // options go here
  }
}

第二个选项（我们推荐）是创建一个.prettierrc文件。这个文件允许你进行各种自定义。

假设你不喜欢使用分号。你可以通过在文件中放置以下对象来将其删除:

{
  "semi": true,
  "overrides": [
    {
      "files": ".ts",
      "options": {
        "semi": false
      }
    }
  ]
}

“overrides”属性允许您为某些文件或文件扩展名定义自定义覆盖。在这种情况下，我们说以“.ts”结尾的所有文件（即typescript文件）不应该有分号。

使用 Prettier 和 ESLint

ESLint 是一个用于检测 JavaScript 代码错误和格式的工具。如果你正在使用 Prettier，你可能不想再使用 ESLint 进行格式化。为了同时使用它们，你需要安装和设置 eslint-config-prettier。这个工具关闭了 ESLint 处理 Prettier 已经处理的所有配置。

首先，你需要安装它：

npm i --save-dev eslint-config-prettier

接下来，将它添加到 .eslintrc 文件的 extends 列表中（确保它是列表中的最后一项）:

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ],
  "rules": {
    "indent": "error"
  }
}

现在，ESLint 会禁用所有 Prettier 已经处理的规则，以防止冲突。

使用Prettier和ESLint清理代码库

Prettier是一个理想的工具，可用于清理代码并在项目中执行一致的格式。将其与VS Code一起使用，意味着它始终可以轻松使用。

ESLint是一个必备的JavaScript工具，与Prettier相得益彰。它提供了许多功能和自定义选项，超出了基本的格式化。如果您想成为更有生产力的开发人员，请学习如何在JavaScript中使用ESLint。

The post 在 VS Code 中设置 Prettier，编写干净可读性强的代码 first appeared on Linux迷.