Prettier 學習筆記

Prettier

特點

• 一鍵改變代碼風格，無須改變開發風格

=> 1. 安裝Node 環境

• 自行安裝

=> 2. 安裝 Prettier

• 全局安裝
  np​​m install --global prettier
• 局部安裝
  np​​m 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, // 用單引號< /span>
      "bracketSpacing": true // 對象&數組是否追加空格
    }

==> 6. 運行

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

取用於：Prettier 学习笔记