React 项目搭建记录

创建项目

create-react-app 你的项目名字 --template typescript
yarn add node-sass
yarn add axios
yarn add 安装你所需要的...

安装eslint

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

初始化一个eslint文件

./node_modules/.bin/eslint --init

我们可以根据项目的需求，来选则相应的配置。执行完毕之后可以看到项目的根目录多了一个 .eslintrc.js 文件。

Eslint 支持多种格式的配置文件，优先级如下：

• 1、 .eslintrc.js
• 2、 .eslintrc.yaml
• 3、 .eslintrc.yml
• 4、 .eslintrc.json
• 5、 .eslintrc
• 6、 package.json

这里使用的是.eslintrc.json

{
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:prettier/recommended",  //*****这里是增加 prettier格式化
      "prettier/@typescript-eslint"
    ],
    "ignorePatterns": ["build/**"],
    "env": {
      "browser": true,
      "jasmine": true,
      "jest": true
    },
    "settings": {
      "react": {
        "pragma": "React",
        "version": "16.8"
      }
    },
    "rules": {
      "@typescript-eslint/interface-name-prefix": "off",
      "@typescript-eslint/explicit-function-return-type": "off",
      "@typescript-eslint/explicit-member-accessibility": "off",
      "@typescript-eslint/no-empty-interface": "off",
      "@typescript-eslint/no-unused-vars": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/ban-ts-ignore": "off",
      "@typescript-eslint/camelcase": "off",
      "react/display-name": "off",
      "react/prop-types": "off"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
    "project": ["./tsconfig.json"]
    }
  }
  

这里注意：在扩展中增加 "plugin:prettier/recommended" ：

"extends": [ "airbnb", "plugin:prettier/recommended" ]

在根目录创建 .prettierrc.js文件

module.exports = {
  singleQuote: false, // default false
  bracketSpacing: true, // default true
  trailingComma: "es5", // default es5
  printWidth: 80, // deafult 80
};

husky 提交校验

马上更新中...