使用工具更加規範你的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