问题背景

通常使用 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

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

  1. 解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  2. 大神的JS代码风格指南

    js代码风格指南:1.缩进使用空格,不要用制表符2.必须用分号3.暂时不用ES6(modules)例如export和import命令4.不鼓励(不禁止)水平对齐5.少用var 都应该使用const或者 ...

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

    JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...

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

    自动优化工具Black 在众多代码格式化工具中,Black算是比较新的一个,它***的特点是可配置项比较少,个人认为这对于新手来说是件好事,因为我们不必过多考虑如何设置Black,让 Black 自己 ...

  5. JS代码风格指南

    一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 ...

  6. js 代码风格(2)

    Properties    • 当访问属性的时候,我们使用点(.)操作符. var luke = { jedi: true, age: 28 }; // bad var isJedi = luke[' ...

  7. highlight.js代码风格引入方法

    <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel=&q ...

  8. js代码风格之链式结构

    <div class="box"> <ul class="menu"> <li class="level1"& ...

  9. [Js代码风格]浅析模块模式

    1.实例解释模块模式 简明扼要的说,经典的模块模式指的定义一个立即执行的匿名函数.在函数中定义私有函数和私有变量并且返回一个包含公共变量和公共函数作为属性和方法的匿名对象. var classicMo ...

随机推荐

  1. Docker-Dockerfile及基本语法

    Dockerfile的作用是通过它可以生成自定镜像,先介绍几个基本的docker命令. [docker镜像相关的命令]docker search 镜像名: 搜索镜像docker pull 镜像名: 镜 ...

  2. 八皇后问题(C#)

    八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同 ...

  3. composer包(发布到github上)同步到Packagist

    在上一篇文章里面,探讨了如何一步步建立composer包–创建你的一个composer包 创建完成后,我们需要做的就是讲自建的包发布到Packagist上.至于说什么是Packagist,这个就不用我 ...

  4. Webdriver之API详解(3)

    前言 前两篇API链接 https://www.cnblogs.com/linuxchao/p/linuxchao-selenium-apione.html https://www.cnblogs.c ...

  5. springboot 实现配置文件给常量赋值

    @Component @ConfigurationProperties(prefix = "task.cron") public class TaskCronParam imple ...

  6. apose和spire操作word

    Apose public void doSaveAsword(Dictionary<string,string> dict) { //--------------------------- ...

  7. 面试中被问Spring循环依赖的三种方式!!!

    什么是循环依赖? 循环依赖其实就是循环引用,也就是两个或则两个以上的 Bean 互相持有对方,最终形成闭环.比如A依赖于B,B依赖于C,C又依赖于A.如下图: 如果在日常开发中我们用new 对象的方式 ...

  8. 通俗理解ZooKeeper是如何保证数据一致性的

    https://blog.csdn.net/liuhaiabc/article/details/70771322 https://blog.csdn.net/zhaoyangjian724/artic ...

  9. qsort.c源码

    /* 版权所有(C) 1991-2019 自由软件资金会. 该文件属于是GUN C语言函数库,由Douglas C. Schmidt(schmidt@ics.uci.edu)所写. GUN C语言函数 ...

  10. cpu_relax

    https://blog.csdn.net/justlinux2010/article/details/8533451