@5rabbits/eslint-config 中文文档教程

Question

5rabbits ESLint config

Lemontech 产品的共享 ESLint 配置。

Installation

• Install @5rabbits/eslint-config and its dependencies:

$ export PKG=@5rabbits/eslint-config && npm info $PKG peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev $PKG

• 如果您有 .eslintrc 文件，请添加 "extends": ["@5rabbits"]。

• 如果您没有 .eslintrc 文件，请在项目的根目录下创建它：

$ echo '{\n  "extends": ["@5rabbits"]\n}' > .eslintrc

Usage

• Add a lint script to your package.json:

  {
    "scripts": {
      "lint": "eslint . --ext .js,.jsx"
    }
  }

• Run with yarn lint to check the entire project.

Prettier

如果项目使用 code>prettier（推荐），安装eslint-config-prettier 并将 "prettier" 附加到 .eslintrc extends 数组。

Integrations

Git

您可以使用 husky 和 lint-staged 在提交之前对更改的文件进行 lint。 示例：

// package.json
{
  "lint-staged": {
    "*.{js,jsx}": ["eslint"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

如果更改导致 lint 错误，提交将失败，直到您修复它们。

Webpack

使用 eslint-loader 在 webpack 构建中自动检查文件。

Rollup

使用 rollup-plugin-eslint 在汇总构建中自动检查文件。