Package Exports

@afuteam/eslint-plugin-fe
@afuteam/eslint-plugin-fe/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@afuteam/eslint-plugin-fe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@afuteam/eslint-plugin-fe

AfuTeam eslint rules

简介

AfuTeam eslint rules 是一个基于 eslint 的 __前端代码规范集合__。

目前包含 JavaScript、react(16.x、17.x+)、vue(2.x、3.x+)、Typescript(4.x、5.x)的rules。

其中：

JavaScript 的 extends 为 eslint:recommended
react(16.x、17.x+) 的 extends 为 plugin:react/recommended__、__plugin:jsx-a11y/recommended
vue2 的 extends 为 plugin:vue/essential
vue3 的 extends 为 plugin:vue/vue3-essential
Typescript(4.x、5.x) 的 extends 为 plugin:@typescript-eslint/eslint-recommended

安装

默认最新；对于使用最新版本各个依赖如果运行依赖有问题的，可尝试下面首行参考说明的版本；同时也欢迎提到issues，方便大家快速接入 :smile

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest -D

配置

在 .eslintrc.js 添加下面配置：

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe'
  ]
}

然后根据项目包含的类型，在配置文件中自行搭配，如:

React(16.x、17.x+)

1. React16.x

babel-eslint最新10.1.0 已废弃，建议使用 @babel/eslint-parser

参考：

eslint ^7.11.0

eslint-plugin-react ^7.21.4

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest eslint-plugin-react -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/react16'
  ]
}

2. React17.x+

参考：

eslint ^8.45.0

@babel/core ^7.22.9

@babel/eslint-parser ^7.22.9

@babel/preset-react ^7.22.5

eslint-plugin-react ^7.33.0

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest eslint-plugin-react @babel/preset-react -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/react'
  ]
}

Vue(2.x、3.x+)

1. Vue2.x

babel-eslint最新10.1.0 已废弃，建议使用 @babel/eslint-parser

参考：

eslint ^7.11.0

vue-eslint-parser ^7.1.1

eslint-plugin-vue ^6.2.2

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest vue-eslint-parser eslint-plugin-vue -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/vue2'
  ]
}

2. Vue3.x

参考：

eslint ^8.45.0

@babel/core ^7.22.9

@babel/eslint-parser ^7.22.9

vue-eslint-parser ^9.3.1

eslint-plugin-vue ^9.15.1

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest vue-eslint-parser eslint-plugin-vue -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/vue3'
  ]
}

typescript(4.x、5.x)

1. typescript4.x

babel-eslint最新10.1.0 已废弃，建议使用 @babel/eslint-parser

参考：

eslint ^7.11.0

@typescript-eslint/parser ^4.4.1

@typescript-eslint/eslint-plugin ^4.4.1

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest @typescript-eslint/parser@4.x @typescript-eslint/eslint-plugin@4.x -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/typescript4'
  ]
}

2. typescript5.x+

参考：

eslint ^8.45.0

@babel/core ^7.22.9

@babel/eslint-parser ^7.22.9

@typescript-eslint/parser ^6.2.0

@typescript-eslint/eslint-plugin ^6.2.0

pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/typescript5'
  ]
}

组合示例

vue2.x + typescipt4.x

# 组合
pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest vue-eslint-parser eslint-plugin-vue  @typescript-eslint/parser@4.x @typescript-eslint/eslint-plugin@4.x -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/vue2',
    '@afuteam/fe/typescript4'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: {
      js: '@babel/eslint-parser',
      jsx: '@babel/eslint-parser',
      ts: '@typescript-eslint/parser',
      tsx: '@typescript-eslint/parser',
    },
  },
}

react17.x + typescript5.x

# 组合
pnpm i eslint @babel/core @babel/eslint-parser @afuteam/eslint-plugin-fe@latest eslint-plugin-react @babel/preset-react  @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

module.exports = {
  // 省略其他配置
  extends: [
    '@afuteam/fe',
    '@afuteam/fe/react',
    '@afuteam/fe/typescript5'
  ]
}

JSPM