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

前言

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

过程

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使用教程_第1张图片
  安装完成后,可执行 f2elint -h 以验证安装成功。
  在项目根目录执行 f2elint init,即可一键接入规约,为项目安装规约 Lint 所需的依赖和配置。

f2elint init

阿里巴巴前端代码规范集成工具F2ELint使用教程_第2张图片
  f2elint写入了各种配置文件,具体内容如下:

文件名 功能
.eslintrc.js、.eslintignore ESLint 配置(继承 eslint-config-ali)及黑名单文件
.stylelintrc.js、.stylelintignore stylelint 配置(继承 stylelint-config-ali)及黑名单文件
commitlint.config.js commitlint 配置(继承 commitlint-config-ali)
.markdownlint.json、.markdownlintignore markdownlint 配置及黑名单文件
.prettierrc.js 符合规约的 Prettier 配置
.editorconfig 符合规约的 editorconfig
.vscode/extensions.json 写入规约相关的 VSCode 插件推荐,包括 ESLint、stylelint、markdownlint、prettier 等
.vscode/settings.json 写入规约相关的 VSCode 设置,设置 ESLint 和 stylelint 插件的 validate 及保存时自动运行 fix,如果选择使用 Prettier,会同时将 prettier-vscode 插件设置为各前端语言的 defaultFormatter,并配置保存时自动格式化

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

vscode安装eslint、stylelint、prettierrc

  在vscode中安装eslint、styleint和prettierrc三个插件。
阿里巴巴前端代码规范集成工具F2ELint使用教程_第3张图片
阿里巴巴前端代码规范集成工具F2ELint使用教程_第4张图片
阿里巴巴前端代码规范集成工具F2ELint使用教程_第5张图片
  安装好后无需配置,插件会自动找到项目中的.eslintrc.js、.stylelintrc.js、.prettierrc.js等配置文件,到此为止,就可以正常使用阿里的前端命名规范自己的项目了。以下是格式化示例:
阿里巴巴前端代码规范集成工具F2ELint使用教程_第6张图片
阿里巴巴前端代码规范集成工具F2ELint使用教程_第7张图片

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

  这样仓库中就只存在项目文件。
阿里巴巴前端代码规范集成工具F2ELint使用教程_第8张图片

husky安装

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

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

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

阿里巴巴前端代码规范集成工具F2ELint使用教程_第9张图片
阿里巴巴前端代码规范集成工具F2ELint使用教程_第10张图片
  提交成功如图:
阿里巴巴前端代码规范集成工具F2ELint使用教程_第11张图片

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

阿里巴巴前端代码规范集成工具F2ELint使用教程_第12张图片

参考链接

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

你可能感兴趣的:(前端,代码规范,vue.js)