云社区 博客 博客详情

前端代码风格实践 prettier + ESLint + Git Hook + lint-staged

SegmentFault思否 发表于 2020-11-09 22:59:58 2020-11-09
0
0

【摘要】 整洁的代码如同优美的散文。—— Grady Booch前言: 在繁杂的业务迭代时,接手其他项目,如果没有一个统一的代码风格,阅读起来是相当困难的,毕竟团队里的每个人习惯不一样。团队协作,意味着需要牺牲一些个性,减少一些没必要的争吵。1.Prettier是什么?顾名思义 prettier(更漂亮的),让你的代码更漂亮。官网说的很清楚了An opinionated code fo...

image

整洁的代码如同优美的散文。—— Grady Booch

前言: 在繁杂的业务迭代时,接手其他项目,如果没有一个统一的代码风格,阅读起来是相当困难的,毕竟团队里的每个人习惯不一样。团队协作,意味着需要牺牲一些个性,减少一些没必要的争吵。

1.Prettier是什么?

顾名思义 prettier(更漂亮的),让你的代码更漂亮。官网说的很清楚了

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

很少的配置,意味着强约制,也遵循了第一条 opinionated 。what-is-opinionated-software,简单来说就是强约制,给你选择的机会少。这种设计理念用在 代码风格统一 的工具上是极其正确的,目的就是统一,少量的配置,让团队停止争吵。

2.ESlint是什么

ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。

ESLint 是一个代码检查工具,它能够被开发者灵活的配置option,使其能够满足制定好的代码规范的要求。

tip:前端代码不管TS还是ES,都用ESLint, TSLint已经不在维护了

3.Prettier 和 ESLint 的区别

我开始的时候也认为这两个东西好像有点重复,确实有交集,不过Prettier 只会做代码风格的统一,并不会检查代码规范,关于代码规范的检查应该交给 ESLint。

ESLint 主要解决的是代码规范,虽然ESLint也可以解决一些代码风格问题,但做的不够好, 而prettier就是为了 format 而生的工具。

总结:ESLint 专注于全方位的 Lint 检查,Prettier 专注于代码格式化相关。

4.实践

4.1配置 eslint

npm i -D eslint
//.eslintrc.js
module.exports = {
  root: true,
  env: { node: true
  },
  extends: ['eslint:recommended'],
  rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', //强制使用单引号 quotes: ['error', 'single'],  // 看这里,是不是和prettier做了重复的事情,可删哦~ //强制不使用分号结尾 semi: ['error', 'never']
  },
  parserOptions: { parser: 'babel-eslint', ecmaVersion: 6 // 支持es6
  }
}

4.2配置 prettier

npm i -D prettier
// .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 个空格缩进
  tabWidth: 2,
  // 不使用缩进符,而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号,而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数,只有一个参数的时候,也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 换行符使用 lf
  endOfLine: 'lf'
}

4.3 ESLint 与 Prettier配合使用

npm i -D eslint-plugin-prettier
//.eslintrc.js
module.exports = {
  rules: { 'prettier/prettier': 'error'  // 标记
  },
  "extends": ["plugin:prettier/recommended"] // 插件
}

如果是vue的项目记得加上, "plugin:vue/essential"也要安装哦~

npm i -D eslint-plugin-vue

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记。

当执行ESLint fix的时候prettier的lint冲突会被ESLint当做错误处理

4.4 解决eslint和prettier的冲突

上文提到,ESLint 与格式化相关的 rule 和 prettier 的 rule 有些重叠,如果想把格式化相关的事情都交给 prettier 去做,使用这个工具可以屏蔽掉 ESLint 与格式化相关的 rule。

安装 eslint-config-prettier 即可

npm i -D eslint-config-prettier

4.5安装 lint-staged husky

npm install husky lint-staged
// package.json
"husky": {
  "hooks": { "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js, css, md}": "eslint --fix"
},

4.6 最后 vscode配置

打开配置文件 setting.json

//setting.json
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true,  // 保存时自动执行eslint }, }

5.总结

配置完 基情享受同事的的拥抱吧!

文章来源: segmentfault.com,作者:solvep,版权归原作者所有,如需转载,请联系作者。

原文链接:segmentfault.com/a/1190000037768150

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:使用流读文件写文件处理大文件

下一篇:接口测试如何在post请求中传递文件

评论 (0)


登录后可评论,请 登录注册

评论