阿里巴巴前端代码规范集成工具F2ELint使用教程

  最近开始学习前端，新建了一个前端项目，打算从项目初期就把项目的地基打好，定义好这个项目的编码和工程规范，原本的方案是分别部署Eslint + Prettier + Husky + Commitlint+ Lint-staged。这一套方案如果挨个部署要写好多配置文件，挺耗费精力的，后来我发现了阿里巴巴有一个「阿里巴巴前端规约」项目，项目主要包括「规约文档」和「配套工具」两部分，目前只开放了「配套工具」部分，可以使用 F2ELint 等配套工具实现项目规范。
  项目是去年才开始的，知道的人还不多，每周的下载量也就几百。目前（2022.3.8）在github上只有267颗星星 ，8天前发布了2.2.1版本。推荐下载尝鲜。

过程

f2elint安装

  首先需要初始化项目，生成package.json文件：

npm init

  定义好项目相关信息后，安装f2elint

npm install f2elint -g 
# 或使用淘宝镜像
npm install f2elint -g --registry=http://registry.npm.taobao.org 

  安装过程会叫你选择这个项目相关语言、框架、lint信息，我的项目目前没使用Vue等框架，同时也不需要MarkdownLint，所以就选了styleLint和Prettier格式化代码（Eslint和Commitlint是默认的）。大家可根据自己的项目实际情况进行选择。

  安装完成后，可执行 f2elint -h 以验证安装成功。
  在项目根目录执行 f2elint init，即可一键接入规约，为项目安装规约 Lint 所需的依赖和配置。

f2elint init

  f2elint写入了各种配置文件，具体内容如下：

  同时f2elint配置了 git commit 卡口，在 git commit 时会运行 f2elint commit-file-scan 和 f2elint commit-msg-scan 分别对提交文件和提交信息进行规约检查。

vscode安装eslint、stylelint、prettierrc

  在vscode中安装eslint、styleint和prettierrc三个插件。



  安装好后无需配置，插件会自动找到项目中的.eslintrc.js、.stylelintrc.js、.prettierrc.js等配置文件，到此为止，就可以正常使用阿里的前端命名规范自己的项目了。以下是格式化示例：

git

  初始化git本地仓库，提交代码并连上github。（github上必须要先创建一个仓库）

git init
git add .
git commit -m "xxxxx"
git remote add origin https://github.com/XXXXX/projectname.git

  同时，我创建了一个.gitignore文件，将不需要上传到仓库上的配置文件写了进去，具体内容如下：

.vscode/
node_modules/
.editorconfig
.eslintignore
.eslintrc.js
.prettierrc.js
.stylelintignore
.stylelintrc.js
commitlint.config.js
f2elint.config.js
package.json
package-lock.json

  这样仓库中就只存在项目文件。

husky安装

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

# 安装husky
npm install husky --save-dev

  安装好后，如果没有按照规范提交，就会提示提交失败，以下是两个提交失败的例子，第一个不符合ESlint规范，第二个不符合commit规范。

  提交成功如图：

Git Commit 规范

<type>(<scope>): <subject>

  type：用于说明 commit 的类别，只允许使用下面8个标识。

1. feat：新功能（feature）
2. fix：修补bug
3. docs：文档（documentation）
4. style： 格式（不影响代码运行的变动）
5. refactor：重构（即不是新增功能，也不是修改bug的代码变动）
6. test：增加测试
7. chore：构建过程或辅助工具的变动
8. build: 本地creator构建

  scope：用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。
  subject是 commit 目的的简短描述，不超过50个字符。

1. 以动词开头，使用第一人称现在时，比如change，而不是changed或changes
2. 第一个字母小写
3. 结尾不加句号（.）

可能遇到的问题

  如果在执行f2elint init时，提示：因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
  这是因为计算机上启动 Windows PowerShell 时，执行策略很可能是 Restricted（默认设置）。 Restricted 执行策略不允许任何脚本运行。

# 输入后选y，更改执行策略
set-executionpolicy remotesigned

参考链接

阿里巴巴前端规约及配套工具Github仓库
f2elint Npm包
git原理–commit规范
PowerShell：因为在此系统上禁止运行脚本，解决方法