跳到主要内容

eslint

ESLint 是一种用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具，其目的是使代码更加一致并避免错误。

Getting Started with ESLint

eslint-config​

推荐使用antfu/eslint-config这个 ESLint 配置，此配置已经足够完整，支持 ts 和 vue。如果有其他需求，可以自行添加规则或使用overrides。

在 Vscode 中集成 ESlint 插件​

  • 在 VScode 插件市场安装 ESLint 插件

  • 在全局设置中启用代码保存时自动执行 ESLint 修复功能

  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  },
  • 工作区示例如下
.vscode/settings.json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

在 WebStorm 中集成 ESLint 插件​

由于 WebStorm 自动集成 ESLint，所以我们无需安装

  • 进入 WebStorm 配置 ESLint 自动修复

image-20220701081021965

注意事项​

由于 eslint 配置相对繁琐，所以很多时候编辑器的 eslint 可能都没有生效，具体看编辑器下方状态栏或者日志输出查看 ESLint 状态。如果为警告（黄色感叹号）或者错误（红色），那么 ESLint 就是没配置好，可能缺少某些依赖文件或是配置文件写错了。