eslintfabric

@esg/eslintfabric

一个包含 prettier， react Eslint,vue/vue3 Eslint,ts 的配置文件合集

A collection of configuration files containing prettier, react Eslint,vue/vue3 Eslint,ts

Use

安装

npm i @esg/eslintfabric  --save-dev
yarn add @esg/eslintfabric  -D

in .eslintrc.js

const fabric = require('@esg/eslintfabric');
module.exports = {
  extends: [require.resolve(fabric.eslint)],
  rules: {
    // your rules
  },
};

in .prettierrc.js

const fabric = require('@esg/eslintfabric');

module.exports = {
  ...fabric.prettier,
};

@esg/eslintfabric 自定义规则

| 规则 | 实现方式 |
| — | — | — |
| 构造函数（类）命名 | @esg/rules/ctor-pascal:2 |
| 常量使用全部字母大写，单词间下划线分隔 | eslint/camelcase :2 |
| 函数, 函数的参数使用 Camel 命名法。 | eslint/camelcase :2 |
| 缩写词比如 xml、html、HTTP，所有字母的大小写与首字母的大小写保持一致。 | ‘@esg/rules/abbreviations’: 1, |
| boolean 类型的变量 使用 is 或 has 开头 * | ‘@esg/rules/boolname’: 1 , |
| JS、CSS、SCSS、HTML、PNG 文件命名 ** | 1. 已实现 js 文件命名判断，通过处理器过滤仅当有 eslint 错误提示时显示 2.其他暂无实现方式 |
| 类名，使用名词 * | 词性判断暂时实现不了 × |
| 函数名，使用动宾短语 * | 词性判断暂时实现不了 × |
| 命名严谨性 中英文混，随意缩写 | 建议人工判断 |
| 普通函数：首字母小写，驼峰式命名，统一使用动词或者动词+名词形式 * | 词性判断暂时实现不了 × |
| 涉及返回逻辑值的函数可以使用 is，has，contains 等表示逻辑的词语代替动词 * | return 的值无法计算 |
| 项目命名全部采用小写方式， 以中划线分隔 ** | eslint 只能做代码解析 | eslint 只能做代码解析 |
| 目录命名全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法 | eslint 只能做代码解析 |

依赖项说明

基础依赖项（baseEslint）

1. eslint-plugins-eslint-comments,
2. eslint-config-prettier,
3. @esg/eslint-plugin-rules,
4. eslint-plugin-prettier

vue 项目依赖项（vueEslint）

extend：

1. plugin:vue/recommended[vue2] || plugin:vue/vue3-essential[vu3]
2. baseEslint

如果是 ts 项目 vueEslint 配置则新增下列依赖：

1. ‘@vue/typescript/recommended’,
2. tsEslintConfig(见 src/tsEslintConfig.json)

react 项目依赖项（reactEslint）

extend：

1. ‘plugin:react/recommended’,
2. ‘prettier/react’
3. baseEslint
4. react-app

plugins:

1. ‘react’,
2. ‘react-hooks’

如果是 ts 项目 vueEslint 配置则新增下列： tsEslintConfig(见 src/tsEslintConfig.json)

推荐 vscode eslint 配置

settings.json

  // 保存后自动修复格式
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "editor.formatOnSave":true,
  "eslint.format.enable":true,
  "files.autoSave": "onFocusChange",
  "editor.formatOnType": true,
  "eslint.enable": true,
  // 添加vue支持
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
  ],