导航
导航
文章目录
  1. 版本
  2. 1、ESLint规范
    1. 安装
    2. .eslintrc
    3. .eslintignore
    4. 编译前置检验
  3. 2、编辑器配置
    1. .editorconfig
  4. 3、cross-env
    1. 安装
    2. 使用
  5. 4、代码自动格式化
    1. 安装
      1. 安装eslint
      2. 安装stylelint
      3. 安装prettier
      4. 安装husky,lint-staged
    2. prettier配置
    3. husky钩子配置

动手搭建react开发环境三

版本

  • webpack 4
  • Babel 7

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

1、ESLint规范

规范代码有利于团队协作

安装

1
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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
{
"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检查代码规范,有报错就不执行编译

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
//...同上
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'eslint-loader',
},
],
},
}

2、编辑器配置

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

.editorconfig

新建.editorconfig文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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

使用

1
2
3
4
// 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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
"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文件

1
2
3
4
5
6
7
8
9
10
11
{
"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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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脚手架开发…

支持一下
扫一扫,支持hzzly
  • 微信扫一扫
  • 支付宝扫一扫