Prettier 学习笔记

Prettier | 让前端更加专注业务

Prettier

特点

• 一键改变代码风格，无需改变开发风格

=> 1. 安装Node 环境

• 自行安装

=> 2. 安装 Prettier

• 全局安装
  npm install --global prettier
• 局部安装
  npm install --save-dev --save-exact prettier

=> 3. 添加.prettierrc 配置文件(项目根目录)

• 创建文件（可以自定义其他名称）
  touch .prettierrc

=> 4. 修改.prettierrc 配置文件

• prettierrc 配置文件支持三种格式
  • JSON：

        {
          "printWidth": 100,
          "parser": "flow"
        }
    

  • JS：

        // .prettierrc.js
        module.exports = {
          printWidth: 100,
          parser: "flow"
        }
    

  • YAML：

        {
          "printWidth": 100,
          "parser": "flow"
        }
    

==> 5. 自定义配置

• 官网Options

• 部分配置

    .prettierrc  // js 格式 -- 方便备注
   export.modules = {
      "semi": false,                // 句末加分号
      "singleQuote": true,          // 用单引号
      "bracketSpacing": true        // 对象&数组是否追加空格
    }

==> 6. 运行

• 执行格式化
  prettier --config 配置位置 --write 需要格式化的文件
• 基础用法
  prettier --config ./.prettierrc --write ./index.js
• 扩展用法（自定义文件配置以及格式化vue文件）
  prettier --config ./pre.js --write ./index.vue

==> 7. 结合Eslint 使用

更新中