愿卿一路好风景

此心安处是吾乡

0%

自构react项目模板

发表于

Eslint + Prettier + stylelint + Husky + Lint-staged

创建样板文件

1
yarn create react-app myapp --typescript

在使用yarn的时候如果发现报错，可以尝试使用npm

添加依赖

1
yarn add prettier lint-staged husky stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recommended eslint-config-prettier eslint-plugin-prettier -D

注意stylelit默认版本是14.1.0，react不支持，可能会报错，建议安装低版本。

添加配置文件

1
touch .eslintrc .eslintignore .gitattributes .prettierrc .stylelintrc

.eslintrc.js

后缀加上js,否则无法识别module.exports语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
  extends: ['prettier'],
}

.eslintignore

设置不需要eslint语法检查的部分

1
2
# build
build/

.gitattributes

1
* text=auto eol=lf

.prettierrc

1
2
3
4
5
6
7
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf"
}

.stylelintrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "extends": ["stylelint-prettier/recommended", "stylelint-config-standard"],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "unit-case": null,
    "no-descending-specificity": null,
    "block-no-empty": null,
    "no-empty-source": [true, { "severity": "warning" }],
    "declaration-colon-newline-after": null,
    "function-name-case": null,
    "indentation": null,
    "no-invalid-double-slash-comments": null
  }
}

在package.json条件以下字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "yarn lint --fix",
    "stylelint": "stylelint \"src/**/*.{css,scss}\"",
    "stylelint:fix": "yarn stylelint --fix"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write", "git add"]
  },
   "eslintConfig": {
    "parser": "babel-eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

这只是一个简略react的模板，仅供日常写代码使用，以下为vue比较详细的模板配置，可以参考下

https://juejin.cn/post/7033552881374461960