• home > OMD > codeGuide >

    治愈代码洁癖prettier药到病除

    Author:zhoulujun@live.cn Date:

    写java的时候,代码规范也没有太在意。但是在前端,自由性太大,js作为一门灵活的弱类型语言,代码风格千奇百怪,一千个人写js就有一千种写法,之前都是鼓捣各种lint去规范代码。有了prettier之后,so easy

    写java的时候,代码规范也没有太在意。但是在前端,自由性太大,js作为一门灵活的弱类型语言,代码风格千奇百怪,一千个人写js就有一千种写法,会让你感觉到一团糟。 对于代码版本管理系统(svn 和 git或者其他),代码格式不一致带来的问题是严重的,在代码一致的情况下,因为格式不同,触发了版本管理系统标记为 diff,导致无法检查代码和校验。

    团队关于代码风格必须遵循两个基本原则:

    1. 少数服从多数;

    2. 用工具统一风格。

    3. eslint等工具,强制格式,不然error

    使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。下面使用官方的原文

    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.

    为什么说prettier是武断的? 它个各种lint工具不一样,prettier只关注格式化,并不具有lint检查语法等能力,所以开始大家可能会经常碰到lint搭配prettier会出现冲突。而且prettier独断自行一套格式化风格,虽然提供配置,也只是配置少量的关键属性,能在一定程度上保证的代码的风格统一,而且使用门槛极低, 关键的他的风格并不丑,更容易让大家接受。 

    ESlint 规则成千上万,主要可以分为两大类:

    • 格式化代码规则(Formatting rules):如  max-len , no-mixed-spaces-and-tabs , keyword-spacing , comma-style ...

    • 代码质量规则(Code-quality rules):如  no-unused-vars , no-extra-bind , no-implicit-globals , prefer-promise-reject-errors ...

    理想情况下,如果 ESlint 规则设置的足够细致,基本能保证两个不同的开发者——采用相同的技术方案——在代码风格上 90% 的一致性。

    但是对于 Prettier 来说,它工作的领域仅限于第一类——格式化代码,也就是说即使存在严重影响代码质量(Code-quality)的问题——比如死循环——Prettier 不会做出任何反应。原因将会在下文中做出(Rationale)说明。

    ESlint 本身是一个代码校验工具,但是也提供了格式化代码的功能,通过添加 --fix 参数,可以将代码格式成符合自定义规则的样子(eslint --fix 则不同,它会去格式化那些违反规则的代码)。

    Prettier 作为专业的格式化工具,内部自建了一套关于代码风格的规则,且这些规则无法被修改,除了暴露出的 19 个的配置项。这么做的目的,就是为了停止对各种个性化风格优劣的争论,从而将讨论的重点转移到这 19 个配置项中

    prettier支持我们大前端目前大部分语言处理,包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown,这代表着,  你几乎可以用一个工具都能搞定所有的代码格式化问题。

    如何使用prettier

    只需要使用eslint-plugin-prettier来添加Prettier作为ESLint的规则配置。

    yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

    {
     "extends": [ 'standard','plugin:vue/essential','plugin:prettier/recommended'],
    
      "plugins": ['vue'],
      "rules": {
        "prettier/prettier": "error"//被prettier标记的地方抛出错误信息
      }
    }

    如何对Prettier进行配置

    一共有三种方式支持对Prettier进行配置:

    • 根目录创建.prettierrc 文件,能够写入YML、JSON的配置格式,并且支持.yaml/.yml/.json/.js后缀;

    • 根目录创建.prettier.config.js 文件,并对外export一个对象;

    • 在package.json中新建prettier属性。

    下面我们使用prettierrc.js的方式对prettier进行配置,同时讲解下各个配置的作用。

    module.exports = {  "printWidth": 80, //一行的字符数,如果超过会进行换行,默认为80
      "tabWidth": 2, //一个tab代表几个空格数,默认为80
      "useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减
      "singleQuote": false, //字符串是否使用单引号,默认为false,使用双引号
      "semi": true, //行位是否使用分号,默认为true
      "trailingComma": "none", //是否使用尾逗号,有三个可选值"<none|es5|all>"
      "bracketSpacing": true, //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
      "parser": "babylon" //代码的解析引擎,默认为babylon,与babel相同。}

    配置大概列出了这些,还有一些其他配置可以在官方文档进行查阅。

    jetbrains 出品的 webstorm intellij 默认集成,可以装上prettier插件

    http://plugins.jetbrains.com/plugin/10456-prettier

    webstorm vscode 配置推荐阅读《梳理前端开发使用eslint-prettier检查和格式化代码

    参考文章:

    Prettier your project https://juejin.im/post/5cb4a078f265da0354030026

    vscode + prettier 专治代码洁癖 https://juejin.im/post/5a791d566fb9a0634853400e

    Prettier介绍与基本用法 https://www.jianshu.com/p/d6a69eb08f07

    使用ESLint+Prettier来统一前端代码风格 https://segmentfault.com/a/1190000015315545

    使用ESLint & Prettier美化Vue代码 https://www.jianshu.com/p/d98e0b0139fb

    https://www.godblessyuan.com/2018/04/梳理前端开发使用eslint和prettier来检查和格式化代码问题.html










    转载本站文章《治愈代码洁癖prettier药到病除》,
    请注明出处:https://www.zhoulujun.cn/html/Operation/codeGuide/4632.html