前端项目构建-初始化项目
date
Oct 22, 2025
slug
front-end-project-basic-configuration
status
Published
tags
前端项目
summary
在开发前端项目中，我们会对项目进行一系列的约束。使得项目可以更健壮的开发。
type
Post
在开发前端项目中，我们会对项目进行一系列的约束。使得项目可以更健壮的开发。
代码规范
EditorConfig
EditorConfig 帮助维护多个开发者在不同编辑器和 IDE 中协同工作时的代码风格一致性。EditorConfig 项目包括一个用于定义代码风格的文件格式以及一系列文本编辑器插件，这些插件使编辑器能够读取该文件格式并遵循定义的样式。EditorConfig 文件易于阅读，并且与版本控制系统配合良好。
安装
在你所用的编辑器安装 EditorConfig 插件即可。
配置
创建 .editorconfig文件，下面是 EditorConfig 的基础配置。
Prettier
Prettier 是一个代码格式化工具，可以帮助开发人员自动格式化代码，使代码风格保持一致。它支持多种编程语言，包括 JavaScript、TypeScript、CSS、HTML、JSON 等。Prettier 的主要目标是通过提供一致的代码格式化规则来减少团队成员之间的代码格式争论，并提高代码的可读性和可维护性。
安装
在编辑器里安装 Prettier 插件即可。
配置
在项目中集成 prettier
创建 .prettierrc 文件
ESLint
ESLint 是一个用于 JavaScript 代码的静态代码分析工具，它可以帮助开发人员发现和修复代码中的问题，确保代码的质量和一致性。ESLint 可以检查代码中的语法错误、代码风格问题以及可能的逻辑错误。
安装
在你使用的编辑器中安装 eslint 插件即可。
配置
项目集成 eslint
初始化项目配置
接下来 exlint 脚手架会问你如下问题：
- 你希望如何使用 ESLint
- 你的项目使用什么类型的模块
- 你的项目使用哪个框架
- 你的项目使用 TypeScript 吗？
- 你的代码运行在什么环境？
- 你希望如何为你的项目定义风格
- 你希望遵循哪个风格指南？
- 你希望你的配置文件采用什么格式？
StyleLint
安装
在编辑器安装 stylelint 插件即可。
集成
配置
ESLint、Stylelint 和 Prettier 的冲突
解决可能存在的冲突问题。
eslint冲突
安装插件 eslint-config-prettier ，这个插件会禁用所有和 prettier 起冲突的规则：
添加以下配置到 .eslintrc.js 的 extends 中：
这里需要注意， 'prettier' 及之后的配置要放到原来添加的配置的后面，这样才能让 prettier 禁用之后与其冲突的规则。
stylelint冲突
stylelint 的冲突解决也是一样的，先安装插件 stylelint-config-prettier ：
添加配置
增加lint命令
husky
在提交或推送时自动 检查提交信息 、 代码 和 运行测试 。
安装
配置
修改 husky 创建的
pre-commit 的钩子，钩子中内容为
在 package.json 中添加脚本：
"prepare"："husky install"。npm install时默认会执行这个脚本lint-staged
之前我们的配置是每次
git commit的时候都执行一次npm run lint，这个命令会把src文件夹下的所有符合文件格式的文件都走一遍eslint校验，这显然是不太合理的；尤其是项目越来越大的时候这更是一个很耗时的操作。所以，我们需要过滤出git暂存区里的文件，仅对暂存区的文件做eslint校验即可。
lint-staged就是这样一个工具，它可以帮我们过滤出 Git 代码暂存区文件(被 git add 的文件)。这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了呀，可能导致项目改动很大。
lint-staged 总是将所有暂存文件的列表传递给任务。安装
在
package.json中新增如下命令这条命令的意思是，对于暂存区中
src文件夹下后缀名为ts,tsx,js,jsx的文件执行eslint校验并自动修复可修复的eslint报错。结合 husky 使用
修改
pre-commit钩子 将pre-commit钩子的内容修改为如下：完成
一个完整的前端项目就配置好了。