更漂亮,如何从中获得最大的作用
#javascript #网络开发人员 #初学者 #prettier

介绍

什么更漂亮? Prettier是一种自以为是的代码格式器,它支持多种语言并与大多数代码编辑器集成。必须强调的是,很漂亮,因为它提供了很少的可配置属性(截至2023年6月26日,23)。

代码格式是什么意思?基本的漂亮解析和根据配置文件中设置的规则重印代码。可以通过以下任务来完成:

安装漂亮的插件(强烈建议)和/或

运行更漂亮的 - 写入。命令

更漂亮的规则和最佳实践

在配置更漂亮的设置时,建议优先考虑简单性,因为该工具的理念植根于其自以为是的性质。 Google的打字稿样式指南还反映了这种方法,建议将更漂亮的配置保持最小,以完全接受其自以为是的格式决策。

// https://github.com/google/gts/blob/main/.prettierrc.json
{
  "bracketSpacing": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}

与其他工具的更漂亮的集成

Prettier插件(VSCODE和大多数其他代码编辑器)

Prettier插件通常允许您设置代码编辑器,以每次保存时重新格式化文件中的代码。这非常方便,因为您不必再​​用手工格式化代码了。 https://prettier.io/docs/en/editors.html

漂亮和管道/赫斯基

,由于并非所有同事都会确定插件,并确保对代码进行格式化,因此需要自动执行该插件。为此,建议使用沙哑的人来运行更漂亮的预先投入。有关如何做的教程,请查看此处 - https://prettier.io/docs/en/precommit.html。此外,添加更漂亮的支票可能值得。在您的管道中,以确保代码符合更漂亮的规则。

漂亮和Eslint

通过结合漂亮的Eslint,您可以利用这两种工具的优势。 Prettier负责格式化您的代码,确保一致和美观的风格。另一方面,ESLINT提供了强大的配置功能来实施代码质量和最佳实践。

Prettier-Eslint插件将Prettier的格式功能与ESLINT的配置功能相结合。它使用Prettier格式化您的代码,然后应用ESLINT -FIX命令,以确保遵守您的ESLINT配置。这使您可以从漂亮的强大格式中受益,同时保持与Eslint保持一致性。

https://github.com/prettier/prettier-eslint

eslint-plugin-prettier插件是一个ESLINT插件,它以ESLINT规则为特色,并将差异报告为单个ESLINT问题。

https://www.npmjs.com/package/eslint-plugin-prettier

漂亮和XML

默认情况下,Prettier不支持XML,如果您确实需要更漂亮来支持XML,则有一个可以帮助您的插件。 https://www.npmjs.com/package/@prettier/plugin-xml

不幸的是,Pretteir XML与其他更漂亮的设置没有盒子,因此您需要进行一些其他配置。

         module.exports = {
            overrides: [
                {
                    files: "*/",
                    options: {
                       "bracketSpacing": false,
                       "singleQuote": true,
                       "trailingComma": "es5",
                       "arrowParens": "avoid"
                      }        
                },
                {
                    files: "*.xml",
                    options: {
                        parser: "xml",
                        plugins: ["@prettier/plugin-xml"], 
                        tabWidth: 4,
                        printWidth: 120, 
                        bracketSameLine: true,
                        singleAttributePerLine: true, 
                        useTabs: true
                    }
                }
            ]
          };

当您在沙哑的情况下打电话时,您可以做这样的事情以确保XML格式化 -

“ Prettier:XML”:“ Prettier -Parser XML -Config ./prettier.config.js -write'*/。xml'”

更漂亮的替代品

eslint

Eslint代码格式仍然是一个宝贵的选择,尽管出现了更漂亮的代码格式。首先,ESLINT包括更广泛的范围,允许代码格式以及用于检测潜在错误和执行最佳实践的静态分析。这种灵活性有助于保持一致的代码质量和防止常见错误。其次,ESLINT提供了庞大的插件和配置生态系统,使开发人员能够根据其特定的项目需求自定义和量身定制覆盖规则。这种配置性级别可确保对各种代码库和编码样式的适应性。因此,ESLINT仍然是代码格式及以后的可靠且强大的工具。-https://www.npmjs.com/package/eslint

标准

标准仍然是更漂亮的强大替代品。它通过将代码格式与一组预定义的绒布规则相结合,提供了全面的解决方案。这些规则不仅涵盖了代码样式约定,还包括潜在的错误和最佳实践。 Standard的预定性质消除了对广泛配置的需求,从而使其快速易于设置。尽管Prettier仅专注于代码格式,但Standard提供了一种整体方法,可确保代码质量,一致性和遵守行业标准。因此,对于寻求多合一解决方案的代码格式和覆盖的开发人员,标准仍然是可靠的选择。

https://www.npmjs.com/package/standard

js-beautify

js-beautify与更漂亮相比仍然是可行的选择。它专门从事代码格式,并为凹痕,间距和其他样式偏好提供了广泛的自定义选项。虽然漂亮的专注于强制执行一致的格式化样式,但JS-Beautify允许开发人员根据其特定需求量定制格式规则。它支持各种编程语言,并在处理不同的代码库方面具有灵活性。 JS-Beautify微调格式化规则的能力使其成为优先定制的开发人员,同时维护代码可读性和美观的开发人员。因此,JS-beautify仍然是与更漂亮的代码格式需求的强大竞争者。

https://www.npmjs.com/package/js-beautify

结论

总而言之,利用更漂亮的全部潜力涉及拥抱其自以为是的性质,并使配置尽可能简单。通过遵循漂亮的哲学,开发人员可以从一致和美观的代码格式中受益。将更漂亮的与其他工具相结合,例如ESLINT增强代码质量和遵守最佳实践。尽管ESLINT,Standard和JS-Beautify等替代选项提供了不同的功能和自定义水平,但Prettier仍然是实现代码可读性和美学的可靠选择。最终,选择正确的代码格式工具取决于开发团队的特定需求和偏好。