eslint检测语法+前端代码规范化

Posted 2021-10-30 清颖~

温馨提示：要安装好eslint插件和扩展程序后再进行配置~
配置文件可以是js文件，也可以是json文件，语法不同而已。
不能盲目的复制其他配置项，要看自己项目安装了哪些，以及是否需要。

1. SLint 支持几种格式的配置文件

2. eslint的数字代表

“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

参考我的配置：

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"], // 兼容react
  plugins: ["react", "prettier"], // 这里增加插件。
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  // parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    "javascript.validate.enable": "warn",
    "react/jsx-uses-react": "error",
    // 禁止定义不使用的变量
    "no-unused-vars": [
      2,
      {
        vars: "all", // 变量定义必须被使用
        args: "none", // 对于函数形参不检测
        ignoreRestSiblings: true, // 忽略剩余子项 fn(...args)，{a, b, ...coords}
        caughtErrors: "none", // 忽略 catch 语句的参数使用
      },
    ],
    // suppress errors for missing 'import React' in files
    "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }], //should add ".ts" if typescript project
    "react/prop-types": "off",
  },
};

/**
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
 */

3. 友情链接

（1）ESLint官网，可参考配置。
可以在这里搜索，如图所示：

看不懂的地方可以评论区讨论。

（2）关于我在eslint 配置中遇到的 问题。