.prettierrc.js详解

XOTVT • 2025-02-05 13:05 • 编程

一、.prettierrc.js是什么？

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
};

.prettierrc.js是一个用于配置Prettier插件的配置文件。在项目中，我们可以根据该文件来统一整个项目的代码风格。上述代码是该文件的一个示例，其中涵盖了5个配置项。分别是加入分号、去掉行末逗号、使用单引号、一行最大字符数、缩进空格数。接下来我们将对这5个配置项作进一步的详细介绍。

二、.prettierrc.js常见配置

1. semi

semi: true,

该选项指定是否使用分号。true表示会在语句结尾处加入分号，false则相反。若省略该选项，则默认为true。

2. trailingComma

trailingComma: 'es5',

该选项指定是否在行末添加逗号。’es5’表示在ES5中允许添加行末逗号，同时也是Prettier默认选项。’none’表示不允许加逗号，’all’表示在后面都加逗号。

3. singleQuote

singleQuote: true,

该选项指定是否使用单引号。true表示使用单引号，false则使用双引号。

4. printWidth

printWidth: 100,

该选项指定一行最多允许的字符数。当代码中的一行超过该限制时，Prettier会自动将代码进行换行。建议设置为80到100之间的数字。

5. tabWidth

tabWidth: 2,

该选项指定使用几个空格代替一个Tab键。一般建议为2或4个空格。

三、.prettierrc.js高级用法

1. overrides

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  overrides: [
    {
      files: '*.tsx',
      options: {
        trailingComma: 'none',
        jsxBracketSameLine: true,
      },
    },
  ],
};

有些时候，我们需要为不同类型的文件指定不同的代码风格。在这种情况下，我们可以使用overrides选项。如上代码所示，当文件类型为.tsx时，将不使用逗号，且JSX标签的结束括号不与其开头在同一行。

2. plugins

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  plugins: ['./path/to/plugin'],
};

Prettier插件提供了一些额外的功能，我们可以通过plugins选项来配置插件。在上述代码中，我们可以看到我们添加了一个名为path/to/plugin的插件。

3. requirePragma和insertPragma

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  requirePragma: true,
  insertPragma: true,
};

requirePragma和insertPragma选项指定是否在文件顶部注释中添加Prettier标注。其中requirePragma选项指定是否仅对带注释标记的文件运行Prettier，而insertPragma选项则指定在文件顶部添加标记。

四、.prettierrc.js的应用

在项目中，我们可以根据需求修改.prettierrc.js文件的配置项，以达到规范化整个项目代码的目的。在每次提交代码前，使用Prettier自动格式化代码，能够避免因代码风格不一而引起的错误，提高代码的可读性和可维护性。

五、总结

.prettierrc.js是一个用于配置Prettier插件的配置文件，我们可以根据需求来配置文件的选项。使用Prettier能够规范化整个项目代码，提高代码的可读性和可维护性。

原创文章，作者：XOTVT，如若转载，请注明出处：https://www.506064.com/n/334319.html