【代码规范】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

你可能感兴趣的:(【代码规范】prettier)