ESLint + Prettier + Airbnb Style Guide 配置教程
项目目录结构及介绍
eslint-prettier-airbnb-react/
├── .github/
│ └── workflows/
│ └── main.yml
├── .vscode/
│ └── extensions.json
├── scripts/
│ └── setup.sh
├── .eslintrc.js
├── .prettierrc
├── .gitignore
├── package.json
├── README.md
└── LICENSE
- .github/workflows/main.yml: GitHub Actions 的工作流配置文件。
- .vscode/extensions.json: Visual Studio Code 推荐的扩展列表。
- scripts/setup.sh: 项目初始化脚本。
- .eslintrc.js: ESLint 配置文件。
- .prettierrc: Prettier 配置文件。
- .gitignore: Git 忽略文件列表。
- package.json: 项目依赖和脚本配置。
- README.md: 项目说明文档。
- LICENSE: 项目许可证。
项目的启动文件介绍
项目的启动文件主要是 scripts/setup.sh
,这是一个 Bash 脚本,用于初始化项目并安装必要的依赖。你可以通过运行以下命令来执行该脚本:
bash scripts/setup.sh
该脚本会自动安装 eslint
、prettier
和 airbnb
相关的依赖,并配置好相应的文件。
项目的配置文件介绍
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
// 自定义规则
},
};
- env: 指定代码运行的环境。
- extends: 使用
airbnb-base
风格指南。 - parserOptions: 指定 ECMAScript 版本和模块类型。
- rules: 自定义规则。
.prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80
}
- singleQuote: 使用单引号。
- trailingComma: 在多行逗号分隔的语法结构中尽可能添加尾随逗号。
- printWidth: 每行代码的最大长度。
通过这些配置文件,你可以确保项目代码风格的一致性和可维护性。