prettier 指“北”

关于prettier

• 版本：prettier@1.18.1

• Prettier 是什么？

  官方: Prettier is an opinionated code formatter

  • 一个代码格式工具,支持基本主流前端的语言(js, ts, Es6, Es7,markdown等等)；

  • 会根据书写的代码，重新解析和构建显示格式（即，它清除原来的格式，按照自己认为美丽的方式重新显示代码格式）

    Prettier enforces a consistent code style (i.e. code formatting that won't affect the AST) across your entire codebase because it disregards the original styling* by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

  • Prettier 不会像EsLint，TsLint，StyleLint 那样告诉你，语法哪里错了，它只会告诉你代码这么写不美观

  • 有兴趣可以探索一下prettier关心的项

• 如何使用Prettier?

  • 安装

    两种方式，两个位置，大家随意，注意官方给出的教程中，都是推荐精确版本安装的

    yarn add prettier --dev --exact

    yarn global add prettier

    ---

    npm install --save-dev --save-exact prettier

    npm install --global prettier

  • 使用方式：

    • CLI ----直接命令行 使用cli 调用相关的参数使用
    • API ----代码中引入prettier包，调用相关的API使用
    • Browser---在浏览器中使用，注意需要再引入其他依赖包
    • Plugin----通过插件使用（官方说明为扩展语言支持实现，有些想webpack的loader）
    • Pre—commit —— 配合预提交（pre-commit）工具来使用，实现提交代码前的格式化
    • Onchange ---通过使用内置的onchange 在package.json中使用，变动时格式化
    • Lint ----配合主流的Lint一起使用，比如EsLint，TsLint等等
    • Ignore----将文件或者代码，添加到“忽略清单中”，例如.prettierignore或注释

  • 配置参数说明

    • printWidth 代码行的长度， 默认是80 ， 官方建议不要超过120，即80-120之间即可
    • tabWidth 缩进长度 ，默认值2 ，2个spaces
    • tabs 是否启用tabs代替spaces， 默认值false
    • semicolon 分号，是否启用在每个声明后添加 分号，默认值true
    • quotes 引号，是否启用单引号代替双引号，默认值false
    • quotesProps 对象属性的分号，默认值"as-needed" 即在被要求是添加
    • jsxQuotes jsx语法中是否使用单引号代替双引号，默认值 false
    • trailingCommas 结尾的逗号，默认值“none”
    • BracketSpacing 对象属性和{} 之间的 空格， 默认值 true
    • jsxBrackets 是否启用jsx语法中，> 在属性的末尾，而不是移动到单独的一样，默认值为false
    • arrowFunctionParentheses 是否启用总是让箭头函数的参数括号 默认值为"aviod"
    • range 格式化范围，是否指格式化一部分，默认值start 0 end infinity
    • parser 语法解析器 默认值为none，其本身默认推断 【一般用不上】
    • filePath 指定用于推断要使用的解析器的文件名。 默认值 none【一般用不上】
    • requirePragma 是否启用注解格式化，即配置注解的格式化，不配置的不格式化，默认值：false（类似 @prettier）【当逐步将大型未格式化的代码库转换为prettier的代码库时，这非常有用。】
    • insertPragma Prettier可以在文件顶部插入一个特殊的@format标记，指定文件格式更漂亮，默认值false；
    • proseWrap 与markdown 有关系 默认值 preserve
    • htmlWhitespaseSensitivity 指定HTML文件的全局空白区域敏感度 默认值 css即尊重css
    • endOfLine 指定结尾的类型，lf |rc|crlf |auto ，默认值auto

  • 配置方式

    • .prettierrc

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

    • prettier.config.js | .prettierrc.js

      // prettier.config.js or .prettierrc.js
      module.exports = {
        trailingComma: "es5",
        tabWidth: 4,
        semi: false,
        singleQuote: true
      }; 
      

  • 注意实现：

    1. 注意 配置文件的书写，
    2. 注意可以配置忽略文件
    3. 注意在大规模替换时开启注解
    4. 注意prettier的定位
    5. 注意和各种XXLint的组合使用