治愈代码洁癖prettier药到病除
Author：[email protected] Date：
写java的时候，代码规范也没有太在意。但是在前端，自由性太大，js作为一门灵活的弱类型语言，代码风格千奇百怪，一千个人写js就有一千种写法，会让你感觉到一团糟。 对于代码版本管理系统（svn 和 git或者其他），代码格式不一致带来的问题是严重的，在代码一致的情况下，因为格式不同，触发了版本管理系统标记为 diff，导致无法检查代码和校验。
团队关于代码风格必须遵循两个基本原则：
少数服从多数；
用工具统一风格。
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