动手搭建react开发环境三

版本

webpack 4
Babel 7

本篇主要使用针对代码或者开发效率进行优化

1、ESLint规范

规范代码有利于团队协作

安装

yarn add eslint babel-eslint eslint-config-airbnb eslint-config-standard eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard -D

.eslintrc

新建.eslintrc文件（配置ESLint）

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "extends": ["airbnb", "prettier"],
  "rules": {
    "generator-star-spacing": [0],
    "consistent-return": [0],
    "react/forbid-prop-types": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
    "global-require": [1],
    "import/prefer-default-export": [0],
    "react/jsx-no-bind": [0],
    "react/prop-types": [0],
    "react/prefer-stateless-function": [0],
    "react/jsx-wrap-multilines": [
      "error",
      {
        "declaration": "parens-new-line",
        "assignment": "parens-new-line",
        "return": "parens-new-line",
        "arrow": "parens-new-line",
        "condition": "parens-new-line",
        "logical": "parens-new-line",
        "prop": "ignore"
      }
    ],
    "no-else-return": [0],
    "no-restricted-syntax": [0],
    "import/no-extraneous-dependencies": [0],
    "no-use-before-define": [0],
    "jsx-a11y/no-static-element-interactions": [0],
    "jsx-a11y/no-noninteractive-element-interactions": [0],
    "jsx-a11y/click-events-have-key-events": [0],
    "jsx-a11y/anchor-is-valid": [0],
    "no-nested-ternary": [0],
    "arrow-body-style": [0],
    "linebreak-style": ["error", "unix"],
    "import/extensions": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "import/no-unresolved": [0],
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }
    ],
    "object-curly-newline": [0],
    "function-paren-newline": [0],
    "no-restricted-globals": [0],
    "require-yield": [1]
  }
}

.eslintignore

新建.eslintignore文件（ESLint忽略特定的文件或目录）

1	build/*.js

编译前置检验

在执行编译之前去执行eslint-loader检查代码规范，有报错就不执行编译

module.exports = {
  //...同上
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'eslint-loader',
      },
    ],
  },
}

2、编辑器配置

EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件，这些插件是让编辑器读取配置文件并以此来格式化代码。

.editorconfig

新建.editorconfig文件

# http://editorconfig.org
root = true
 
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

3、cross-env

因为windows不支持NODE_ENV=development的设置环境变量的方式，所以使用我们可以cross-env设置跨平台的环境变量的脚本。

安装

1	yarn add cross-env -D

使用

// package.json
"scripts": {
  "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
}

这样就可以使用 process.env.NODE_ENV 来获取环境变量继续操作了。

4、代码自动格式化

使用husky, prettier, eslint在代码提交时自动格式化，并检查代码。

husky。一个git钩子工具，这里主要用pre-commit钩子。通俗点讲就是husky可以在你commit之前帮你做一些事情。
prettier。一个很流行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，像vscode,atom,webstom都可以找到。这里用它在代码提交前做代码格式化。
eslint。代码检查工具。eslint也可以负责一部分代码格式检查的工作，让其负责代码错误检查。
lint-staged。在你提交的文件中，执行自定义的指令。

安装

安装eslint

如果上面已经安装过了就不用再次安装了，没有安装就按照上面 ESLint规范 步骤安装好。

安装stylelint

1	yarn add stylelint stylelint-config-prettier stylelint-config-standard -D

新建.stylelintrc文件

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "rules": {
    "selector-pseudo-class-no-unknown": null,
    "shorthand-property-no-redundant-values": null,
    "at-rule-empty-line-before": null,
    "at-rule-name-space-after": null,
    "comment-empty-line-before": null,
    "declaration-bang-space-before": null,
    "declaration-empty-line-before": null,
    "function-comma-newline-after": null,
    "function-name-case": null,
    "function-parentheses-newline-inside": null,
    "function-max-empty-lines": null,
    "function-whitespace-after": null,
    "number-leading-zero": null,
    "number-no-trailing-zeros": null,
    "rule-empty-line-before": null,
    "selector-combinator-space-after": null,
    "selector-descendant-combinator-no-non-space": null,
    "selector-list-comma-newline-after": null,
    "selector-pseudo-element-colon-notation": null,
    "unit-no-unknown": null,
    "no-descending-specificity": null,
    "value-list-max-empty-lines": null
  }
}

安装prettier

1	yarn add prettier eslint-plugin-prettier eslint-config-prettier -D

安装husky，lint-staged

1	yarn add husky lint-staged pretty-quick -D

prettier配置

在eslintrc.json修改如下配置：

1
2
3

{
  "extends": ["airbnb", "prettier"],
}

新建.prettierrc文件

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

配置.eslintignore文件

1	build/*.js

husky钩子配置

husky会在你提交前，调用pre-commit钩子，执行lint-staged，如果代码不符合prettier配置的规则，会进行格式化；然后再用eslint的规则进行检查，如果有不符合规则且无法自动修复的，就会停止此次提交。如果都通过了就会讲代码添加到stage，然后commit。

// package.json
{
  // ...
  "scripts": {
    // ...
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js --fix",
    "prettier": "prettier --write ./src/**/**/**/*"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "**/*.{js,jsx,scss}": [
        "prettier --write",
        "git add"
      ],
      "**/*.{js,jsx}": "npm run lint-staged:js",
      "**/*.scss": "stylelint --syntax=scss"
    },
    "ignore": [
      "**/dist/public/*"
    ]
  }
}

到此，我们的react开发环境对于打包、代码规范以及提升开发效率的一些配置我们都具备了，可以开心的写我们的react了。接下来我们就可以把这些配置单独完善成一个库，通过我们的 cli 脚手架拉取直接基于它来开发，Let’s go脚手架开发…