译者按: 关于代码风格,不同的人有不同的偏好,其实并没有什么绝对的对错。但是,有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以及本文地址:
https://blog.fundebug.com/2017/10/23/format-code-use-Prettier/

我为什么推荐Prettier来统一代码风格的更多相关文章

  1. Prettier来统一代码风格

    prettier是一款解决代码风格问题的代码格式化工具,功能强大,简单易用,支持多语言,减少配置项. 前端开发过程中每个人写JavaScript的代码风格都不一样,又不能说别人写的代码有问题,这都是习 ...

  2. 统一代码风格工具——editorConfig

    前面的话 在团队开发中,统一的代码格式是必要的.但是不同开发人员的代码风格不同,代码编辑工具的默认格式也不相同,这样就造成代码的differ.而editorConfig可以帮助开发人员在不同的编辑器和 ...

  3. VSCode 使用 ESLint + Prettier 来统一 JS 代码

    环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...

  4. Visual Studio 代码风格约束

    团队内部若能统一代码风格对于日后的项目维护大有裨益,但面对厚达十几甚至几十页的代码风格规范,开发人员难免产生抵触心理.Python和Go等在语言层面就对代码风格作了一定的约束,但C#并没有,为解决这个 ...

  5. 《码处高效:Java开发手册》之代码风格

    流水淡,碧天长,鸿雁成行.编码风格,简捷清爽,反引无限风光. 在美剧<硅谷>中有这样一个经典镜头,主人公 Richard 与同为开发工程师的女友闹分手,理由是两人对缩进方式有着截然不同的编 ...

  6. Visual Studio Code 使用 ESLint 增强代码风格检查

    前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint.除了可以 ...

  7. 用 Prettier 统一团队的代码风格~

    使用 prettier 自動調整 JavaScript 樣式 GFM 格式说明 为什么你不能缺少Linter(以及代码美化工具) 使用 prettier 自動調整 JavaScript 樣式 Reac ...

  8. 使用ESLint+Prettier来统一前端代码风格

    Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...

  9. 03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)

    书接上文.在团队协作中,为避免低级Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保 ...

随机推荐

  1. 编程语言吐槽之Java与C

    包含各种偏见和武断,请谨慎阅读. 为什么在学校学习的C,拿到企业生产中不起作用? 而为什么企业级的程序员,依然对C/C++无法掌控?在算法各方面不够精湛? 根本原因还是应用场景的不同.企业级的开发,主 ...

  2. Python math库常用函数

    math库常用函数及举例: 注意:使用math库前,用import导入该库>>> import math 取大于等于x的最小的整数值,如果x是一个整数,则返回x>>> ...

  3. java 堆 栈 方法区的简单分析

    Java里的堆(heap)栈(stack)和方法区(method) 基础数据类型直接在栈空间分配, 方法的形式参数,直接在栈空间分配,当方法调用完成后从栈空间回收.   引用数据类型,需要用new来创 ...

  4. 初识vw和vh

     最近在项目里突然看到了一行css代码,height:100vh; 一时间有点蒙蔽 因为之前有听过这个css3新增单位,但没有去了解过. 那这个单位又跟px,rem,em,%有什么不同呢? 简述:   ...

  5. Redis 的 8 大应用场景!

    之前讲过Redis的介绍,及使用Redis带来的优势,这章整理了一下Redis的应用场景,也是非常重要的,学不学得好,能正常落地是关键. 下面一一来分析下Redis的应用场景都有哪些. 1.缓存 缓存 ...

  6. Jade —— 源于 Node.js 的 HTML 模板引擎

    2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读  ·  读完需要 69 分钟 ...

  7. 使用 WRK 压力测试工具对 ASP.NET Core 的接口进行压力测试

    0. 简要介绍 WRK 是一款轻量且易用的 HTTP 压力测试工具,通过该工具我们可以方便地对我们所开发的 WebAPI 项目进行压力测试,并且针对测试的情况返回结果. PS:Wrk 并不能针对测试的 ...

  8. 函数式编程之-F#类型系统

    在深入到函数式编程思想之前,了解函数式独有的类型是非常有必要的.函数式类型跟OO语言中的数据结构截然不同,这也导致使用函数式编程语言来解决问题的思路跟OO的思路有明显的区别. 什么是类型?类型在编程语 ...

  9. mongo-spark-读取不同的库数据和写入不同的库中

    mongo-spark-读取不同的库数据和写入不同的库中 package com.example.app import com.mongodb.spark.config.{ReadConfig, Wr ...

  10. Docker 简述

    转自:https://cloud.tencent.com/developer/article/1354393 虚拟机和 docker 的区别,如下图: Image (镜像) 镜像不包含任何动态数据,其 ...