Prettier格式化字符串代码

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

一.简述

• 想必prettier大家都熟悉，前端的小伙伴们如果用vscode那就可能用过这个格式化代码工具插件

• 但是今天我说的prettier不仅是格式化代码的工具插件，它还能在代码中将字符串格式化对于的代码格式。

二.格式化字符串代码

• 安装(根据自己的包管理工具)

  • npm install prettier --save

• 使用

  // 引入prettier
  import prettier from "prettier/standalone";
  // 引入格式化插件 Html
  import parserHtml from "prettier/parser-html";
  // 封装格式化代码函数
  /**
      code:代码字符串
  */
  export function prettierCode(code) {
    try {
      // 参数1：代码字符串，参数2：格式化配置
      return prettier.format(code, {
        // 使用html格式
        parser: "html",
        // 使用引入的插件parserHtml格式化
        plugins: [parserHtml],
        // 允许vue脚本
        vueIndentScriptAndStyle: true,
      });
    } catch (error) {
      // 如果格式化失败,返回源码
      return code;
    }
  }
  ​
  

注意：

• 需要在plugins里引入相应的格式插件。
• 默认支持的格式化插件

• 效果

  • 未格式化字符串

    <template><div id="app"><router-view/></div></template>
    <script>export default {name: 'MagicTemplateWebApp',data() {return {};},mounted() {},methods: {},};
    </script>
    <style lang="scss"></style>
    

  • 格式化后的字符串

  <template>
  <div id="app">
      <router-view/>
      </div>
  </template>
  <script>
      export default {
          name: 'MagicTemplateWebApp',
  ​
          data() {
              return {
  ​
              };
          },
  ​
          mounted() {
  ​
          },
  ​
          methods: {
  ​
          },
      };
  </script>
  <style lang="scss">
  </style>
  

• 来来来，再喝一杯

  • 官网与格式化相关链接

  • 这是源码里参数2的一些配置

    export interface RequiredOptions extends doc.printer.Options {
        /**
         * 在语句末尾打印分号。
         * @default true
         */
        semi: boolean;
        /**
         * 使用单引号而不是双引号。
         * @default false
         */
        singleQuote: boolean;
        /**
         * 在JSX中使用单引号。
         * @default false
         */
        jsxSingleQuote: boolean;
        /**
         * 尽可能打印尾部逗号。
         * @default 'es5'
         */
        trailingComma: 'none' | 'es5' | 'all';
        /**
         * 打印对象文本中括号之间的空格。
         * @default true
         */
        bracketSpacing: boolean;
        /**
         * 将多行HTML（HTML、JSX、Vue、Angular）元素的“〉”放在最后一行的末尾，而不是
         * 单独在下一行（不适用于自闭元件）。
         * @default false
         */
        bracketSameLine: boolean;
        /**
         * 将多行JSX元素的“〉”放在最后一行的末尾，而不是单独放在下一行。
         * @default false
         * @deprecated use bracketSameLine instead
         */
        jsxBracketSameLine: boolean;
        /**
         * 只格式化文件的一个段。
         * @default 0
         */
        rangeStart: number;
        /**
         * 只格式化文件的一个段。
         * @default Infinity
         */
        rangeEnd: number;
        /**
         * 指定要使用的解析器。
         */
        parser: LiteralUnion<BuiltInParserName> | CustomParser;
        /**
         * 指定输入文件路径。这将用于进行解析器推断。
         */
        filepath: string;
        /**
         * Prettier可以将自己限制为仅格式化在文件顶部包含特殊注释（称为杂注）的文件。
         * 这在逐渐将大型、无格式的代码基转换为更漂亮的代码基时非常有用。
         * @default false
         */
        requirePragma: boolean;
        /**
         * Prettier可以在文件的顶部插入一个特殊的@format标记
         * 这个文件已经用prettier格式化了。这在与配合使用时效果很好
         * --require-pragma选项。如果文档块已位于
         * 文件，则此选项将添加一个带有@format标记的换行符。
         * @default false
         */
        insertPragma: boolean;
        /**
         * 默认情况下，Prettier会将降价文本按原样换行，因为一些服务使用对换行符敏感的渲染器。
         * 在某些情况下，您可能希望使用编辑器/查看器软包装，因此此选项允许您选择退出。
         * @default 'preserve'
         */
        proseWrap: 'always' | 'never' | 'preserve';
        /**
         * 在唯一的箭头函数参数周围包括括号。
         * @default 'always'
         */
        arrowParens: 'avoid' | 'always';
        /**
         * 提供支持新语言的能力。
         */
        plugins: Array<string | Plugin>;
        /**
         * 指定插件目录路径，如果插件没有安装在与prettier相同的“node_modules”中，则搜索插件。
         */
        pluginSearchDirs: string[];
        /**
         * 如何处理HTML中的空格。
         * @default 'css'
         */
        htmlWhitespaceSensitivity: 'css' | 'strict' | 'ignore';
        /**
         * 要应用的行尾字符。
         * @default 'lf'
         */
        endOfLine: 'auto' | 'lf' | 'crlf' | 'cr';
        /**
         * 引用对象中的特性时更改。
         * @default 'as-needed'
         */
        quoteProps: 'as-needed' | 'consistent' | 'preserve';
        /**
         * 是否缩进内部的代码 <script>以及<style>Vue文件中的标记。
         * @default false
         */
        vueIndentScriptAndStyle: boolean;
        /**
         * 控制Prettier是否格式化文件中嵌入的带引号的代码。
         * @default 'auto'
         */
        embeddedLanguageFormatting: 'auto' | 'off';
    }
    

  • 默认的parser参数

    export type BuiltInParserName =
        | 'angular'
        | 'babel-flow'
        | 'babel-ts'
        | 'babel'
        | 'css'
        | 'espree'
        | 'flow'
        | 'glimmer'
        | 'graphql'
        | 'html'
        | 'json-stringify'
        | 'json'
        | 'json5'
        | 'less'
        | 'lwc'
        | 'markdown'
        | 'mdx'
        | 'meriyah'
        | 'scss'
        | 'typescript'
        | 'vue'
        | 'yaml';