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. 快速认识什么是:Kubernetes

    每次谈到容器的时候,除了Docker之外,都会说起 Kubernetes,那么什么是 Kubernetes呢?今天就来一起学快速入门一下 Kubernetes 吧!希望本文对您有所帮助. Kubern ...

  2. 51Nod - 1086 多重背包

    有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi ...

  3. Celery周期性任务定义beat

    通过celery beat可以使用周期性任务的定义. https://docs.celeryq.dev/en/stable/userguide/periodic-tasks.html 周期性任务bea ...

  4. NetSuite 开发日记 —— 事务处理行限制

    一.创建行限制 在 NetSuite 中处理事务时,一次可访问的记录.事务处理或数据行数限制为 10,000.除非另有说明,此限制适用于所有交易类型.超过 1,000 行可能会对 Netsuite 的 ...

  5. 痞子衡嵌入式:Farewell, 我的写博故事2023

    -- 题图:苏州虎丘塔 2023 年的最后一天,照旧写个年终总结.昨晚和同门师兄弟一起吃饭,有个师弟告诉痞子衡,微博上一个拥有 22.3W 粉丝的嵌入式同行今年 4 月发过一个吐槽微博,说恩智浦 MC ...

  6. 简单几行实现sliver上线提醒

    准备魔改sliver去掉一些特征什么的,这里记录一下最简单实现上线消息通过企业微信机器人提醒的方式,这很简单也有很多不足还需要接着改的 protobuf中对消息Beacon和Session的定义如下, ...

  7. 珍藏网站-关于路由器、WIFI协议等

    路由器详解:为什么不要买AX3000路由器 https://zhuanlan.zhihu.com/p/403855533 包含以下专业名词和相关话题: RX/TX和MU-MIMO 20MHz/40MH ...

  8. Huggy Lingo: 利用机器学习改进 Hugging Face Hub 上的语言元数据

    太长不看版: Hub 上有不少数据集没有语言元数据,我们用机器学习来检测其语言,并使用 librarian-bots 自动向这些数据集提 PR 以添加其语言元数据. Hugging Face Hub ...

  9. 人大金仓驱动包kingbasejdbc8.6.0.jar V8驱动jar包

    人大金仓驱动包kingbasejdbc8.6.0.jar V8驱动jar包 工作上要将kingbaseV8数据库整合到项目,我在官网找了半天,连个jdbc驱动包下载入口都找不到,简直就是官方文档毫无诚 ...

  10. OSG嵌入QT的简明总结2

    正文 我之前在这篇博文<OSG嵌入QT的简明总结>中论述了OSG在QT中显示的可视化问题.其中提到官方提供的osgQt项目(地址:https://github.com/opensceneg ...