我为何推荐Prettier来统一代码风格

时间 2020-05-28

标签为何推荐 prettier 统一代码风格繁體版

原文原文链接

译者按: 关于代码风格，不一样的人有不一样的偏好，其实并无什么绝对的对错。可是，有2条原则应该是对的：少数服从多数；用工具统一风格。javascript

原文: Why robots should format our code for us
译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。html

我曾经觉得，程序员有本身独特的代码风格挺好的。由于，一个成熟的程序员应该清楚，好的代码应该是怎样的。前端

个人大学教授告诉我，他的学生在用个人代码，由于个人代码风格不同。我想了一下，也许是由于个人代码至少是有风格的，而其余人的代码一团糟。java

一些示例

示例1：

读了The Programmers’ Stone以后，我把大括号这样写：git

if (food === 'pizza')
{
 alert('Pizza ;-)'); 
}
else
{ 
 alert('Not pizza ;-(');
}

可是，我意识到在前端社区里，也许只有我一我的这样写的。而其余人都是这样写的：程序员

if (food === 'pizza') {
 alert('Pizza ;-)'); 
} else {
 alert('Not pizza ;-(');
}

或者这样：github

if (food === 'pizza') {
 alert('Pizza ;-)'); 
}
else { 
 alert('Not pizza ;-(');
}

因而，我改变了风格，采用了最后一种写法。ide

示例2

将多个方法连接起来时，我喜欢这样写：工具

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

示例3

读了Why you should enforce Dangling Commas for Multiline Statements，我意识到了trailing commas写法更加易于重构：学习

const food = [
 'pizza',
 'burger',
 'pasta',
]

可是，这种写法很是少见。我审查过的代码中，没人这样写。因而，我只能放弃这种写法，向现实世界低头。

示例4

我还有一个不合群的习惯。在行尾写代码注释以前，我习惯敲2个空格：

const volume = 200; // ml

我以为这样写好看些。可是，这会致使代码不一致，由于其余人只敲一个空格。

JavaScript开发者是怎样作的

很遗憾，JavaScript没有官方的代码风格。业界有一些流行的代码风格，好比Airbnb和Standard。使用它们的话，团队成员之间的代码会更易读。

你也可使用ESLint 来统一风格。可是它并不能保证代码100%一致。好比，ESLint的Airbnb配置，只能统一示例1的代码风格，而不能统一后面二者。

JavaScript开发者应该怎么作？

有一些语言有很是严格的代码风格，而且有工具能够用于统一风格。所以，开发者不须要浪费时间去争论代码风格的优劣。例如，Reason语言的Refmt，和Rust语言的Rustfmt。

如今，JavaScript终于有了一个解决方案。有一个新工具，叫作Prettier，它运用自身的规则将你的的代码从新格式化。不管你以前的代码风格是怎样。

咱们不妨试用一下Prettier。

输入代码是这样的：

if (food === 'pizza')
{
 alert('Pizza ;-)'); 
}
else
{ 
 alert('Not pizza ;-(');
}

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

const food = [
 'pizza',
 'burger',
 'pasta',
]

Prettier处理以后的代码是这样的：

if (food === "pizza") {
 alert("Pizza ;-)");
} else {
 alert("Not pizza ;-(");
}

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

const food = ["pizza", "burger", "pasta"];

也许，你并不喜欢这种风格。好比，我不喜欢else放在大括号后面，也不喜欢把链式方法所有写在同一行。可是，我发现使用Prettier有不少益处：

几乎不须要作决定，由于 Prettier的配置选项不多。
团队成员不须要为规则去争论。
开源代码开发者不须要去学习项目的代码风格。
不须要去修复ESLint报告的风格问题。
保存文件的时候能够自动统一风格。

结论

Prettier已经被一些很是流行的项目好比React和Babel采用了。对于我本身的项目，我已经开始从本身的个性化风格所有转为Prettier风格。相比于Airbnb代码风格，我更推荐Prettier。

刚开始，我会以为Prettier风格很是差。可是，当我发现本身须要手动去调整代码风格时，我意识到Prettier真的很是好用。

Prettier能够在保存文件的时候能够自动统一风格：

感兴趣的话，能够按照这个教程配置Prettier。

版权声明:
转载时请注明做者Fundebug以及本文地址：
https://blog.fundebug.com/2017/10/23/format-code-use-Prettier/