eslint监测的依赖是哪个文件 eslint插件有什么用

转载

编程之翼 2024-04-20 10:31:34

文章标签 eslint监测的依赖是哪个文件 vue.js javascript 前端自定义 文章分类 架构后端开发

什么是ESlint

ESlint是一个代码检查工具，用来检查你的代码是否符合指定的规范比如：=前面必须有一个空格
使用ESLint的好处就在于：多人协作时风格统一
eslint是法官，standard是法律
vue-cli工具在创建项目时提供选项，我们前面在创建项目的时候选中了它，所以它在本项目中是生效的。

JSSS 规范说明

standard style
下面是一小部分规则

字符串使用单引号
关键字后加空格If(condition){...}
函数名后加空格function name (arg) {}
使用全等=== 摒弃 == 一但需要检查 null||undefined 时使用obj == null

代码规范错误

如果你的代码不符合standard的要求，eslint会跳出来提示你，

改正错误的四种方式

手动修改
npm run lint
修改规则
插件修改 eslint插件

手动修改

根据错误提示修改，不认识的话，根据错误规则名字去eslint规则列表网站中查找其具体含义。
建议大家手动修改错误，帮助养成良好的代码习惯，更加专业。

命令修改

npm run lint

ESLint-自定义规则

目标

了解eslint的自定义规则，能看懂eslintrc.js的配置

自定义校验

在项目根目录下面，有一个.eslintrc.js文件，它是对eslint进行配置的，其中有一个属性是专门用来设置自定义代码规则的：rules

root:true 当前项目使用这个配置文件，不会往父级目录找.eslintrc.js文件
env:{//指定eslint启动环境（vue-cli底层是node支持），brower：true也可以在浏览器中设置的
   node:true
}
extends:[//拓展配置
  'plugin:vue/essential',//vue里必须的规则
  '@vue/standard' //使eslint集成@vue/cli脚手架里的 - standard标准
]，
parserOptions:{//对新语法使用eslint
   parser:'babel-eslint' //使用babel-eslint 来解析新语法ES6  
}，
// 这里可以配置规则
// key:规则代号
// value:具体的限定方式
// "off" or 0 - 关闭规则
// "warn" or 1 将规则视为一个警告，不会影响退出
// "error" or 2 将规则视为一个错误，报错并且退出程序
rules:{// 自定义规则，其实上面集成后有很多内置的规则，这里可以进行规则的一些修改
'no-console':process.env.NODE_ENV === 'production' ? 'warn' : 'off' //上线环境打印就报警告，开发环境关闭此规则
'no-debugger':process.env.NODE_ENV === 'production' ? 'warn' : 'off' //debugger 可以终止代码运行
}

rules是一个对象，以键值对的格式来约定规则：
键名是规则名（可在报错信息和ESLint官网查看）
值是这条规则的具体说明，最常见的有off,warn,error

关闭多行空格

rules中配置
‘no-multiple-empty-lines’:‘off’
修改了配置文件一定要重启项目

ESLint-在VScode中使用插件

目标

掌握配合vscode中的esint插件一起工作的方法：
0 有错误立即提示（显示波浪线）
1 ctrl+s保存时立即自动修正错误

安装插件

ESLint
非常非常重要：在VScode打开项目时，将脚手架工程作为vscode根目录，因为eslint要使用配置文件.eslintrc

eslint自动格式化修正代码

五个步骤
设置
工作区
切换到代码视图（右上角）
补充内容
.vscode 里面会多出目录，刚才的设置在这里

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

eslint.run - 运行eslint检验的时刻（onSave保存）（onType 输入时候）
editor.codeAcrionsOnSave - 控制在保存时运行代码操作时修复哪些问题
source.fixAll.eslint - 自所有插件的所有可自动修复的ESLint错误都在保存时修复
更多常用的在