学习使用前端代码规范工具——F2Elint过程记录

参考原文：（阿里巴巴前端代码规范集成工具F2ELint使用教程）
https://blog.csdn.net/qq_37263248/article/details/123361050

代码分析

1. 工具 f2elint 安装

简介： f2elint 是《阿里巴巴前端规约》的配套 Lint 工具，提供简单的 CLI 和 Node.js API，让项目能够一键接入、一键扫描、一键修复、 一键升级，并为项目配置 git commit 卡点，降低项目实施规约的成本。

# 全局安装 f2elint
npm i f2elint -g
# 验证 f2elint 是否安装成功
f2elint -h

2. f2elint 的使用

2.1 在项目根目录，初始化 f2elint

f2elint init

2.2 安装步骤，按实际情况选择即可

2.2.1 会提示选择项目的语言和框架类型

2.2.2 选择是否需要样式的检查

2.2.3 是否检查markdown

2.2.4 是否用Prettier插件格式化代码

2.2.5 检查冲突，确认是否继续：

2.2.6 安装依赖

2.2.7 初始化完成

2.3 .gitignore文件中加上

.editorconfig
.eslintignore
.eslintrc.js
.prettierrc.js
.stylelintignore
.stylelintrc.js
commitlint.config.js
f2elint.config.js

3. 使用效果

IDE中，代码里面会自动分析，提示不符合规约的错误，并提供修改建议。

4. 常见问题

4.1 初始化 f2elint 时，提示 “f2elint : 无法加载文件 C:\Program Files\nodejs\f2elint.ps1，因为在此系统上禁止运行脚本。”

解决方法： 改用如下命令：

f2elint.cmd init

4.2 前端代码规约

详见： 阿里巴巴前端规约及配套工具Github仓库

• 编码规约

• HTML 编码规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/1.html-style-guide.md

• CSS 编码规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/2.css-style-guide.md

• JavaScript 编码规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/3.javascript-style-guide.md

• React 编码规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/4.react-style-guide.md

• Node.js 开发规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/5.node-style-guide.md

• TypeScript 编码规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/6.typescript-style-guide.md

• Rax 编码规约 https://github.com/alibaba/f2e-spec/blob/main/docs/coding/7.rax-style-guide.md

4.3 vscode用户需要安装三个插件

1. ESLint

2. Stylelint

3. Prettier - Code formatter

4.4 关于前后端不分离的老项目，怎么引入 f2elint

解决方案：

# 在项目根目录初始化一个基于 node.js 的项目，生成 package.json 文件
npm init
# 然后就可以初始化 f2elint了
f2elint.cmd init

BUT, 据我观察，前后端不分离的老项目，由于前端页面会包含一些后端的模板，例如：thymeleaf、freemarker等，由于语法不同，在页面中会影响 f2elint 对前端代码的分析。如果大家有什么好的解决思路，可以评论给我哦~

提交分析

1. 安装 husky

husky可以让我们向项目中方便添加git hooks。在 git commit 时会运行 f2elint commit-file-scan 和 f2elint commit-msg-scan 分别对提交文件和提交信息进行规约检查。

npm install husky --save-dev

2. 如果不按规则提交代码，会提示错误

3. 工程规约

• Git 规约 https://github.com/alibaba/f2e-spec/blob/main/docs/engineering/1.git.md

• 文档通用规约 https://github.com/alibaba/f2e-spec/blob/main/docs/engineering/2.doc-writing-practice.md

• 更新日志规约 https://github.com/alibaba/f2e-spec/blob/main/docs/engineering/3.doc-changelog.md