1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端多人开发统一代码格式化工具

前端多人开发统一代码格式化工具

时间:2018-11-21 04:16:18

相关推荐

前端多人开发统一代码格式化工具

痛点:多人开发时常常碰到,每个人的格式的化的工具,千差万别,一次格式化,就把不是你改的代码,git提交是被你重新换了格式上传了,这不便于查看个人的代码提交。

解决方式:统一开发工具,使用vscode ,再使用统一的格式化工具

试想一个多人开发的项目,每次同步代码,看到各个风格迥异,换行空格混乱,4格,2格缩进交替上演的代码文件,分分钟逼死强迫症啊。忍无可忍只能拔枪相见了~~。统一的代码风格规范,对于多人开发的大项目一定是必不可少的,但是口头约定又是一定没有用的(nice脸)。这时候就需要Prettier上场了,一个配置文件,配合VScode,保存即格式化,你的同事都不需要知道代码风格是什么,,整个团队只要clone项目,自动保持统一风格。搞定!

Prettier是什么

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

以上是github上的官方解释,其实就是简单的代码格式工具,和esLint不同在于,ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量,等等)。而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见,代码格式统一的问题,交给Prettirer再合适不过了。和Eslint配合使用,风味更佳。

Prettier怎么用

编辑器插件CLI命令行

编辑器

这里介绍VSCode中如何配置Prettier

安装 Prettier插件Prettier - Code formatter

安装插件后,调出系统设置就能看到prettier相关选项了,如图

添加自定义配置文件.prettierrc

作为项目的整体代码规范,如果依赖本地配置,显然是不科学的,所以需要.prettierrc 文件覆盖本地配置。我的配置文件如下

{"singleQuote": true,"trailingComma": "es5","printWidth": 140,"overrides": [{"files": ".prettierrc","options": { "parser": "json" }}]}

到此,prettier安装完毕,使用shift+alt+f就可格式化代码。当然每次手动格式化还是很费力啊,怎么办?自动保存。系统设置中增加"editor.formatOnSave": true即可自动保存,还要注意的一点是,如果同时设置了"files.autoSave": "autoSaveDelay",保存及格式化会失效。files.autoSave配置成别的选项即可。

另外,如果项目配置了.editorConfig文件,在配置了"editor.formatOnSave": true后,如果项目成员没有安装 Prettier 插件,保存时就会读取.editorConfig文件,同样可以格式化代码。启用 Prettier 插件后,.editorConfig的配置就会失效,读取.prettierrc文件的配置

命令行

命令行用法需要安装prettier,npm install prettier --save-dev,使用prettier write **.js就可以格式化文件。将添加到你的NPM脚本中,prettier --write './src/**/*.js,这样就可以批量格式化项目中的所有文件了。

结语

prettier只关心代码格式,显然是不够的。项目中还是要引入ESlint。两者配合才能使项目代码优雅健壮

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。