• 0

  • 520

ESlint使用指南(基础篇)

智能的司机

我是老司机

2 months ago

1. 前提说明

eslint是什么: ESLint是在JavaScript代码中 识别报告 模式匹配的工具。

为什么需要eslint:保证代码的一致性,避免错误。

2. 叙述大纲

  • 所需依赖
  • 定义模式规则(.eslintrc配置文件)
  • 报告不符合模式的语法(vscode和eslint的结合)
  • 纠正不符合模式的语法

3. 所需依赖

    "eslint": "^6.7.2",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-vue": "^6.2.2",
复制代码
  • 首先需要安装eslint模式识别工具,然后在项目根目录下创建eslint的配置文件.eslintrc.json。eslint会自动去读取.eslintrc的配置文件。
  • babel-eslint 解析器(为什么使用babel-eslint ? 你这个异教徒去死吧。)
  • eslint-plugin-vue eslint默认只能识别js文件,要识别vue文件,这个插件是必不可少的。

4. 配置文件

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended" // 启用推荐的规则,推荐的规则都带有一个标记。
  ],
  "parserOptions": {
    "parser": "babel-eslint" // 以babel-eslint作为解析器
  },
  "rules": {
    "no-debugger": ["error"], // [(0 : off) ; (1 : warn) ; (2 : error)]
    "semi": ["warn"]
  }
}
复制代码

需要关注的是extends选项。这里我们启用了推荐的规则。推荐的规则前面会有一个勾勾。通过 plugin:vue/essential 也启用了vue的规则。至此,当代码存在debugger,编译阶段就会报错。因为rules中定义了debugger的级别是error。

5.报告不符合规则的语法

要想将不符合规则的语法标红,需要安装eslint插件。

安装完成后,发现debugger报红了

6.修复不符合规则的语法

首先定义规则 "semi": ["error"] 每一行结尾必需要有分号。在没有分号的情况下...

现在我们希望vscode能够帮我们自动补全分号。我们需要修改配置文件 settings -> extensions -> eslint -> setting.json
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
复制代码

现在当我们自动保存的时候,缺失的分号就会自动补全。

7. 注意事项

在推荐的规则中只有携带🔧图标的rule才能够自动修复。例如,即便启动了no-debugger,代码中出现的debuger也不会自动删除。

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

520

Relevant articles

未登录头像

No more data