使用husky、lint-staged、prettier来规范代码

2022-01-27 17:03:04 阅读：180 来源： 互联网

标签：vue lint staged add 添加 prettier husky true

新来了两个前端同事，大家的代码风格都不太一样，增加了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

标签：vue,lint,staged,add,添加,prettier,husky,true
来源： https://www.cnblogs.com/shining77/p/15850446.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用husky、lint-staged、prettier来规范代码