eslint-config-bf-frontend

在田 eslint 规则库

特性

• 规则基于 airbnb(es6)
• 支持 react, react-a11y, react-hooks
• 支持 vue
• 支持 typescript

使用

vue 使用点击这里

1. 安装

npm install eslint eslint-babel eslint-config-bf-frontend

2. 在项目根目录创建 .eslintrc.js 配置文件

// 默认是 es6+ 和 react
{
  "extends": "eslint-config-bf-frontend"
}

// 使用 es6+ 和 vue
{
  "extends": "eslint-config-bf-frontend/vue"
}

// 只使用 es6+
{
  "extends": "eslint-config-bf-frontend/base"
}

配合 Prettier 使用

1. Install

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

2. 修改配置

// .eslintrc.js
module.exports = {
  extends: ["eslint-config-bf-frontend", "prettier", "prettier/react"],
  plugins: ["prettier"],
  parser: "babel-eslint",
  rules: {
    "prettier/prettier": "error",
    // other rules...
  },
};

// .prettierrc.js
module.exports = {
  singleQuote: true,
  // other rules
};

VSCode 中使用

1. 安装插件

• Prettier
• ESLint

2. 增加配置

// .vscode/.settings.json
{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "prettier.singleQuote": true, // 防止配置没有生效
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }

    // typescript
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
}

注意: 修改后最好 reload 一下 vscode, 防止某些配置不生效

规则维护

规范调整前, 请先在群中周知, 没问题后再进行调整代码

增加配置时请增加说明