什么更漂亮？

您是否曾经花了几个小时格式化代码，只是在整个项目中发现不一致之处？ Prettier可以提供帮助！这是一种自动为您格式化代码的工具，使其保持一致，可读且易于维护。

如何安装更漂亮

不用担心，安装更漂亮很容易！您只需要在终端中运行命令即可。如果您使用NPM，则可以运行：

npm install --save-dev prettier
yarn add -D prettier

在运行更漂亮之前，我们可以通过创建.prettierrc文件进行配置。这是可选的，如果您不创建一个更漂亮的话，将简单地使用其自身的默认值。

这是示例配置：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

为了学习，我创建了一个简单的项目并在其上安装更漂亮：

npm init -y

然后在项目中，我添加了简单的JS文件，例如Bellow！

function
 test() { let x=[ 1,  1 ,123]; x.push( 2); return x 
}

console.log(
test())

如此混乱！

但是，如果您运行以下命令，您会看到一切都会变得完美：

npx prettier - write index.js

忽略代码

您的项目中可能有一些文件，您不想在自动形成时浪费资源。要处理这些文件，只需创建一个带有您要忽略的文件的名称（或模式）的.prettierignore文件：

build
node_modules

您也可能会在文件中有意以某种方式格式化的文件中有代码，而您不希望覆盖更漂亮。

这是JS文件中的示例：

// prettier-ignore
const axiosInstance => (ctx) => {
...

忽略评论可能会有所不同，您可以找到完整列表here。

如何使用更漂亮

一旦安装更漂亮，就可以以几种不同的方式使用它：

1。使用CLI
如果您对命令行感到满意，则可以使用更漂亮的CLI格式化代码。刚运行：

npx prettier --write script.js

这将格式化项目中的所有JavaScript文件，并将更改写入文件。

2。使用编辑插件
如果您喜欢使用编辑器，则可以安装与更漂亮的集成的插件。例如，如果您使用Visual Studio代码，则可以安装“漂亮的代码格式化”扩展名。

安装了它后，您需要使用File > Preferences > Settings菜单并启用它：

3。使用沙哑的挂钩
如果要自动化格式化过程，则可以与Husky建立一个预先承诺的挂钩。在提交提交之前，您将在您提交的所有文件上都更漂亮。在这里如何设置它：
如何将更漂亮的赫斯基整合

安装沙哑的

您需要首先安装赫斯基。您可以使用以下命令来执行此操作：

npm install husky --save-dev
yarn add -D husky

2。启用git钩
接下来，您需要运行bellow命令，以自动将定义的钩子与沙哑添加到git

npx husky add .husky/pre-commit "yarn format"

这将在您的项目中创建一个类似Bellow的目录，每个提交都将运行以下预命令命令：

3。编辑软件包
接下来，您需要配置格式命令以在提交之前运行更漂亮。打开项目中的package.json文件并添加以下代码：

"format": "prettier --write . && git add -A ."

我使用git add存储所有这些更改并将它们包括在提交中。

现在，您都设置了！每当您运行git commit时，赫斯基都会在进行更改之前使用漂亮的代码自动格式化代码。

就是这样！

可以将Prettier集成到您的连续集成工作流程中，以便每个团队成员在提交代码之前自动运行它。借助git差异，合并和拉的请求，所有团队成员所做的所有代码都将匹配相同的模式，因此报告更改的时间要少得多。

带有更漂亮且沙哑的，您可以使代码库保持一致，可读且易于维护。

快乐编码！