前端:第1个项目,使用阿里前端规范生成代码模板

工欲善其事, 必先利其器, 不同的开发者可能使用不同的编辑器:例如: vscode和webstorm , 但是不同的环境下, 代码的格式化效果不同, 如何在多端情况下保持代码格式统一呢?

插件介绍

prettier: 官网介绍:

• 一个“有态度”的代码格式化工具

eslint: 能检测并修复 JavaScript 代码中的bug

lint的发展历史参考: https://zhuanlan.zhihu.com/p/34656263

f2e-spec:

「阿里巴巴前端规约」是在阿里经济体内广泛使用的一套前端编码和工程规范，致力于通过统一编码风格、普及最佳实践和代码缺陷检查帮助团队降低协作成本、提升前端项目的可维护性和稳定性。

本项目主要包括「规约文档」和「配套工具」两部分。你可以通过阅读规约文档了解各前端语言、框架及工程规范，并使用 F2ELint 等配套工具来为项目接入规约检查。

工具使用

f2e使用

安装并使用插件生成项目

npm install f2elint -g

npx f2elint

C:\Users\zatc>mkdir tmp_test

C:\Users\zatc>cd tmp_test

// 安装插件
C:\Users\zatc\tmp_test>npm install f2elint -g

changed 91 packages in 6s

C:\Users\zatc\tmp_test>dir
2025/02/22  11:01    <DIR>          .
2025/02/22  11:01    <DIR>          ..
               0 个文件              0 字节

// 执行插件生成项目, 根据提示一步步选择需要的项目模板和配置.
C:\Users\zatc\tmp_test>npx f2elint

T  🚀 阿里巴巴前端规约 4.9.1
|
o  📁 选择项目位置
|  C:\Users\zatc\tmp_test
|
o  🧰 选择预设模版
|  Base (JavaScript)
|
o  💅 启用 Stylelint 样式检查
|  Yes
|
o  💅 启用 Prettier 代码格式化
|  Yes
|
o  ✅ 初始化项目完成
|
o  📦 安装或更新依赖
|  npm
|
o  ✅ 安装依赖成功
|
—  🎉 规约初始化完成，建议安装推荐的 VS Code 插件并重启 VS Code


C:\Users\zatc\tmp_test>dir
 驱动器 C 中的卷是 OS
 卷的序列号是 28D0-37DA

 C:\Users\zatc\tmp_test 的目录

2025/02/22  11:02    <DIR>          .
2025/02/22  11:01    <DIR>          ..
2025/02/22  11:02               189 .editorconfig
2025/02/22  11:02                96 .eslintignore
2025/02/22  11:02               106 .prettierignore
2025/02/22  11:02                97 .stylelintignore
2025/02/22  11:02    <DIR>          .vscode
2025/02/22  11:02    <DIR>          node_modules
2025/02/22  11:02           228,433 package-lock.json
2025/02/22  11:02               826 package.json
               6 个文件        229,747 字节
               4 个目录 16,547,880,960 可用字节