更新记录

1.0.0（2022-11-11）

1. prettier的版本升级到 2.7.1
2. 修复bracketSameLine未生效问题，2.4.0版本之后jsxBracketSameLine被弃用

平台兼容性

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

简介

此插件在官方插件【formator-prettier】基础之上，进行了升级：

1. prettier的版本升级到 2.7.1
2. 修复bracketSameLine未生效问题，2.4.0版本之后jsxBracketSameLine被弃用
3. prettier.config.js文件更新，参考下面配置说明

此插件用于格式化less、sass、vue、stylus、ts、yaml代码

配置文件

点击菜单工具 -> 插件配置 -> formator-prettier -> prettier.config.js，即可打开配置文件。

如何配置格式化选项？

格式化选项配置文件是prettier.config.js,里面对应的选项说明如下：

module.exports = {
    // 一行代码的最大字符数，默认是80(printWidth: <int>)
    printWidth: 120,
    // tab宽度为2空格(tabWidth: <int>)
    tabWidth: 2,
    // 是否使用tab来缩进，我们使用空格(useTabs: <bool>)
    useTabs: false,
    // 结尾是否添加分号，false的情况下只会在一些导致ASI错误的其工况下在开头加分号，我选择无分号结尾的风格(semi: <bool>)
    semi: true,
    // 使用单引号(singleQuote: <bool>)
    singleQuote: true,
    // object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
    quoteProps: 'as-needed',
    // 在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
    jsxSingleQuote: false,
    // 尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
    trailingComma: 'all',
    // object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
    bracketSpacing: true,
    // HTML(HTML, JSX, Vue, Angular)标签的‘>’是否放在最后一行的末尾(bracketSameLine: <bool>)
    bracketSameLine: false,
    // 箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
    arrowParens: 'always',
    // vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
    vueIndentScriptAndStyle: true,
    // endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
    endOfLine: 'lf',
    parsers: {
        ".jsx": "flow",
        ".scss": "scss",
        ".ts": "typescript",
        ".less": "css",
        ".vue": "vue",
        ".nvue": "vue",
        ".ux": "vue",
        ".yml": "yaml",
    }
}

详细的配置说明可以参考options

如何支持新的语言？

1. 修改package.json配置，添加要支持的新的语言的文件后缀

   "contributes": {
   "formator": {
       "name": "Prettier",
       "class": "prettier_service.js",
       "filetypes": [
           "less",
           "sass",
           "scss",
           "vue",
           "ux",
           "ts",
           "foo"//文件后缀名
       ]
   }
   }

2. 修改prettier.config.js,将新添加的语言配置到对应的格式化处理器上。

   parsers: {
   ".jsx": "flow",
   ".scss": "scss",
   ".ts": "typescript",
   ".less": "css",
   ".vue": "vue",
   ".ux": "vue",
   ".yml": "yaml",
   ".foo":"flow"//文件后缀名对应的格式化处理器
   }