使用Prettier (可选)

因为在create-react-app中明确提到建议使用Prettier所以我们需要使用到Prettier

官方文档

接下来我们需要当不符合Prettier的规则下报错所以我们要安装这两个依赖

yarn add  prettier
yarn add  eslint-plugin-prettier

修改.eslintrc.json

{
    "extends": "react-app",
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
}

接下来创建.prettierrc.js来设置一些规则

参考文档

module.exports = {
    singleQuote: true
};

要在 git 中进行提交时格式化代码，我们需要安装以下依赖项

yarn add husky lint-staged prettier

• husky 使得使用 githooks 变得很容易，就好像它们是 npm 脚本一样。
• lint-staged 允许我们在 git 中的 staged 文件上运行脚本
• prettier 的是我们将在提交运行之前的 JavaScript 格式化程序。

将以下字段添加到 package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
     "prettier --single-quote --write",
     "git add"
   ]
 },

现在，无论何时进行提交，Prettier 都会自动格式化已更改的文件。你也可以在配置完成后运行一次 ./node_modules/.bin/prettier --single-quote --write "src/*/.{js,jsx,ts,tsx,json,css,scss,md}" 来格式化整个项目。

使用Airbnb (可选)

当然我们也可以使用业内最严的Airbnb规范

我们在第一章中使用的ESLint为react-app如果我们想更加精准的定位我们书写react的style的话，建议使用airbnb。

首先在安装最新版ESLint的情况下敲出ESLint --init根据指示选择

image.png

接下来我们的package.json 就会变成

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-plugin-import": "^1.11.0",
    "antd": "^3.10.7",
    "customize-cra": "^0.2.12",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.1",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --single-quote --write",
      "git add"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我们的.eslintrc.js会变成

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    },
};

接下来我们就可以结合redux来拓展 并且改变目录结构 开始第三章学习
link

或者使用redux请传送至https://www.jianshu.com/p/5ef98fb7f946基于本列进行拓展