prettier-plugin-verticalize weekly downloads statistics

prettier-plugin-verticalize

这是一个 Prettier v3+ 插件，用于对代码中的变量声明、枚举属性、赋值表达式等进行垂直对齐。

目前支持的对齐：

• 变量声明
• 枚举值
• 赋值表达式
• 行尾注释

⚠️ 本插件依赖等宽字体才能正确显示对齐效果。请确保编辑器使用的是等宽（monospace）字体，例如 Fira Code, JetBrains Mono, Consolas, Monaco 等。

效果预览

安装

npm install -D prettier prettier-plugin-verticalize

需要 Prettier 3.x。

启用

在 Prettier 配置文件（prettier.config.js、prettier.config.cjs 或 .prettierrc）中注册插件。

// prettier.config.js
import prettierPluginVerticalize from 'prettier-plugin-verticalize'
export default {
  plugins: [prettierPluginVerticalize],
}

// prettier.config.cjs
module.exports = {
  plugins: [require('prettier-plugin-verticalize')],
}

// .prettierrc
{
  "plugins": ["prettier-plugin-verticalize"]
}

配置选项

选项	类型	默认值	说明
minGroupSize	number	2	最少几条语句视为一组进行对齐
maxWidthDiff	number	20	组内语句之间最大宽度差异
alignTrailingComments	boolean	true	是否启用行尾注释对齐
alignEnums	boolean	true	是否启用枚举对齐
alignVariableDeclaration	boolean	true	是否启用变量声明对齐
alignAssignment	boolean	true	是否启用赋值语句对齐
alignTrailingCommentsMinGroupSize	number	-	单独设置行尾注释 minGroupSize
alignTrailingCommentsMaxWidthDiff	number	-	单独设置行尾注释 maxWidthDiff
alignEnumsMinGroupSize	number	-	单独设置枚举 minGroupSize
alignEnumsMaxWidthDiff	number	-	单独设置枚举 maxWidthDiff
alignVariableDeclarationMinGroupSize	number	-	单独设置变量声明 minGroupSize
alignVariableDeclarationMaxWidthDiff	number	-	单独设置变量声明 maxWidthDiff
alignAssignmentMinGroupSize	number	-	单独设置赋值语句 minGroupSize
alignAssignmentMaxWidthDiff	number	-	单独设置赋值语句 maxWidthDiff

minGroupSize

// 当 `minGroupSize` 设置为 3 时，少于 3 行，不对齐
const name = 'rio'
const age = 18

// 当 `minGroupSize` 设置为 3 时，大于等于 3 行，对齐
const foo       = 1
const barz      = 2
const component = 3

maxWidthDiff

// 当 `maxWidthDiff` 设置为 20 时
console.log('1234')       // 注释前长度差距为6
console.log('1234567890') // 注释前长度差距为6

const number1234       = 1 
const number1234567890 = 1

// 当 `maxWidthDiff` 设置为 5 时
console.log('1234') // 注释前长度差距为6
console.log('1234567890') // 注释前长度差距为6

const number1234 = 1
const number1234567890 = 1