使用husky、lintstaged、prettier来规范代码

新来了两个前端同事，大家的代码风格都不太一样，增加了review的难度，听朋友说他们在用prettier，查了点资料试了下：

添加依赖

yarn add --dev husky prettier --registry https://registry.npm.taobao.org --ignore-engines

编辑package.json，添加脚本

npm set-script "pre-commit" "lint-staged" && yarn husky install

新建 .prettierrc.js

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
    trailingComma: 'es5',
    printWidth: 80, //单行长度
    tabWidth: 2, //缩进长度
    useTabs: true, //使用空格代替tab缩进
    semi: true, //句末使用分号
    singleQuote: true, //使用单引号
    quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
    jsxSingleQuote: true, // jsx中使用单引号
    trailingComma: 'all', //多行时尽可能打印尾随逗号
    bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
    jsxBracketSameLine: false, //多属性html标签的‘>’折行放置
    arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
    requirePragma: false, //无需顶部注释即可格式化
    insertPragma: false, //在已被preitter格式化的文件顶部加上标注
    proseWrap: 'preserve', //不知道怎么翻译
    htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
    vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
    endOfLine: 'lf', //结束行形式
    embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

新建 .prettierignore

# Ignore artifacts:
build
coverage
node_modules
public

# Ignore all HTML files:
*.html

添加钩子

npx husky add .husky/pre-commit "yarn pre-commit"

编辑package.json，添加lint-staged

{
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

之后就正常的提交代码，然后prettier会自动编译修改过的代码

参考：

Prettier配置指南

git commit时自动格式化并通过ESlint检查

The engine "node" is incompatible with this module