如何将Prettier与ESLint和stylelint集成

by Abhishek Jain

通过阿比舍克·Ja那

如何将Prettier与ESLint和stylelint集成 (How to integrate Prettier with ESLint and stylelint)

或如何再也不用担心代码样式 (or How to never worry about code styling again)

ESLint and stylelint are really amazing tools that allow you to enforce coding patterns among your teams. This has many benefits, like outputting better and more consistent code, getting rid of useless diffs in commits (newline, indentation, et al.) among many others.

ESLint和stylelint确实是非常了不起的工具，可让您在团队之间实施编码模式。 这有很多好处，例如输出更好和更一致的代码，消除许多无用的提交差异(换行符，缩进等)。

But over time, this can prove to be a bit of a hassle among the developers of a team, who find it an extra mental burden to manually add semicolons, newlines, indentations, etc just to conform to the lint rules. This is where a code formatting tool like Prettier comes in.

但是随着时间的流逝，这对于团队的开发人员可能会有些麻烦，他们发现手动添加分号，换行符，缩进等只是为了符合皮棉规则，这是一个额外的精神负担。 这是像Prettier这样的代码格式化工具出现的地方。

Prettier can be set up to automatically format your code according to some specified rules. If you are using VSCode, you can even have your code be formatted whenever you hit save (I’m sure there must ways to set this up in other editors but I haven’t looked into it.)

可以将Prettier设置为根据某些指定规则自动设置代码格式。 如果您使用的是VSCode，甚至可以在每次单击保存时对代码进行格式化(我相信必须有其他方法可以在其他编辑器中进行设置，但我没有对此进行研究。)

However, you don’t want to create a new Prettier config file, since you already have all the formatting related rules specified in your ESLint and stylelint config files. So, we will need some magic for that. ✨

但是，您不想创建一个新的Prettier配置文件，因为您已经在ESLint和stylelint中指定了所有与格式相关的规则 配置文件。 因此，我们需要一些魔术。 ✨

Let’s now dive into a step by step of how to set this all this up, and also how to format all of your existing code according to the lint rules. This guide assumes that your project already has ESLint and stylelint set up with their .eslintrc and .stylelintrc files.

现在，让我们逐步介绍如何设置所有这些内容，以及如何根据lint规则格式化所有现有代码。 本指南假定您的项目已经使用其.eslintrc和.stylelintrc文件设置了.eslintrc和.stylelintrc 。

第1部分：格式化现有代码库 (PART 1: Formatting the existing codebase)

第1步 (Step 1)

Install prettier-eslint, which is a tool that formats your JavaScript using Prettier followed by eslint --fix. The --fix is an ESLint feature that attempts to automatically fix some problems for you.

安装prettier-eslint ，这是一个使用eslint --fix格式化JavaScript的工具。 --fix是一种ESLint功能，可尝试自动为您解决一些问题。

npm install --save-dev prettier-eslint

This tool infers the equivalent Prettier config options from your existing .eslintrc file. So you shouldn’t need to create a new .prettierrc file in most cases.

此工具从您现有的.eslintrc文件中推断出等效的Prettier配置选项。 因此，在大多数情况下，您无需创建新的.prettierrc文件。

第2步 (Step 2)

Install prettier-eslint-cli. This is the CLI tool that’ll help you run all of your files through prettier-eslint at once.

安装prettier-eslint-cli 。 这是CLI工具，可帮助您通过更漂亮的环境立即运行所有文件。

npm install --save-dev prettier-eslint-cli

第三步 (Step 3)

Install prettier-stylelint, which is a tool that formats your CSS/SCSS with Prettier followed by stylelint —-fix. Like ESLint, --fix is a stylelint feature that attempts to automatically fix some problems for you.

安装prettier-stylelint ，这是一个使用stylelint —-fix格式化CSS / SCSS的工具。 像ESLint一样，-- --fix是stylelint功能，它会尝试自动为您解决一些问题。

npm install prettier-stylelint --save-dev

This tool also attempts to create a Prettier config based on the stylelint config.

该工具还尝试基于stylelint配置创建一个Prettier配置。

Note that unlike prettier-eslint, you don’t have to install another package for its CLI since that is already included in it.

请注意，与prettier-eslint不同，您不必为其CLI安装另一个软件包，因为它已经包含在其中。

第4步 (Step 4)

Write scripts inside your package.json targeting the existing files in your codebase that you wish to run through prettier-eslint and prettier-stylelint.

在package.json内编写脚本，以希望通过prettier-eslint和prettier-stylelint运行的代码库中的现有文件为目标。

"scripts": {

"fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",

"fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "

}

As you can see, I am targeting all of my existing JS and JSX and all of my existing CSS and SCSS, respectively.

如您所见，我分别针对所有现有的JS和JSX以及所有现有CSS和SCSS。

The --write flag writes the changes in-place for the file currently being formatted. So, be careful and make sure that all of your existing files are under source control and that there are no uncommited changed.

--write标志将当前正在格式化的文件的更改写入到位。 因此，请小心并确保所有现有文件都在源代码控制下，并且没有未提交的更改 。

第5步 (Step 5)

Run the scripts!

运行脚本！

npm run fix-codenpm run fix-styles

Now, you can check-in all of these new changes as a single big commit (maybe even from a temporary git user, if you don’t wanna pollute your own git history.)

现在，您可以将所有这些新更改作为一个大的提交来检入(如果您不想污染自己的git历史记录，甚至可以从临时git用户那里检入)。

第2部分：设置VSCode (Part 2: Setting up VSCode)

Now that your existing codebase is formatted, its time to make sure that all the code being written henceforth is formatted automatically.

现在，您现有的代码库已经格式化，现在可以确保以后编写的所有代码都已自动格式化。

第1步 (Step 1)

Install the Prettier, ESLint, and stylelint extensions for VSCode:

为VSCode安装Prettier，ESLint和stylelint扩展：

Prettier - Code formatter - Visual Studio MarketplaceExtension for Visual Studio Code - VS Code plugin for prettier/prettiermarketplace.visualstudio.comESLint - Visual Studio MarketplaceExtension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.marketplace.visualstudio.comstylelint - Visual Studio MarketplaceExtension for Visual Studio Code - Modern CSS/SCSS/Less lintermarketplace.visualstudio.com

更漂亮-代码格式化程序- 用于Visual Studio Code的 Visual Studio Marketplace 扩展-用于更漂亮/更漂亮的VS Code插件 marketplace.visualstudio.com ESLint- 用于Visual Studio Code的 Visual Studio Marketplace 扩展-将ESLint JavaScript集成到VS Code中。 marketplace.visualstudio.com stylelint-Visual Studio Code的 Visual Studio市场 扩展-现代CSS / SCSS / Less linter marketplace.visualstudio.com

第2步 (Step 2)

Configure a few VSCode settings:

配置一些VSCode设置：

"prettier.eslintIntegration": true — tells Prettier to use prettier-eslint instead of Prettier

"prettier.eslintIntegration": true true-告诉Prettier使用prettier-eslint而不是Prettier

"prettier.stylelintIntegration": true — tells Prettier to use prettier-stylelint instead of Prettier

"prettier.stylelintIntegration": true —告诉Prettier使用prettier-stylelint而不是Prettier

"eslint.autoFixOnSave": false — we don’t need ESLint to fix our code for us directly, since prettier-eslint will be running eslint --fix for us anyways.

"eslint.autoFixOnSave": false -我们不需要ESLint直接为我们修复代码，因为无论如何eslint --fix -eslint都会为我们运行eslint --fix 。

"editor.formatOnSave": true — runs Prettier with the above options on every file save, so you never have to manually invoke VSCode’s format command.

"editor.formatOnSave": true —在每个文件保存时使用以上选项运行"editor.formatOnSave": true ，因此您不必手动调用VSCode的format命令。

Additionally, you can check-in the above workplace settings to source control so its easier for other team members to set up their editors. You can do so by creating a .vscode folder at the root of your project and putting all of the above rules in a settings.json file.

此外，您可以签入上述工作场所设置以进行源代码控制，以便其他团队成员更轻松地设置他们的编辑器。 .vscode您可以在项目的根目录下创建一个.vscode文件夹，然后将上述所有规则放在settings.json文件中。

Optionally, you can tell Prettier to ignore formatting certain patterns of files. To do this, just add a .prettierignore file to the root of your project specifying the paths to ignore. For instance:

(可选)您可以告诉Prettier忽略格式化某些文件模式。 为此，只需将.prettierignore文件添加到项目的根目录，指定要忽略的路径。 例如：

strings.jsonscripts/*

And that’s it! Never worry about code styling again ?

就是这样！ 再也不用担心代码样式化了吗？

This article is by no means intended to be an exhaustive guide, but rather an introduction to what is possible with the amazing tools mentioned herein. I recommend opening up the official GitHub pages for each to learn more about how to utilise these tools more effectively for your specific workflow.

本文绝不旨在作为详尽的指南，而只是对本文提到的惊人工具可能实现的介绍。 我建议为每个站点打开GitHub官方页面，以详细了解如何针对特定工作流程更有效地利用这些工具。

Please write a comment below for any help, suggestion, etc.

请在下面写评论以获取任何帮助，建议等。

参考文献 (References)

https://prettier.io/docs/en/https://stylelint.io/user-guide/https://eslint.org/https://github.com/prettier/prettier-vscodehttps://github.com/prettier/prettier-eslinthttps://github.com/prettier/prettier-eslint-clihttps://github.com/hugomrdias/prettier-stylelinthttps://www.youtube.com/watch?v=YIvjKId9m2c

https://prettier.io/docs/zh-CN/https://stylelint.io/user-guide/https://eslint.org/https://github.com/prettier/prettier-vscodehttps://github。 com / prettier / prettier-eslinthttps：//github.com/prettier/prettier-eslint-clihttps：//github.com/hugomrdias/prettier-stylelinthttps：//www.youtube.com/watch？v = YIvjKId9m2c

翻译自: https://www.freecodecamp.org/news/integrating-prettier-with-eslint-and-stylelint-99e74fede33f/