@opentiny/eslint-config

Opentiny eslint 规范

ESLint 规则不仅是一套科学的 ESLint 配置规范，而且也是你配置个性化 ESLint 规则的最佳参考。

规则列表

名称	包含规则	解析器
标准规则	ESLint 规则	babel-eslint
React	ESLint 规则、eslint-plugin-react	babel-eslint
Vue	ESLint 规则、eslint-plugin-vue	vue-eslint-parser
TypeScript	ESLint 规则、@typescript-eslint	@typescript-eslint/parser
TypeScript Vue	ESLint 规则、@typescript-eslint、eslint-plugin-vue	vue-eslint-parser @typescript-eslint/parser
TypeScript React	ESLint 规则、@typescript-eslint、eslint-plugin-react	@typescript-eslint/parser
TypeScript Angular	ESLint 规则、@typescript-eslint、@angular-eslint/eslint-plugin	@typescript-eslint/parser

使用方法

自动安装（强烈推荐）

执行$ tiny lint init，可自动安装 eslint 的运行环境到项目中。

• 需先确保本机已安装 TinyCLI，TinyCLI 安装方式请点击此处
• TinyCLI 中 lint 插件文档：TinyCLI lint 规范工具

手动安装

npm install --save-dev eslint babel-eslint @opentiny/eslint-config

相关依赖参考

如果 eslint 运行有问题，建议使用如下依赖：

 *   eslint 7.16.0
 *   babel-eslint 10.1.0
 *   eslint-plugin-react 7.21.5
 *   vue-eslint-parser 7.3.0
 *   eslint-plugin-vue 7.3.0
 *   @typescript-eslint/parser 4.11.0
 *   @typescript-eslint/eslint-plugin 4.11.0
 *   eslint-plugin-rxjs  3.3.5

标准规则

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: ['@opentiny/eslint-config'],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // jQuery: false,
    // $: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
  }
}

React

安装：

npm install --save-dev eslint babel-eslint eslint-plugin-react @opentiny/eslint-config

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: ['@opentiny/eslint-config/react'],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // React: false,
    // ReactDOM: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ],
    // // jsx 的 children 缩进必须为两个空格
    // 'react/jsx-indent': [
    //     'error',
    //     2
    // ],
    // // jsx 的 props 缩进必须为两个空格
    // 'react/jsx-indent-props': [
    //     'error',
    //     2
    // ]
  }
}

Vue

安装：

npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue @opentiny/eslint-config

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: ['@opentiny/eslint-config/vue'],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // Vue: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // @fixable 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
  }
}

TypeScript

安装：

npm install --save-dev eslint babel-eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @opentiny/eslint-config

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: ['@opentiny/eslint-config/typescript'],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // jQuery: false,
    // $: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
    // // 一个缩进必须用两个空格替代
    // '@typescript-eslint/indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
  }
}

TypeScript Vue

安装：

npm install --save-dev eslint babel-eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue vue-eslint-parser  @opentiny/eslint-config

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: ['@opentiny/eslint-config/typescript/vue'],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // jQuery: false,
    // $: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
    // // 一个缩进必须用两个空格替代
    // '@typescript-eslint/indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
  }
}

TypeScript React

安装：

npm install --save-dev eslint babel-eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react @opentiny/eslint-config

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: ['@opentiny/eslint-config/typescript/react'],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // jQuery: false,
    // $: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
    // // 一个缩进必须用两个空格替代
    // '@typescript-eslint/indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
  }
}

TypeScript Angular

安装：

npm install --save-dev eslint babel-eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @angular-eslint/eslint-plugin eslint-plugin-rxjs @opentiny/eslint-config

在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：

module.exports = {
  extends: [
    '@opentiny/eslint-config/angular',
    '@opentiny/eslint-config/rxjs'
  ],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // jQuery: false,
    // $: false
  },
  rules: {
    // 这里填入你的项目需要的个性化配置，比如：
    //
    // // 一个缩进必须用两个空格替代
    // 'indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
    // // 一个缩进必须用两个空格替代
    // '@typescript-eslint/indent': [
    //     'error',
    //     2,
    //     {
    //         SwitchCase: 1,
    //         flatTernaryExpressions: true
    //     }
    // ]
  }
}