JS代码风格自动规整工具Prettier

问题背景

通常使用 ESLint做代码风格检查检查, 和部分代码质量检查。

但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改。

如果很多,并且时间紧迫,甚是尴尬。

ESLint

http://eslint.cn/

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装。

所有都是可拔插的

  • 内置规则和自定义规则共用一套规则 API
  • 内置的格式化方法和自定义的格式化方法共用一套格式化 API
  • 额外的规则和格式化方法能够在运行时指定
  • 规则和对应的格式化方法并不强制捆绑使用

每条规则:

  • 各自独立
  • 可以开启或关闭(没有什么可以被认为“太重要所以不能关闭”)
  • 可以将结果设置成警告或者错误

另外:

  • ESLint 并不推荐任何编码风格,规则是自由的
  • 所有内置规则都是泛化的

项目:

  • 通过丰富文档减少沟通成本
  • 尽可能的简单透明
  • 相信测试的重要性

http://eslint.cn/docs/rules/

如下等等,很多对应使用场景都有对应的规则。

   
array-bracket-newline


在数组开括号后和闭括号前强制换行

   
array-bracket-spacing


强制数组方括号中使用一致的空格

   
array-element-newline


强制数组元素间出现换行

   
block-spacing


禁止或强制在代码块中开括号前和闭括号后有空格

   
brace-style


强制在代码块中使用一致的大括号风格

   
camelcase


强制使用骆驼拼写法命名约定

Prettier

https://github.com/prettier/prettier

对代码的风格进行自动格式化处理,例如 缩进使用4个空格。

Prettier 是一个前端的代码格式化工具,支持列表如下:

简而言之,这个工具能够使输出代码保持风格一致。(详见这篇博文:A Prettier JavaScript Formatter

Intro

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.

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!


与ESlint集成

https://www.jianshu.com/p/d6a69eb08f07

https://zhuanlan.zhihu.com/p/38267286

此两篇文章介绍的都是与代码嵌入 ESlint配置中,作为ESlint检查的一部分使用。

CI集成

还有其它使用方法

https://prettier.io/docs/en/why-prettier.html

https://prettier.io/docs/en/precommit.html

在入库的动作执行的时候,将改动的代码进行修正, 真正到库中的代码,则是完全符合要求的。

Pre-commit Hook

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via git add before you commit.

Option 1. lint-staged

Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)

Install it along with husky:

yarn add lint-staged husky --dev

and add this config to your package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.

工具集成

https://prettier.io/docs/en/editors.html

Sublime Text

Sublime Text support is available through Package Control and the JsPrettier plug-in.

https://prettier.io/docs/en/editors.html

原文地址:https://www.cnblogs.com/lightsong/p/10353323.html

时间: 2024-09-29 22:42:03

JS代码风格自动规整工具Prettier的相关文章

前端CSS和JS代码风格规范

1:不要轻易改动全站级CSS和通用CSS库.改动后,要经过全面测试. 2:css的id,class 名称 语义化,   以 - 相连,   命名少用缩写(除一些所有人一看便知的缩写); 3: Javascript命名规则 3.1:私有变量名用下划线开头; eg: _this = $(this); 3.2:变量名--驼峰命名法; eg: regEmail; 3.3:格式化对象参数;   eg: $.ajax({ type : 'post', url : '/auth/sendCode', data

Google HTML/CSS/JS代码风格指南

JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS修正版本 2.1 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持基础架构.适用于HTML/CSS文件,包括GSS文件. 只要代码质量是可以被维护的,就能很好的被工具混淆.压缩和合并. 样式规则 协议 嵌入式资源书写省略协议头 省略图像.媒体文件.样式表和

python代码规范 自动优化工具Black

自动优化工具Black 在众多代码格式化工具中,Black算是比较新的一个,它***的特点是可配置项比较少,个人认为这对于新手来说是件好事,因为我们不必过多考虑如何设置Black,让 Black 自己做决定就好. 1).安装与使用 与pylint类似,直接pip install black即可完成该模块的安装,不过black依赖于Python 3.6+,但它仍然可以格式化Python2的代码. 在使用方面black默认读取指定python文件并对其进行代码规范格式化,然后输出到原文件. l = 

JS代码风格指南

一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 操作符在上一行末尾,且下一行缩进2级,如果是赋值语句,还应该和等号后面部分对齐 空行 函数声明与函数声明.变量声明与函数声明.函数内部的逻辑块之间都应该有空行隔开 作者尼古拉斯还建议在流程控制块顶部留一个空行,但给的例子不是很明确 命名 变量名/函数名:Camel(驼峰)规则,首词首字母小写,后续

js代码风格之链式结构

<div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">短袖衬衫</a></li> &l

Node.js 优雅地自动审核团队的代码

在团队开发中,无论是写前端(js,css,html) ,还是后端 ,我们需要解决一个问题:如何统一团队代码风格. 这篇文章主要是使用pre-git , eslint , js-beautify 实现代码风格控制. 下面分别介绍这三个工具和使用方式: pre-git该工具能实现git hook的功能,在git的流程中插入一些自定义行为,例如commit之前执行代码检测,如果不通过则报错. eslint代码格式审核工具,可以随意组合配置各种风格,用于组成团队的代码统一规范. js-beautiful

Ajax中通过JS代码自动获取表单元素值的示例代码

我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了 http://www.qidian.com/BookReader/1839917,60421843.aspx http://www.qidian.com/BookReader/1839917,60422045.a

JavaScript 代码风格---Vue.js风格指南

Vue.js风格指南 https://cn.vuejs.org/v2/style-guide/ 还有google和airbnb的js代码风格 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12289354.html

java代码分析及分析工具

java代码分析及分析工具 一个项目从搭建开始,开发的初期往往思路比较清晰,代码也比较清晰.随着时间的推移,业务越来越复杂.代码也就面临着耦合,冗余,甚至杂乱,到最后谁都不敢碰. 作为一个互联网电子商务网站的业务支撑系统,业务复杂不言而喻.从09年开始一直沿用到现在,中间代码经过了多少人的手,留下了多少的坑,已经记不清楚了,谁也说不清了. 代码的维护成本越来越高.代码已经急需做调整和改善.最近项目组专门设立了一个小组,利用业余时间做代码分析的工作,目标对核心代码进行分析并进行设计重构. 代码分析