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"
}
- JSON:
==> 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配置项说明的更多相关文章
- VSCode-Prettier和ESLint如何和睦共处?
1 在VSCode中单独使用Prettier保存代码自动格式化的配置方法 1.1 为什么要使用Prettier? 手动调整代码格式,不仅低效,而且在团队协作开发中,无法保证代码风格统一,所以需要引入自 ...
- Prettier-Code Formater代码格式化插件使用教程
目录 Prettier-Code Formater代码格式化插件使用教程 插件的安装 插件的使用 方式一: 配置VScode代码格式化后, 结合VScode快捷键使用 方式二: CLI中使用命令行的方 ...
- eslint+prettier 的 VSCode配置项
{ "files.autoSave": "off", "editor.fontSize": 12, "terminal.integ ...
- Prettier来统一代码风格
prettier是一款解决代码风格问题的代码格式化工具,功能强大,简单易用,支持多语言,减少配置项. 前端开发过程中每个人写JavaScript的代码风格都不一样,又不能说别人写的代码有问题,这都是习 ...
- 【JavaScript】ESlint & Prettier & Flow组合,得此三神助,混沌归太清
Flow Flow的意义 Flow是faceBook开源的一个JavaScript静态类型检查工具,作用类似TypeScript,但是它不像TS那样是一门独立的语言,而是作为一个babel-plugi ...
- vscode从听说到使用,vetur,prettier,htmljscssPrettify踩坑指南。
今天基于vue-cli(2.9.3)构建一个新的项目.我用的sublime,es6的代码格式要与公司格式兼容.采用了vue-cli自带的eslint后,有一些不统一的部分需要修改.先看看sublime ...
- VSCode 使用 ESLint + Prettier 来统一 JS 代码
环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...
- Prettier - Code formatter使用
更多VSCode插件使用请访问:VSCode常用插件汇总 Prettier - Code formatter这是一款 格式化js.css代码插件,暂不解释. Prettier是什么? Prettier ...
- 使用ESLint+Prettier来统一前端代码风格
Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...
- 关于eslint的使用与配置,以及prettier的使用
eslint官网:https://eslint.bootcss.com/docs/user-guide/getting-started eslint配置:http://eslint.cn/docs/r ...
随机推荐
- C# 对象与JSON字符串互相转换
一.JSON字符串转对象(反序列化) 1.使用Newtonsoft.Json 反序列化字符串转换为指定类型 (T) JsonConvert.DeserializeObject<T>(jso ...
- python3使用pandas备份mysql数据表
操作系统 :CentOS 7.6_x64 Python版本:3.9.12 MySQL版本:5.7.38 日常开发过程中,会遇到mysql数据表的备份需求,需要针对单独的数据表进行备份并定时清理数据. ...
- [USACO2007FEB S] The Cow Lexicon S
题目描述 Few know that the cows have their own dictionary with W (1 ≤ W ≤ 600) words, each containing no ...
- 华企盾DSC邮件发送成功,但是不解密也没有任何提示(未添加白名单)
用Debugview监控整个过程,若日志中有信任邮箱未添加说明,白名单邮箱未添加或者添加错了(检查空格之类的或重新添加)
- MD5 or Bcrypt?
MD5 or Bcrypt? 摘要 首先是一个错误的认识观念问题,很多人觉得MD5是一个加密算法.不然,他实则是一种摘要算法,也可以叫哈希函数.他的作用是将目标文本转换成具有相同长度.不可逆的杂凑字符 ...
- Python笔记三之闭包与装饰器
本文首发于公众号:Hunter后端 原文链接:Python笔记三之闭包与装饰器 这一篇笔记介绍 Python 里面的装饰器. 在介绍装饰器前,首先提出这样一个需求,我想统计某个函数的执行时间,假设这个 ...
- Linux发行版的基础目录名称、命名法则及功能规定
罗列Linux发行版的基础目录名称命名法则及功用规定 目录描述 /主层次 的根,也是整个文件系统层次结构的根目录 /bin存放在单用户模式可用的必要命令二进制文件,所有用户都可用,如 cat.ls.c ...
- Spring Boot3 系列:Spring Boot3 跨域配置 Cors
目录 什么是CORS? Spring Boot 如何配置CORS? 前端代码 注解配置 全局配置 过滤器配置 注意事项 什么是CORS? CORS,全称是"跨源资源共享"(Cros ...
- 数据库“意外失联”?华为云DRS异地多活灾备为您支招
[摘要] 为了更好地提供灾备保护,华为云数据库在"同城两中心"的基础上提出了异地保护的方案,华为云数据复制服务DRS推出了异地多活灾备,即"两地四中心". 在D ...
- 聚焦企业开放OpenAPI痛难点,华为云API Explorer助力构建API门户
本文分享自华为云社区<聚焦企业开放OpenAPI痛难点,华为云API Explorer助力伙伴构建API门户>,作者:华为云PaaS服务小智. 当前,IT研发的主流架构已从单体架构向微服务 ...