我的前端配置之代码风格格式化 prettierrc

Question

上一篇介绍的 editorconfig 是给编辑器约束的配置，那么本篇的 prettier 就是给开发者的代码进行风格约束的。可以应用于多种编程语言，比如前端的 HTML、CSS、JavaScript 是标配，其他的如 Markdown、PHP、Swift、Ruby 等等开发语言都支持。

.prettierrc.js

在项目根目录新 .prettierrc.js：

module.exports = {
    printWidth: 120,
    tabWidth: 4,
    useTabs: false,
    singleQuote: true,
    semi: true,
    htmlWhitespaceSensitivity: 'ignore'
};

使用

yarn global add prettier

格式化之前：

/**
 * js
 * @author ydr.me
 * @create 2019-09-01 21:28:20
 * @update 2019-09-01 21:28:20
 */

'use strict';showMessage('Hello')

function showMessage(message) {
alert(message)
}

格式化之后：

prettier 虽然可以格式化我们的代码，但还不具备约束作用，可以跟 eslint 进行配合进行强约束，我们下文再说。