eslintrc.js基础配置

官网教程：https://eslint.bootcss.com/docs/user-guide/configuring

eslintrc.js基本配置：https://juejin.cn/post/6975078700622544904#heading-5

plugins和extends的区别：https://juejin.cn/post/6859291468138774535#heading-1

 

module.exports = {
  root: true, // // 告诉eslint找当前配置文件不能往父级查找
  env: { // 全局环境
    browser: true,
    es2021: true, // 例子：这样设置之后，就支持新的 ES6 全局变量和类型
    node: true, // 例子：这样设置之后，就支持新的 node 全局变量和类型
  },
  parserOptions: {  // 优先级低于parse的语法解析配置
    parser: '@typescript-eslint/parser', // 指定ESlint的解析器
    ecmaVersion: 2020, // 允许使用ES语法
    sourceType: 'module', // 允许使用import
  },
  extends: [ // 让 ESlint 添加规则模块
    "eslint:recommended", // 启用 ESLint 核心规则，这些规则报告一些常见问题。
    "plugin:vue/essential", // 例子：让 ESlint 能检查vue相关代码语法
    "plugin:@typescript-eslint/recommended" // 例子：让 ESlint 能检查typescript相关代码语法
  ],
  plugins: [], // 使用第三方插件检查规则
  rules: { // 规则，手动自定义代码规范
    'quotes': ['warn', 'single'], // 引号类型 `` '' ""
  },
  globals: { // 全局变量
    变量名: 'readonly', // false、readable、readonly 这 3 个是等价的，表示变量只可读不可写
    变量名: 'writable', // true、writeable、writable 这 3 个是等价的，表示变量可读可写；
  }
};

 

parserOptions：解析器选项

指定你想支持的语言，默认支持es5。指定啥语言，eslint就按照啥语法检查。

 

extends: 添加规则模块

让 ESlint 添加规则模块，如果规则冲突，位置靠后的包将覆盖前面的。rules 的规则优先级高于 extends

说白了，就是别人提前写好了一套 rules，你直接拿过来用就行。不用自己一个一个写 rules 规则。

 

globals: 全局变量

有时候，我们需要访问一些全局定义的变量，尤其是在我们使用第三方库的时候是浏览器端，也可以是案例服务器端。

因为代码中没有引用变量，所以 eslint 会抛出一个错误，说变量没有定义。

Eslint 让我们指定全局变量。这种配置可以让 eslint 知道一个变量的存在，即使它没有在代码中被引用