项目规范(三)：ESLint检测代码

概述

ESLint可以帮助我们检测代码书写的规范，有利于统一代码风格。

---

配置（.eslintrc.js）

根目录创建 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

---

ESLint

VS Code需要安装ESLint插件进行解析

---

解决与prettier冲突问题

在保存prettier格式的时候有时会出现黄色警告的问题，发现是与ESLint冲突了，这个时候可以这样配置

1.安装插件

如果在创建vue项目时引用了prettier规范则可以不用安装，已默认安装

npm i eslint-plugin-prettier eslint-config-prettier -D

2.添加配置

在.eslintrc.js中添加prettier插件

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'//新增
  ],

问题
操作后需要重启vscode即可不冲突