f2elint总结

威大大
2,651 阅读2分钟

f2elint是什么？

f2elint github地址

一套lint工具的集合，可以为项目一键接入规约、一键扫描和修复规约问题，保障项目的编码规范和代码质量

一句话就是集成了eslint prettier stylelint commitlint markdownlint editorconfig husky lint-staged等十几种依赖包，提供简单的api,来保障项目的编程规范

为什么要用f2elint？

  1. 项目想统一代码风格，保证代码质量问题，就得引入ESLint，Prettier又得引入相应得依赖包，还要防止Prettier 和 ESLint 一起使用时的冲突，一通操作

  2. 看着隔壁小周，用VSCode编辑器command + s，代码自动格式化，直呼好香～ 问了下原来是配置了VSCode settings.json ，然后又是一通操作

  3. 打开项目git历史记录一看，哎～ 小李怎么把不符合lint规范的文件也提交上来，commit备注信息也不完善。你想到可以设置git hooks，在pre-commit阶段添加lint校验，但是git hooks目录又是在.git文件夹的hooks下，对于任何git仓库来说钩子都是本地的，不受版本控制影响。你立马google一下，原来还有husky，pre-commit这些git hooks工具。再配合lint-staged，就可以实现每次commit的时候eslint只检查 staged (git 暂存)文件，提高效率。再接着添加commitlint对备注信息进行校验，又一通操作

  4. 一通操作下来，心好累，你问有没有简单的办法？ 有！ f2elint就是答案

怎么用f2elint？

  1. npx f2elint init 在项目中接入f2elint，根据项目的需要选择相应配置，此步骤会自动删除package.json文件中eslint,stylelint等各种lint依赖项image.png
  2. 根据我们自己项目的需要手动修改lint规则，如.editorconfig .prettierrc.js .eslintrc.js stylelint.config.js等配置文件
  3. 将我们项目中的eslint ./src --ext=**** 修改为 f2elint scan fix修改为f2elint fix

最终效果

通过上述的配置，来我们来康康最后的效果是怎么样

  1. 首先来确认下vscode已经安装.vscode/extensions.json文件中推荐的插件
    image.png
  2. 我们在vscode中 command + s保存一下修改的文件，保存文件时就自动按照Prettier eslint styleLint的配置格式化
  3. 然后我们来试试看git commit时的效果
  • 不符合eslint规范的，不能提交
  • git commit备注信息不规范的，不能提交
avatar
文章
阅读
粉丝