ESlint 认识以及使用

2023-03-15 21:39| 来源: 网络整理| 查看: 265

1.认识ESlint

ESlint 是一个代码检查工具，用来检查代码是否符合指定规则好处：多人协作统一风格

规则： // eslint 与 Standard 相当于法官和法律

1.）采用行业规则；在创建项目时，我们使用的是 JavaScript ==Standard== Style 代码风格的规则

2.）自定义规则。你和你的团队可以自行约定一套规则

JavaScript Standard Style规范说明详情 ↓↓↓

https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md（或：http://www.verydoc.net/eslint/00003312.html ）

2.ESlint的错误修正

错误的修正方式可以分为以下几种

手动修正：根据提示修正

命令修正：（npm run lint） vuecil创建项目时提供了自动修复功能（但是有些复杂的错误还需要手动修正）

修改规则：让代码符合修改之后的规则，代码也就不会报错（在 .eslintrc.js 文件中修改代码）

rules: { // 插入自定义规则 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' }

插件修正：配合配合vscode 中的eslint插件

3.ESlint自定义规则

自定义校验

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

rules 是一个对象，以键值对的格式来约定规则

1.）键名是规则名（可以在报错信息和 ESlint 官网查看）

2.）值是这天规则具体说明，常见的有 off，warn 和 error

module.exports = { root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件 env: { // 指定eslint启动环境(vuecli底层是node支持), browser: 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 - 将规则视为一个错误 (退出码为1)，报错并退出程序 rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行 // 'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则) } }

例子：关闭多行空格

rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改 // 省略其他 'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则) }

4.ESlint在vscode中使用插件

提示以及改正

提示：有错误立即提示（显示波浪线）

修正： Ctrl + s 保存时即可立即修正

修正错误方案上述 ESlint的错误修正中查看详情 ↑↑↑

安装 ESlint 插件

目的：让 vscode 实时告诉我们那里出了错误

用vscode打开项目时，将脚手架工程作为 vecode目录，因为ESlint要使用配置文件 .eslintrc

ESlint 自动格式化修正代码

放置修正代码位置如下 ↓↓↓

补充代码如下 ↓↓↓

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

5.可能遇到的问题

Ctrl + s 保存不自动格式化

打开代码文件，右下角ESlint图标，如果图标异常点击一下，然后弹出对话框选择 AnyWhere 在任意出生效（启动vscode中的ESlint）

如图所示（打开）

自动缩进1

可能于此冲突（vscode中扩展启用自动格式化功能则有可能与ESlint冲突）

解决方案：关闭vscode中的自动格式化

自动缩进2

如发现上述问题可以尝试修改 vscode 的配置

解决方案：文件>设置里, 搜索这个, 把下面的勾去掉 ↓↓↓

保存后单引号边双引号

原因： vetur 插件和 ESlint 冲突，修改 Eslint 插件配置，吧这里的代码复制进去

{ "eslint.run": "onType", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉 "editor.formatOnSave": false, // 去掉 vscode 自带的自动保存，vscode 默认也是 false的，如果要用 eslint 格式化，默认的格式化就不能开启 "eslint.enable": true, // eslint 格式化的配置 "eslint.autoFixOnSave": true, // eslint保存时候自动解决语法错误 "eslint.options": { // eslint选项-格式化js和vue文件 "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true, }, "html", "vue" ], }

【本文地址】

公司简介

联系我们