【代码规范】prettier

prettier

每个开发人员都有自己的撸码风格，例如：

示例一

function foo(items) {
  return items
    .filter(item => item.checked)
    .map(item => item.value)
  ;
}
复制代码

function foo(items) {
  return items.filter(item => item.checked).map(item => item.value);
}
复制代码

示例二

const food = [
  'pizza',
  'burger',
  'pasta',
]
复制代码

const food = ["pizza", "burger", "pasta"];
复制代码

示例三

console.log(
  a
)
复制代码

console.log(a)
复制代码

示例四

let back = '' + a + JSON.stringify(b)
复制代码

示例五

let b = {name:'xm', age:25, sex:'male', color:'yellow'}
复制代码

let b = { name: 'xm', age: 25, sex: 'male', color: 'yellow' }
复制代码

我们可以使用ESLint 来统一风格。但是它并不能保证代码100%一致。

单看比较严格的airbnb配置，不能统一示例一、示例二、示例三，对示例四的修复是这样的：

const back = `${a}${JSON.stringify(b)}`;
复制代码

而这种侵入式的改写，并不是我们期望的。

在standard和airbnb两种标准下，示例五修复后的格式也不一样：

standard：

let b = { name: 'xm', age: 25, sex: 'male', color: 'yellow' }
复制代码

airbnb：

const b = {
  name: 'xm', age: 25, sex: 'male', color: 'yellow',
};
复制代码

而有些小伙伴渴望是这样的

const c = {
  name: 'xm',
  age: 25,
  sex: 'male',
  color: 'yellow',
};
复制代码

综上：

（1）standard标准和airbnb标准有出入，代码风格习惯不同。

（2）在单个标准下，也不能保障代码的100%一致。

（3）有些情况下，侵入式的改写了代码的表达方式。

看到仍然还有很多代码格式不一样的地方，关于数组的写法，A猿认为每一项都要换行，B猿认为没必换行，C猿认为超过一定长度再换行，D猿说，你们快统一下。

这时，很有主见的Prettier前来发炎了:"不管你们之前用的啥，老弟要亮剑了"。

• 几乎不需要做决定，因为 Prettier的配置选项很少。
• 团队成员不需要为规则去争论。
• 开源代码开发者不需要去学习项目的代码风格。
• 不需要去修复ESLint报告的风格问题。
• 保存文件的时候可以自动统一风格。

prettier目前的使用者

prettier即可单独使用，又可结合eslint，各取所长。走，去瞧瞧如何使用

单独使用prettier

npm install prettier --save-dev
复制代码

package.json

{
	"scripts"**:** {
		"format"**:** "prettier --write '**/*.{js,css,md}'"
	 }
}
复制代码

创建文件**.prettierrc**

{
  "printWidth": 50,
  "singleQuote": true,
  "trailingComma": "es5"
}
复制代码

最后

npm run format

复制代码

我们看到

示例一的内容自动规范成了

  let abc = items
    .filter(item => item.checked)
    .map(item => item.value);
复制代码

示例二中的内容自动规范成了

const food = ['pizza', 'burger', 'pasta'];
复制代码

示例三的内容自动规范成了

console.log(b);
复制代码

示例四的代码保持原样，并没有做侵入式的修改

示例五自动规范成了

let b = {
  name: 'xm',
  age: 25,
  sex: 'male',
  color: 'yellow',
};
复制代码

综上，prettier保持了代码的一致性，且不会侵入式修改代码

再来看下，eslint结合prettier的使用情况

npm install prettier eslint-plugin-prettier --save-dev
复制代码

更新.eslintrc.js or .eslintrc.json

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 100,
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ]
  }
}
复制代码

最后执行

npm run lint test.js
复制代码

执行顺序是先进行了prettier，然后进行了eslint，若两者有冲突的地方，以prettier为主。

---

举起手手点赞的人，注意下，我看到了你的内涵

转载于:https://juejin.im/post/5cd03fd351882541773182df