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 使用

更新中

你可能感兴趣的:(Prettier 学习笔记)