场景1

downLoadExcel () {
      const fileName = 'foodModel'
      const sheetData = [{"one":"铁锅炖","two":"点餐供应","three":"套餐","four":"2.5","five":"10","six":"是","seven":"50","eight":"主食","nine":"个"}];
      const sheetFilter = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
      const sheetHeader = ["菜品名称","适用服务","适用餐种","出售价格","限购额度","能否打包","上架数量","菜品类","菜品描述单位"]
      const nowtime = new Date();
      const sheetName = `${nowtime.getFullYear()}-${nowtime.getMonth() + 1}-${nowtime.getDate()}`
      downLoad(fileName, sheetData, sheetFilter, sheetHeader, sheetName)
    }

执行vue create demo创建vue项目时,勾选 (*) Linter / Formatter 回车,就可以来到模式选择的界面,选择严格模式

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only     //  只进行报错提醒
  ESLint + Airbnb config                //  不严谨模式
> ESLint + Standard config              //  正常模式
  ESLint + Prettier                     //  严格模式
  TSLint (deprecated)                   //  TypeScript格式验证工具

保存位置选择In dedicated config files

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

.eslintrc.js
image

module.exports = {
  root: true,
   /* env
    指定脚本的运行环境，每一个环境定义了一组预定义的全局变量，可以定义多个环境。
    - browser - 浏览器环境中的全局变量。
    - node - Node.js 全局变量和 Node.js 作用域。
    - commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
    - shared-node-browser - Node.js 和 Browser 通用全局变量。
    - es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6） */
  env: {
    node: true,
  },
  /* extends
  提供了继承其它配置文件的选项，属性可以是一个第三方包、配置文件的路径，也可以是字符串数组继承多个
  */
  extends: ["plugin:vue/strongly-recommended", "@vue/standard"],
  parserOptions: {
    parser: "babel-eslint",
  },
  /* rules 是具体的代码检查选项，要改变一个规则设置，必须将规则 ID 设置为下列值之一：
   - "off" 或 0 - 关闭规则
   - "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序中止)
   - "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会中止)
  */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

但这不是终点,当你在编辑器内写代码保存会提示错误(这说明eslint生效了)
image-1654589529188
那这个问题改怎么解决呢?当然是关掉eslint就ok了,眼不见心不烦

vscode

扩展,搜索eslint,点击安装
image-1654590097587
此时,不符合要求的代码界面已经可以显示红色波浪线了
image-1654590208780
但是如果手动一个一个去修改是不是有点麻烦,所以打开设置,点击右上角的json模式
image-1654590321911
添加

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

image-1654590390522
从此往后,只要保存,编辑器就会按照extends 与 rules 里的规则进行自动格式化
例如:quotes ,控制单双引号
image-1654590744262
如果改成"quotes":["error","double"],之前的代码就会显示红色波浪线
image-1654590857031
重新保存.vue文件,编辑器会自动修复

webstrom

这个比较简单,打开设置-语言和框架-JavaScript-代码质量工具,选择自动配置,同事勾上保存时运行eslint --fix ,点击确定即可
image-1654591016448

配置