Prettier – Opinionated Code Formatter

开发者们普遍认为,有一个共同的编码风格指南对一个项目和团队来说是非常有意义的。但到要达成一致的编码风格却是一个非常痛苦和不积极的过程。人们对编写代码的特定方式感到非常情绪化,没有几个人喜欢花时间去看那些条条框框的风格指南。

今天给大家推荐的前端开发工具叫 Prettier,它是一个非常棒的代码格式化工具。项目地址:https://github.com/prettier/prettier

Prettier

Prettier 会删除代码中所有原始(自己写的)编码风格,并确保所有输出的代码风格一致,并考虑行长。

// 格式化前的代码
function makeComponent() : int {
  return {
    longCall() {
      complicatedFunction(importantArgument(), secondaryArgument())
      weirdStyle({ prop: 1 },
        1, 2, 3);
    },
    render() {
      const user = {
        name: "James"
      };
   return <div>
        hello ${name}! JSX is <strong>supported</strong>
      </div>;
    }
  };
}

// Prettier 处理后的代码
function makeComponent(): int {
  return {
    longCall() {
      complicatedFunction(
        importantArgument(),
        secondaryArgument()
      );
      weirdStyle({ prop: 1 }, 1, 2, 3);
    },
    render() {
      const user = { name: "James" };
      return (
        <div>
           hello ${name}! JSX is <strong>supported</strong>
        </div>
      );
    }
  };
}

Prettier 会自动帮你处理缩进,判断简单的对象是否可以单行输出,甚至会根据 JSX 特定的语法给 return 内容加上遗漏的括号(),算是相当的“聪明”了。用 Prettier 官方的说法:Prettier is an opinionated code formatter

支持的语言

Prettier 目前支持的语言有:

  • JavaScript, including ES2017
  • JSX
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • JSON
  • GraphQL
  • Markdown, including GFM

可以看出,Prettier 主要针对的是前端开发会使用到的语言,很专注。

编辑器集成

几款主流的代码编辑器都拥有 Prettier 的集成插件:

如果你不愿意去读那些单调枯燥的编码规范文档,建议你用 Prettier,让它帮你解决编码风格的问题吧!

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论