React项目工程化（一）添加Eslint实现代码规范

这部分主要是将eslint引入，达到可以在项目里进行代码不符合规范，进行错误提示的目的。

Step 1、安装依赖

yarn add -D eslint

Step 2、添加.eslintrc.js文件

可以手动新建，也可以在全局安装了eslint后，执行eslint init自动添加

Step 3、安装babel-eslint并修改eslint规则

此处是较为简单地例子

yarn add -D babel-eslint

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ["plugin:react/recommended"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  parser: "babel-eslint",
  plugins: ["react"],
  settings: {
    react: {
      version: "detect"
    }
  },
  rules: {
    semi: ["error"],
    "no-unused-vars": ["error"],
    quotes: ["error", "double"],
    "react/prop-types": "off",
    "no-mixed-spaces-and-tabs": ["error"],
    "comma-dangle": ["error", "only-multiline"]
  }
};

Step 4、编辑器安装Eslint插件

image.png

然后在编辑器打开文件，但凡有不符合eslint规范的，编辑器将会进行错误提示

PS:

建议新项目在执行命令处新增：

// 假设为js文件
"lint": "eslint ./src/**/*js --fix"

进行全局代码格式化

如需要修改为airbnb规范，可自行根据要求修改

若有需要ignore的文件，可同级下添加.eslintignore文件，在内部添加需要被忽略的文件