ESLint配置文件plugins、extends、rules的区别

平易近人
• 阅读 8656

一、rules

定议各种限定规则,lint 工具的基本目的,就是对代码进行各种限定,统一风格。因为每个人、每个团队追求的风格不同,所以工具也会提供各种配置,帮助限定代码

module.exports = {
  extends: [],
  plugins: [],
  rules: {
    'quotes': 'single',
    'space-before-blocks': 'always',
  },
}

二、extends

指定的规范,去检查指定类型的文件,
1.根据 @typescript-eslint/recommended 规范,检查 ts 代码。
2.根据 eslint:recommended + prettier 规范,去检查 js 代码。
存在某些规范冲突时,后面的会覆盖掉前面的,
Prettier制定的规范,会覆盖掉 eslint:recommended 的某些规范

使用的时候可以用全称,也可以用缩写

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'    //8.x所有配置已合并一个
  ], 
  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 -D
module.exports = {
  extends: ['prettier'],
  plugins: [],
  rules: {},
}

这样设置之后,编译器以及控制台中不会报错。保存(如果设置了自动格式化)或者执行命令行格式化的时候,会将代码按 Prettier 的配置 format

plugin

有的同学可能受不了格式错误不提示,所以希望在控制台里看到对应的标红,在控制台里看到编译失败、警告。这时候就可以使用 plugins

yarn add eslint-plugin-prettier -D
module.exports = {
  extends: [],
  plugins: ['prettier'],
  rules: {
    "prettier/prettier": "warn",
  }
}

这样就可以清晰的看到格式问题了

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
Vue 项目中 ESlint 配置
前言对于ESlint这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了。一、eslint安装1、全局安装npmigeslint全局安装的好处是,在任何项目我们都可以使用eslint的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍;全局安装之后
DevOpSec DevOpSec
2年前
解决研发痛点SnoarQube代码检查实战
1.代码质量检查,想知道团队成员代码质量情况,团队人多后每个人的代码风格和代码水平不一通过sonar检测能做到代码基准的一个把控。2.master代码质量是基准,可以理解master分支的sonar检测是通过的,分支代码质量检查和master代码进行比对,我们是master上线。3.sonar检测后把结果发送通知给对应的开发和其TL,开发能及时知道自己开发代码是否有问题
Easter79 Easter79
3年前
Vue+Webpack配置css
  使用VueWebpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Modulebuildfailed:Unknownword。  配置内容如下:{  test:/\.css$/,  use:
Stella981 Stella981
3年前
Spring Schedule整合配置
SpringSchedule是spring提供的任务调度框架。很简单,也很强大,简单是因为只需要在spring配置文件中写一行代码配置一下。就ok,强大是因为调度表达式。这里会给出一个网站,在线生成,满足你各种所需。看代码在spring的配置文件中加上下面这个代码://约束xmlns:task"http://www.sprin
Wesley13 Wesley13
3年前
LAMP环境
11.28限定某个目录禁止php解析本节内容应用于对静态文件目录或可写的目录进行优化设置,通过限制解析/访问权限来避免别恶意攻击,提高安全性。编辑虚拟主机配置文件:root@adailinux111.comvim/usr/local/apache2.4/conf/extra/httpd
Wesley13 Wesley13
3年前
GO 编码规范
编码规范本规范旨在为日常Go项目开发提供一个代码的规范指导,方便团队形成一个统一的代码风格,提高代码的可读性,规范性和统一性。本规范将从命名规范,注释规范,代码风格和Go语言提供的常用的工具这几个方面做一个说明。该规范参考了go语言官方代码的风格制定。一、命名规范命名是代码规范中很重要的一部分,统一的命名规则有
Easter79 Easter79
3年前
Spring支持多数据源的@Transactional事务注解
1、配置事务注解驱动、每个数据源对应的事务管理器,并定义“限定符”<tx:annotationdriven/    <bean id"transactionManager1" class"org.springframework.jdbc.DataSourceTransactionManager"  ... 
京东云开发者|代码评审的价值和规范
评审目的代码评审的目的就是为了保证公司整体代码的健康状况随着不断迭代,始终保持一个较高的水平,所有在评审中使用的工具和流程都应是为此目的而设计的。评审原则鼓励质疑保持代码风格,遵守开发规范
公孙晃 公孙晃
2年前
WebStorm for Mac(JavaScript开发工具) v2023.1汉化版
WebStormMac版专为现代Web开发而设计,提供了各种工具和功能,帮助开发者编写高质量的JavaScript、HTML和CSS代码。
深入理解java和dubbo的SPI机制 | 京东物流技术团队
1SPI简介1.1SPI(ServiceProviderInterface)本质:将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类。这样可以在运行时,动态为接口替换实现类。javaSPI:用来设计给服务提供商做插件使用的。基于策略
小尉迟 小尉迟
1年前
KORG Gadget 2,音乐制作的神器!
KORGGadget提供40多种小工具乐器,包括合成器、键盘、鼓机、采样器、原声声音和音轨,为您提供涵盖各种音乐风格的可制作声音。除了专门为KORGGadget调整的小工具外,这个丰富的产品系列还包括过去的经典乐器、经过小工具化的独特iOS应用程序以及不同
平易近人
平易近人
Lv1
不再提及只是遗憾失言于你没能安定至终
文章
4
粉丝
0
获赞
0