ESLint + Prettier + Airbnb Style Guide 配置教程

ESLint + Prettier + Airbnb Style Guide 配置教程

eslint-prettier-airbnb-reactESlint + Prettier + Airbnb Style Guide Configuration for React项目地址:https://gitcode.com/gh_mirrors/es/eslint-prettier-airbnb-react

项目目录结构及介绍

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: 每行代码的最大长度。

通过这些配置文件，你可以确保项目代码风格的一致性和可维护性。

eslint-prettier-airbnb-reactESlint + Prettier + Airbnb Style Guide Configuration for React项目地址:https://gitcode.com/gh_mirrors/es/eslint-prettier-airbnb-react