企业级项目之Prettier配置推荐（Vue和React）

prettier配置

• Prettier是一个代码格式化程序
• Prettier
• vue和react的具体配置都一样，主要看公司的代码格式要求。
  • 我的react项目，要求：对象中不能有空格 bracketSpacing: false, // 对象中的空格 默认true

自定义配置

tabWidth：指定每个缩进级别的空格数。
printWidth：最大允许行长是多少
singleQuote：使用单引号而不是双引号。
semi：在语句末尾打印分号。
trailingComma：多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。）
arrowParens：在单独的箭头函数参数周围包括括号。
jsxBracketSameLine：将>多行JSX元素的放在最后一行的末尾，而不是一个人放在下一行（不适用于自闭元素）。
requirePragma：只能将Prettier限制为仅格式化在文件顶部包含特殊注释（称为编译指示）的文件。在逐步将大型，未格式化的代码库过渡到更漂亮时，这非常有用。
htmlWhitespaceSensitivity：指定HTML文件的全局空格敏感度

项目中的prettier配置(Vue)

• .prettierrc.js文件

module.exports = {
    tabWidth: 4, // 缩进4个字符
    printWidth: 140, //超过多少换行
    singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
    semi: false, //行位是否使用分号，默认为true
    trailingComma: 'all', //是否使用尾逗号，有三个可选值"<none|es5|all>"
    arrowParens: 'avoid', // x => x
    jsxBracketSameLine: true,
    requirePragma: false, //顶部注释
    htmlWhitespaceSensitivity: 'ignore',
}

项目中的prettier配置(React)

module.exports = {
    tabWidth: 4, // 缩进4个字符
    printWidth: 120, //超过多少换行
    singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
    semi: true, //行位是否使用分号，默认为true
    trailingComma: 'all', //是否使用尾逗号，有三个可选值"<none|es5|all>"
    arrowParens: 'avoid', // x => x
    jsxBracketSameLine: true,
    requirePragma: false, //顶部注释
    bracketSpacing: false, // 对象中的空格 默认true
    htmlWhitespaceSensitivity: 'ignore',
};