一、rules
定议各种限定规定，lint 工具的根本目标，就是对代码进行各种限定，对立格调。因为每个人、每个团队谋求的格调不同，所以工具也会提供各种配置，帮忙限定代码
module.exports = { extends: [], plugins: [], rules: { 'quotes': 'single', 'space-before-blocks': 'always', },}二、extends
不同我的项目，如果心愿应用雷同的 rules，间接复制粘贴显然不是一个好办法，一是 rules 太多，配置文件会显得很乱，二是无奈同步更新，举荐应用的办法是把所需的 rules 抽离成一个 npm 包，须要的时候再通过 extends 援用。而且对于这些抽离进去的包，有着对立的命名标准
extends 的模块名称以 eslint-config- 结尾，例如 eslint-config-myconfig 也反对 npm 作用域模块。例如 @scope/eslint-config 或 @scope/eslint-config-myconfig）
应用的时候能够用全称，也能够用缩写
module.exports = { extends: [ 'eslint-config-myconfig', // 全称 //'myconfig' 缩写 ], plugins: [], rules: {},}extends 多个模块，如果规定抵触，地位靠后的包将笼罩后面的。rules 中的规定雷同，并且优先级恒定高于 extends
module.exports = { extends: [ 'eslint:recommend', 'plugin:vue/vue3-recommended', 'prettier', 'prettier/@typescript-eslint' ], plugins: [], rules: {},}三、plugin
能够应用 plugin 定义本人的规定 eslint-plugin-react, eslint-plugin-vue
引入 plugin 能够了解为引入了额定的 rules，须要在 rules、extends 中定义后才会失效
module.exports = { extends: [ 'myconfig' //缩写 'plugin:myplugin/recommended' //插件中的规定 extends ], plugins: ['myplugin'], rules: { 'myplugin/hello': true // 自定义插件规定 },}vue-cli配置
*extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier']*module.exports = { extends: [ 'eslint:recommended', 'plugin:vue/essential', 'prettier', "prettier/vue", // 'plugin:@typescript-eslint/eslint-recommended', //"prettier/@typescript-eslint", ], plugins: [ 'prettier', // "@typescript-eslint" ], rules: { 'prettier/prettier': 'warn', },}四、Prettier
对立我的项目中的代码格调，有两种办法防止 rules 与 Prettier 产生抵触
extends
第一种是对于 Prettier 中所有的配置，ESLint 都进行避让，如：Prettier 能够设置是否每句话前面都加分号。ESLint 进行避让的办法是不查看，也就是加或者不加都不报错，齐全不校验
yarn add eslint-config-prettier -Dmodule.exports = { extends: ['prettier'], plugins: [], rules: {},}这样设置之后，编译器以及控制台中不会报错。保留（如果设置了主动格式化）或者执行命令行格式化的时候，会将代码按 Prettier 的配置 format
plugin
有的同学可能受不了格局谬误不提醒，所以心愿在控制台里看到对应的标红，在控制台里看到编译失败、正告。这时候就能够应用 plugins
yarn add eslint-plugin-prettier -Dmodule.exports = { extends: [], plugins: ['prettier'], rules: { "prettier/prettier": "warn", }}这样就能够清晰的看到格局问题了