使用工具更加规范你的react项目

1、配置prettier

• 一、使用npx初始化一个项目，这里我使用typescript模板的方式构建项目

  npx create-react-app react-demo1 --template typescript

• 二、参考官方的方式配置，官方地址

• 三、安装插件包

  npm install --save-dev --save-exact prettier

• 四、在根目录下建立一个.prettierrc和.prettierignore的文件

  • prettierr文件是配置prettierr规则的
  • .prettierignore是配置不须要prettierr的文件，有点相似.gitignore的做用

• 五、在.prettierignore配置

  build
  coverage

• 六、在.prettierr中配置，如下是我本身项目中配置的，仅供参考

  {
    "prettier.semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 100,
    "tabWidth": 2,
    "endOfLine": "auto",
    "arrowParens": "always"
  }

  更多配置能够参考官方，官网地址，如下是我提供的文字说明

  {
  	  "printWidth": 100, // 超过最大值换行
      "tabWidth": 4, // 缩进字节数
      "useTabs": false, // 缩进不使用tab，使用空格
      "semi": true, // 句尾添加分号
      "singleQuote": true, // 使用单引号代替双引号
      "proseWrap": "preserve", // 默认值。由于使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
      "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
      "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
      "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
      "endOfLine": "auto", // 结尾是 \n \r \n\r auto
      "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
      "htmlWhitespaceSensitivity": "ignore",
      "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
      "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
      "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
      "parser": "babylon", // 格式化的解析器，默认是babylon
      "requireConfig": false, // Require a 'prettierconfig' to format prettier
      "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
      "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
      "tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
  }

• 七、因为create-react-app建立的项目自带了eslint的规范，咱们又加一个prettierr，天然会出现有冲突的时候，这时候咱们就要告知使用谁的规范。能够简单的理解为优先级吧，参考官网

  • 安装依赖包

    npm install eslint-config-prettier -D

  • 在package.json中配置下

    {
    	...
    	"eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest",
          // 添加这行代码
          "prettier"
        ]
      },
    	...
    }

2、配置git的钩子函数，对每次commit的时候就使用prettierr格式化代码

• 一、参考地址

• 二、使用npx生成文件

  npx mrm lint-staged

• 三、运行上面的命令会自动在package.json中添加配置

  {
    "lint-staged":
      // 默认生成的
      // "*.{js,css,md}": "prettier --write"
      // 项目是要使用ts的话就要添加下
      "*.{ts,tsx,css,md}": "prettier --write"
    }
  }

• 四、在package.json中添加husky的提交钩子

  {
    ...
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    },
    "lint-staged": {
      "*.{js,ts,tsx}": [
        "prettier --write",
        // 添加这行表示修复后会自动执行git add操做
        "git add"
      ]
    }
    ...
  }

• 五、修改下index.ts文件,将单引号改成双引号，把分号去掉，而后使用git提交代码查看文件是否是自动格式化了

3、配置git的提交规范

• 一、参考文档

• 二、安装依赖包

  npm install --save-dev @commitlint/config-conventional @commitlint/cli

• 三、生产一个commitlint.config.js文件

  echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

  如下是我本身根据网上的修改了下

  module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
      'type-enum': [
        2,
        'always',
        ['upd', 'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'],
      ],
    },
  };
  
  /** * https://segmentfault.com/a/1190000017790694 * upd: 更新 * feat: 新增 * fix: 修复 * docs: 文档 * style: 样式 * refactor: 重构代码 * test: 单元测试 * chore: 构建过程或辅助工具的变更 */

• 四、生成提示信息的

  npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

• 五、测试提交

• 六、每次提交代码的时候必须带上说明

  git add .
  git commit -m 'feat: 新增代码'

4、配置eslint的

也许你会说上面每次提交代码都会自动帮咱们格式化，可是咱们更加但愿在咱们写代码的时候，每次保存代码的时候就能发现哪里不规范，这样提交代码的时候直接提交，不须要再来一个一个修改。

• 一、初始化eslint，等待一瞬间会在项目的根目录下生成一个.eslintrc.js的文件

  npx eslint --init

• 二、相对于的在项目的根目录下建立.eslintignore来忽视不须要检查的文件

  # 注释，忽略文件
  node_modules
  src/serviceWorker.ts
  src/react-app-env.d.ts
  *.lock

• 三、咱们配置的prettier那么咱们就要对eslint和prettier兼容，参的地址

  npm install eslint-plugin-prettier -D
  npm install eslint-config-prettier -D

• 四、根据文档来配置

• 五、如今react都是使用hooks开发了，天然也要配置这个规则，参考地址

• 六、运行项目，手动删除一个分号或者单引号改成双引号

• 七、付一份个人.eslintrc.js文件配置

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'react-app',
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:prettier/recommended',
      'plugin:react-hooks/recommended',
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
      ecmaVersion: 12,
      sourceType: 'module',
    },
    plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks'],
    rules: {
      'prettier/prettier': 'error',
      'arrow-body-style': 'off',
      'prefer-arrow-callback': 'off',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    },
  };

5、配置样式格式化

• 一、安装依赖包

  npm install --save-dev stylelint stylelint-config-standard

• 二、项目的根目录下建立文件.stylelintrc

  {
    "extends": ["stylelint-config-standard"],
    "rules": {}
  }

• 三、在package.json中配置git钩子来格式化样式

  {
    ...
    "lint-staged": {
      "*.{js,ts,tsx}": [
        "prettier --write",
        "git add"
      ],
      // 针对css或者scss的样式格式化，若是你用less就继续加上
      "*.{css,scss}": [
        "stylelint src/**/*.css --fix",
        "stylelint src/**/*.scss --fix"
      ]
    }
    ...
  }

• 四、在index.css中随便写点样式，而后使用git提交代码查看样式否格式化

• 五、使用git提交代码的时候会比较慢，彷佛还在拉取什么包，这时候建议删除node_modules而后从新安装

6、编辑器规范

• 一、在项目下建立一个.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