美文网首页
Prettier 学习笔记

Prettier 学习笔记

作者: Piszz | 来源:发表于2018-06-29 18:06 被阅读0次
    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. 自定义配置
        .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 学习笔记

          本文链接:https://www.haomeiwen.com/subject/hehgyftx.html