react项目中eslint的使用

eslint和prettier分别是react中校验代码质量和代码格式的两个工具。

代码质量指的是‘未使用已经声明的变量、是否使用三等号、全局变量声明’等问题

代码格式指的是‘单行代码长度、tab 长度、空格、逗号表达式’等问题

eslint

react项目中eslint有vscode eslint插件和eslint项目配置文件，这两者关系是什么？

vscode中的eslint插件在生效的时候会寻找当前项目的eslint，按照项目中的eslint版本进行校验，若项目中找不到，会使用全局eslint。

找到eslint后，会寻找eslint配置文件，eslintrc.js / eslintrc.json，或者packake.json中的eslint配置。如果没找到的话，也不会生效。

找到之后，会按照配置生效，在代码中展示校验结果。

eslintrc配置文件主要是配置eslint的校验规则和校验环境。是在命令行中执行生效的。

//eslintrc.js
module.exports = {
  // 使用环境为浏览器 您的脚本可以访问仅限浏览器的全局变量window
  env: {
    browser: true,
    es2021: true,
  },
  // 用eslint推荐的配置 也可以只用自定义配置覆盖recommand规则
  extends: ['eslint:recommended', 'react-app', 'react-app/jest'],
  // 使用最新版本的es
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
}

所以，vscode中的eslint插件还是需要依赖项目中的eslint来生效。