Prettier - Code formatter使用
更多VSCode插件使用请访问:VSCode常用插件汇总
Prettier - Code formatter这是一款 格式化js、css代码插件,暂不解释。
Prettier是什么?
Prettier的中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。
Prettier具有以下几个有优点:
1.可配置化
2.支持多种语言
3.集成多数的编辑器
4.简洁的配置项
使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。
如何对Prettier进行配置
一共有三种方式支持对Prettier进行配置:
1.根目录创建 .prettierrc
文件,能够写入YML
、JSON
的配置格式,并且支持.yaml
、.yml
、.json
、.js
后缀;
2.根目录创建 .prettier.config.js
文件,并对外export
一个对象;
3.在 package.json
中新建prettier
属性。
下面我们使用 prettierrc.js
的方式对prettier
进行配置,同时讲解下各个配置的作用。
module.exports = {
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符,而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号,而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数,只有一个参数的时候,也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
}
配置大概列出了这些,还有一些其他配置可以在官方文档进行查阅。
注意一点,parser的配置项官网列出了如下可选项:
babylon
flow
typescript Since v1.4.0
postcss Since v1.4.0
json Since v1.5.0
graphql Since v1.5.0
markdown Since v1.8.0
但是如果你使用了vue的单文件组件形式,记得将 parser
配置为vue,目前官方文档没有列出来。当然如果你自己写过AST的解析器,也可以用你自己的写的 parser: require("./my-parser")
。
Prettier + editorConfig 搭配使用处理旧项目文件
如果你有一个旧项目想通过Prettier
+ editorConfig
来简单规范一下格式也可以使用这个工具:
1.分别安装两个工具不必多说了
2.创建 .prettierrc
配置文件
该配置文件会继承 editorConfig
的配置
3.向 package.json
添加可执行脚本: prettier": "prettier --write ./*
例如:
prettier": "prettier --write './src/**/*.js' './src/**/*.jsx' './src/**/*.css' './src/**/*.scss'
4.创建 .prettierignore
文件,用来忽略一些文件 && 目录
5.一切准备就绪之后 !!!! npm run prettier
就可以看到提示文件更改记录了
.prettierrc.js
配置文件:
# .prettierrc.js 配置文件
// https://prettier.io/docs/en/options.html
module.exports = {
trailingComma: "none", // 数组 对象尾随不需要逗号
bracketSpacing: true, // 对象空格 { foo: bar }, false=> {foo:bar}
jsxBracketSameLine: false, // jsx闭标签是否另起一行 <Test></Test>
arrowParens: 'always', // 箭头函数,只有一个参数的时候,也需要括号
singleQuote: true, // 单引号
semi: true, //是否在语句末尾就分号
};
.prettierignore
文件配置
# .prettierignore 文件配置
/node_modules
/dist
/src/lib/
/src/global/fonts
/docs
/.vscode
node_modules
.eslintrc.js
package.json
package-lock.json
Prettier - Code formatter使用的更多相关文章
- Android Studio Eclipse Code Formatter
在从Eclipse转到Android Studio上开发后,如果还想继续使用在Eclipse上制定的自定义的Code Formatter的话,需要按如下步骤操作:1.进入Settings界面,如果能看 ...
- 【Idea】idea code style配置eclipse code formatter
在eclipse中有自动配置code style的功能 ,但是idea上却没有,这个时候需要自己手工配置 1. 在idea中找到Preference->Plugins->Browse re ...
- idea中Eclipse Code Formatter插件设置和使用,以及注释模板的修改
在settings里面找到plugins这个选项,搜索Eclipse Code Formatter,点击安装,重启idea即可进行配置: 首先,先安装Eclipse Code Formatter插件: ...
- Book Contents Reviews Notes Errata Articles Talks Downloads Resources Code Formatter Cover of C# in Depth Order now (3rd edition) Implementing the Singleton Pattern in C#
原文链接地址: http://csharpindepth.com/Articles/General/Singleton.aspx#unsafe Implementing the Singleton P ...
- Visual Studio Code扩展:
Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- 高效开发者是如何个性化VS Code插件与配置的?
2年之前,我放弃了Sublime Text,选择了Visual Studio Code作为代码编辑器. 我每天花在VS Code上的时间长达5~6个小时,因此按照我的需求优化VS Code配置十分必要 ...
- 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?
本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的 ...
- eslint prettier editrorconfig - 写出干净的前端代码
FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...
随机推荐
- Linux安装Redis,在测试阶段即make test出现“You need tcl 8.5 or newer in order to run the Redis test”问题解决方案
Linux安装Redis,在测试阶段即make test出现"You need tcl 8.5 or newer in order to run the Redis test"问题 ...
- 最短路问题 Dijkstra算法- 路径还原
// 路径还原 // 求最短路,并输出最短路径 // 在单源最短路问题中我们很容易想到,既然有许多条最短路径,那将之都存储下来即可 // 但再想一下,我们是否要把所有的最短路径都求出来呢? // 实际 ...
- Bash脚本编程学习笔记08:函数
官方资料:Shell Functions (Bash Reference Manual) 简介 正如我们在<Bash脚本编程学习笔记06:条件结构体>中最后所说的,我们应该把一些可能反复执 ...
- java new一个对象的过程中发生了什么?
java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就会先通过类的全限定名来加载.加载并初始化类完成后,再进行对象的创建工作. 我们先假设是第一次使用该类,这样的话n ...
- ADO.NET事务封装
在数据库工具类编写的过程中,对事务的处理操作想避免各个原子操作的事务对象赋值重复操作,想对外暴露的方法为如下形式 public bool ExecuteTransition(Action Transi ...
- selenium获取缓存数据
爬虫呢有时候数据方便有时候登入获得cookies,以及获取他存缓存中的数据 一.获取缓存中的数据其实很简单js注入就好了 localStorage_1 = driver.execute_script( ...
- openssl CVE-2016-2107 漏洞检测
最近在安装python3 时升级openssl 版本,在摸索openssl 升级过程中才发现centos6 默认安装的openssl 1.0.1e 版本是有一个严重的漏洞的(Padding oracl ...
- opencv —— imread、namedWindow & imshow、cvtColor、imwrite 加载、显示、修改、保存图像
加载图像:imread 函数 Mat imread(const string& filename, int flags = 1): filename:需要载入的图像的路径名. flags:加载 ...
- 基于AccessToken方式设计API
目录 数据库设计 实现方案 应用场景:公司A有一平台需要对外提供接口给其他商户使用,考虑到安全性问题,此时可考虑采用AccessToken方案.商户在公司A平台注册一app,平台分配appId.app ...
- JS格式时间
Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, //month &q ...