eslint-config-bf-frontend

基于 airbnb 的编码检测, 支持 react、vue、es6+, 在 vscode 中保存时自动按 eslint 格式化后并保存

Usage no npm install needed!

<script type="module">
  import eslintConfigBfFrontend from 'https://cdn.skypack.dev/eslint-config-bf-frontend';
</script>

README

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
  1. 在项目根目录创建 .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
  1. 修改配置
// .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
  1. 增加配置
// .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, 防止某些配置不生效

规则维护

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

增加配置时请增加说明