vue3+vitejs如何在运行项目的时候ESLint检查代码？

Question

问题描述

【项目环境】
vue3 + yarn + vitejs + eslint

【问题】
如何使用 yarn dev 运行项目的时候自动检查代码规范？

百度挺久了没找到实现方式,yarn dev的时候代码不规范也没有任何提示！

// eslint配置
module.exports = {
    "root": true,
    "env": {
        // "browser": true, 
        "es2021": true,
        "node": true
    },
    "plugins": ["vue"],
    "extends": [
        "eslint:all",
        "plugin:vue/vue3-recommended"
    ]
 ...
}

// 测试代码
<script setup>
// 配置"browser"被注释了,以下代码在eslint打印应该会不通过才对
// 但是目前项目可以正常运行了.
console.log(window)

</script>

Answer 1

vscode 安装eslint插件

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

VSCode 需要安装启用 ESlint 插件，并在 设置 中配置：

/** .vscode/settings.json */
{
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

在 package.json 中添加 ESLint 格式化脚本（ESLint 命令行文档）：

"scripts": {
    "lint": "eslint --fix"
}

配置完毕或者执行完格式化后：

yarn run lint