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
// }
// ]
}
}