.prettierrc.js詳解

一、.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能夠規範化整個項目代碼，提高代碼的可讀性和可維護性。