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

更新中

 
 

6人点赞

 
 
"

作者:Piszz
链接:https://www.jianshu.com/p/5f7dbffc257e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

prettier配置项说明的更多相关文章

  1. VSCode-Prettier和ESLint如何和睦共处?

    1 在VSCode中单独使用Prettier保存代码自动格式化的配置方法 1.1 为什么要使用Prettier? 手动调整代码格式,不仅低效,而且在团队协作开发中,无法保证代码风格统一,所以需要引入自 ...

  2. Prettier-Code Formater代码格式化插件使用教程

    目录 Prettier-Code Formater代码格式化插件使用教程 插件的安装 插件的使用 方式一: 配置VScode代码格式化后, 结合VScode快捷键使用 方式二: CLI中使用命令行的方 ...

  3. eslint+prettier 的 VSCode配置项

    { "files.autoSave": "off", "editor.fontSize": 12, "terminal.integ ...

  4. Prettier来统一代码风格

    prettier是一款解决代码风格问题的代码格式化工具,功能强大,简单易用,支持多语言,减少配置项. 前端开发过程中每个人写JavaScript的代码风格都不一样,又不能说别人写的代码有问题,这都是习 ...

  5. 【JavaScript】ESlint & Prettier & Flow组合,得此三神助,混沌归太清

    Flow Flow的意义 Flow是faceBook开源的一个JavaScript静态类型检查工具,作用类似TypeScript,但是它不像TS那样是一门独立的语言,而是作为一个babel-plugi ...

  6. vscode从听说到使用,vetur,prettier,htmljscssPrettify踩坑指南。

    今天基于vue-cli(2.9.3)构建一个新的项目.我用的sublime,es6的代码格式要与公司格式兼容.采用了vue-cli自带的eslint后,有一些不统一的部分需要修改.先看看sublime ...

  7. VSCode 使用 ESLint + Prettier 来统一 JS 代码

    环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...

  8. Prettier - Code formatter使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Prettier - Code formatter这是一款 格式化js.css代码插件,暂不解释. Prettier是什么? Prettier ...

  9. 使用ESLint+Prettier来统一前端代码风格

    Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...

  10. 关于eslint的使用与配置,以及prettier的使用

    eslint官网:https://eslint.bootcss.com/docs/user-guide/getting-started eslint配置:http://eslint.cn/docs/r ...

随机推荐

  1. C++ Qt开发:Qt的安装与配置

    Qt是一种C++编程框架,用于构建图形用户界面(GUI)应用程序和嵌入式系统.Qt由Qt公司(前身为Nokia)开发,提供了一套跨平台的工具和类库,使开发者能够轻松地创建高效.美观.可扩展的应用程序. ...

  2. 【JMeter】使用nmon进行性能资源监控

    使用nmon进行性能资源监控 目录 使用nmon进行性能资源监控 一.前言 二.nmon的下载安装 1.查看系统信息 2.查看CPU信息 2.下载 3.解压 4.一个小问题 三.在性能测试时使用命令行 ...

  3. 是谁的简历上全是秒杀商城和RPC啊?

    是不是还在苦于自己简历上的项目离不开商城.RPC.秒杀.论坛.外卖.点评等等烂大街的项目?是不是翻遍全网再很难找到一个既有含金量又能看得懂的项目?那么现在就不用找了,下面这个项目一定适合你! 高性能短 ...

  4. vue-test ------class绑定

    <template> <p :class="{'active':isActive}">Class样式绑定</p> <p :class=&q ...

  5. RISC-V系列单片机快速入门指南

    如何获取芯片开发资料 方法一:按型号选择 我们更推荐采用按型号选择的方法,获取所对应型号芯片的开发资料,这能有效降低错误使用资料的风险! 沁恒官网首页的产品中心,点击青稞 RISC-V 通用系列,可跳 ...

  6. CSP_J

  7. 华企盾DSC由于半透明软件设置了需要管理员权限打开导致半透明打不开加密文件

    解决方法: 1.右键该应用程序->属性->兼容性,去掉[以管理员权限运行此程序] 2.也可以打开控制面板->系统和安全->用户账户控制设置调至最低

  8. 文心一言 VS 讯飞星火 VS chatgpt (166)-- 算法导论13.1 6题

    六.用go语言,在一棵黑高为 k 的红黑树中,内部结点最多可能有多少个?最少可能有多少个? 文心一言: 红黑树是一种自平衡的二叉查找树,其中每个节点都有一个颜色属性,可以是红色或黑色.红黑树满足以下性 ...

  9. (数据科学学习手札156)地图可视化神器kepler.gl 3.0版本发布

    本文已收录至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,地图可视化神器kepler.gl终于带 ...

  10. 如何保障Cookie的信息安全

    一.支持策略 保障 Cookie 的安全性可以从以下几个方面进行: 使用 HttpOnly 属性:设置 HttpOnly 属性可以防止JavaScript Document.cookie API 无法 ...