Skip to main content

eslint

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

Getting Started with ESLint

eslint-config​

这里强烈推荐 antfu/eslint-config，以及大佬的文章 Why I don't use Prettier (antfu.me)

这份 eslint 配置对于 ts 与 vue 已经足够完整，如果还有其他需求，可自行添加 rule 或使用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就是没配置好，可能缺少某些依赖文件或是配置文件写错了。