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

简介: 译者按: 关于代码风格,不同的人有不同的偏好,其实并没有什么绝对的对错。但是,有 2 条原则应该是对的: 少数服从多数;用工具统一风格。 原文: Why robots should format our code for us 译者: Fundebug 为了保证可读性,本文采用意译而非直译。

译者按: 关于代码风格,不同的人有不同的偏好,其实并没有什么绝对的对错。但是,有 2 条原则应该是对的: 少数服从多数;用工具统一风格。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

我曾经以为,程序员有自己独特的代码风格挺好的。因为,一个成熟的程序员应该清楚,好的代码应该是怎样的。

我的大学教授告诉我,他的学生在用我的代码,因为我的代码风格不一样。我想了一下,也许是因为我的代码至少是有风格的,而其他人的代码一团糟。

一些示例

示例 1:

读了The Programmers’ Stone之后,我把大括号这样写:

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

但是,我意识到在前端社区里,也许只有我一个人这样写的。而其他人都是这样写的:

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

或者这样:

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

于是,我改变了风格,采用了最后一种写法。

示例 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 没有官方的代码风格。业界有一些流行的代码风格,比如AirbnbStandard。使用它们的话,团队成员之间的代码会更易读。

你也可以使用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

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

版权声明

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

目录
相关文章
|
7月前
|
缓存 JSON JavaScript
37 # commonjs 规范流程梳理
37 # commonjs 规范流程梳理
22 0
|
8月前
|
JSON JavaScript 前端开发
提高代码质量与一致性:深入探讨ESLint
ESLint是一个强大的静态代码分析工具,它在现代JavaScript开发中扮演着至关重要的角色。通过ESLint,开发者可以规范代码风格、发现潜在的错误和维护一致性的代码库。在本博客中,我们将深入研究ESLint的核心概念、配置、规则、插件以及如何将它应用于项目,以提高代码质量和可维护性。
62 0
|
10月前
|
存储 设计模式 人工智能
规范:前端代码开发规范
规范:前端代码开发规范
1097 0
|
5月前
|
JavaScript 前端开发 安全
开发业务需求有必要引入 TypeScript 吗?
随着前端技术的不断更新和发展,TypeScript作为一种静态类型的JavaScript超集语言,逐渐在业界崭露头角,尤其是在当今快速发展的软件开发环境中,选择适合的开发工具和技术变得至关重要。在项目规模和复杂性的增加的同时,保证代码质量、可读性和可维护性成为开发团队的重要任务。这样的背景下,引入TypeScript作为一种开发工具来弥补JavaScript的某些弱点,已经成为许多开发团队的选择。那么TypeScript是否值得在业务中引入?它是否会取代JavaScript?那么本文就来聊聊在业务开发过程中是否有必要引入TypeScript,并讨论一下对于现代前端框架发展的看法和期待。
54 0
开发业务需求有必要引入 TypeScript 吗?
|
4月前
|
数据可视化 搜索推荐 JavaScript
SonarQube:解析代码质量,提升开发效率
在软件开发领域,代码质量管理是至关重要的。本文将介绍静态代码分析工具 SonarQube 的概念与实践,探讨其在代码质量管理中的作用和优势。我们将深入理解 SonarQube 的工作原理,了解如何通过该工具检测、评估和改善代码质量,以提高软件开发效率和可维护性。
|
5月前
|
前端开发 JavaScript 持续交付
前端代码审查规范
前端代码审查规范
|
6月前
|
JavaScript 开发者
TypeScript 对大型项目的管理和维护非常有利。具体应用案例解析
TypeScript 对大型项目的管理和维护非常有利。具体应用案例解析
|
10月前
|
程序员
代码的规范
代码的规范
115 0
|
10月前
|
算法 IDE 程序员
代码编写规范
代码编写规范
|
10月前
|
开发工具 git
代码统一风格、代码规范和提交规范
1、安装模块 全局安装 eslint、commitlint 、 check-prettier npm install eslint commitlint check-prettier -g 本地安装 npm install eslint-config-prettier  stylelint  stylelint-config-prettier stylelint-config-standard husky  @commitlint/config-conventional -D VSCode 安装 Eslint和Prettier插件
120 0