f2elint配置使用| 青训营笔记

403 阅读1分钟

这是我参与「第五届青训营 」笔记创作活动的第7天


我们小队选题是组件库,关于项目工程化 我们决定使用f2elint保证组件库的质量。

在讨论项目使用哪种lint工具时,我们小组进行了详细的讨论:原本考虑使用ESLint+prettier,但是考虑到配置麻烦以及可能出现的冲突问题,我们最后决定使用f2elint工具

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

下面是关于项目配置f2elint的文档。

创建项目

我们的项目技术选型是vite + vue + typescript,我们先创建一个示例项目

yarn create vite

然后是关于项目的具体选择

image-20230121173319164.png

配置f2elint

先使用npm命令全局安装f2elint包

npm install f2elint -g

可以使用以下命令查看是否安装成功

f2elint -V
f2elint --version

image-20230121173721557.png 然后在vscode中安装ESLint,prettier,Stylelint插件

image-20230121174318125.png

接入f2elint

进入项目文件夹根目录,并使用以下命令初始化,并按照项目安排确定选项

f2elint init

接下来是关于项目具体的配置选项。

在本次演示中,我选择vue+typescript,以及不需要stylelint,markdownlint等。

image-20230121175625526.png 可以使用以下命令查看是否成功引入f2elint

f2elint -h

image-20230121181005768.png 这样我们就把项目的f2elint配置好了,可以在保存的时候自动按照规约格式化代码