HbuilderX代码格式化插件配置

点击查看代码

//.prettierrc.js
module.exports = {
  // 一行最多可以有多少个字符
  printWidth: 160,
  // 一个tab相当于多少个空格
  tabWidth: 4,
  // 是否使用使用tab缩进
  useTabs: false,
  // 是否在每个语句的末尾添加分号
  semi: true,
  // 使用单引号而不是双引号。
  singleQuote: false,
  // 在JSX中使用单引号而不是双引号
  jsxSingleQuote: false,
  // 对象的key是否用引号括起来  "as-needed" - 仅在需要时在对象属性周围添加引号   "consistent" - 如果对象中的至少一个属性需要加引号，就对所有属性加引号   "preserve" - 按照对象属性中引号的输入用法
  quoteProps: 'consistent',
  // 若为true，文件顶部加了 /** @prettier */或/** @format */的文件才会被格式化
  requirePragma: false,
  // Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了。在使用 --require-pragma参数处理一连串的文件时这个功能将十分有用。如果文件顶部已经有一个doclock，这个选项将新建一行注释，并打上@format标记。
  insertPragma: false,
  // 超过最大宽度是否换行 "always" - 如果超过最大宽度，请换行。 "never" - 不要换行。  "preserve" - 按原样显示。首先在v1.9.0中提供
  proseWrap: 'preserve',
  // 在单个箭头函数参数周围加上括号    avoid" - 尽可能省略parens。例：x => x  "always" - 始终包括parens。例：(x) => x
  arrowParens: 'avoid',
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  bracketSpacing: true,
  // 置统一的行结尾换行符  "lf" – 仅换行(\n),在Linux和macOS以及git repos内部通用 "crlf" - 回车符+换行符(\r\n)在Windows上很常见  "cr" - 仅回车符(\r)，很少使用   "auto" - 保持现有的行尾（通过查看第一行后的内容对一个文件中的混合值进行归一化）
  endOfLine: 'auto',
  // 是否显示HTML文件中的空格。 有效选项： 'css' -遵循 CSS 属性的默认值。 'strict' - 所有标签周围的空格（或缺少空格）被认为是重要的。 'ignore' - 所有标签周围的空格（或缺少空格）被认为是微不足道的
  htmlWhitespaceSensitivity: 'strict',
  // 如果为true则把'>'放在末尾而不是单独放一行
  bracketSameLine: true,
  // 是否格式化嵌入在文件中的带引号的代码
  embeddedLanguageFormatting: 'auto',
  // 在 HTML、Vue 和 JSX 中每行强制实施单个属性
  singleAttributePerLine: true,
  // 在数组对象等末尾添加逗号  "none" - 没有尾随逗号。 "es5" - 在ES5中有效的尾随逗号（对象，数组等）  "all" - 尽可能使用尾随逗号（包括函数参数）。这需要 nodejs 8
  trailingComma: 'es5',
  // 是否给vue中的 <script>和<style>标签加缩进
  vueIndentScriptAndStyle: true,

  // 配置文件的解析器(建议使用默认值)
  parsers: {
    '.md': 'markdown',
    '.json': 'json',
    '.js': 'flow',
    '.jsx': 'flow',
    '.njs': 'flow',
    '.sjs': 'flow',
    '.wxs': 'flow',
    '.css': 'css',
    '.nss': 'css',
    '.wxss': 'css',
    '.acss': 'css',
    '.ttss': 'css',
    '.qss': 'css',
    '.scss': 'scss',
    '.ts': 'typescript',
    '.less': 'less',
    '.vue': 'vue',
    '.nvue': 'vue',
    '.ux': 'vue',
    '.yml': 'yaml',
    '.html': 'html',
    '.svg': 'html',
    '.wxml': 'html',
    '.nml': 'html',
    '.axml': 'html',
    '.swan': 'html',
    '.ttml': 'html',
    '.qml': 'html',
  },
};