react-cli

更新日誌：

v1.2.0

...未完待續

v1.1.0

• 添加editorconfig
• 配置ESLint
• 集成prettier
• 集成 lint-staged

實現細節：

添加editorconfig

editorconfig 幫助咱們約束多個開發者在同一個項目中代碼風格，更重要的是它是跨編輯器，IDE 的。

# http://editorconfig.org
# 這是根文件，不用繼續往上查找
root = true

# 匹配所有文件
[*]
# 縮進風格，可選"space"、"tab"
indent_style = space
# 縮進的空格樹 2
indent_size = 2
# 結尾換行符，可選"if"、"or"、"orif"
end_of_line = lf
# 設置字符集
charset = utf-8
# 刪除一行中的先後空格
trim_trailing_whitespace = true
# 在文件結尾插入新行
insert_final_newline = true

配置ESLint

ESLint 能夠約束團隊成員的代碼風格，而且找出一些容易產生問題的代碼。vscode 中安裝 ESLint 後能夠在 問題 面板中看到 ESLint 提示的各類錯誤。ESLint 自帶的 autoFix 也挺好用的。

create-react-app 默認集成了ESLint, 要讓編輯器正確提示ESLint錯誤，須要在項目根目錄添加 .eslintrc.js:

/**
 * create-react-app默認集成了ESLint, 此配置讓編輯器正確提示ESLint錯誤
 */
module.exports = {
  extends: ['react-app'],
};

而且將package.json的配置移除

-  "eslintConfig": {
-    "extends": "react-app"
-  },

爲了讓vscode的eslint插件啓用typescript支持，須要添加下面的配置到項目文件夾中 文件->首選項-> 設置-> 項目文件夾。或者你也能夠專門去保存工做區，添加這些配置到工做區中。

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}

集成prettier

你進一步編輯 .eslintrc.js 文件，這些更改也 只會影響編輯器集成。它們不會影響終端和瀏覽器中的 lint 輸出。這是由於 Create React App 有意提供了一組最多見的錯誤規則。

若是要爲項目強制執行編碼風格，就須要考慮使用 Prettier 而不是 ESLint 樣式規則。

/**
 * https://prettier.io/docs/en/options.html：請確保先執行了 npm i -D prettier
 * 項目代碼風格優先級
 * 1. .perttierc.js
 * 2. .editorconfig
 * 3. vscode中的設置
 */
module.exports = {
  // 指定打印機將換行的行長度。默認 80
  printWidth: 100,
  // 指定每一個縮進級別的空格數。默認 2
  // tabWidth: 2,
  // 指定使用製表符縮進行。 默認 false
  // useTabs: false,
  // 在語句末尾打印分號。默認 true
  // semi: true,
  // 使用單引號而不是雙引號。默認 false
  singleQuote: true,
  // 引用對象中的屬性時更改：默認 as-needed-僅在須要時在對象屬性周圍添加引號。可選"consistent" - 若是對象中至少有一個屬性須要引號，則引用全部屬性。"preserve" - 尊重對象屬性中引號的輸入用法。
  // quoteProps: 'as-needed',
  // 在jsx中使用單引號。默認 false
  jsxSingleQuote: true,
  // 多行時儘量打印尾隨逗號。默認 none-沒有尾隨逗號。可選：es5：在ES5中有效的尾隨逗號（對象、數組等）。例如本文件，設置成 es5，就算你最後一個屬性-屬性值沒有加逗號，也會幫你自動加上逗號
  trailingComma: 'es5',
  // 在對象文字中打印括號之間的空格。默認 true
  // bracketSpacing: true,
  // 將>多行JSX元素放在最後一行的末尾，而不是單獨放在下一行（不適用於自閉元素）。默認false
  // jsxBracketSameLine: false,
  // 在單個箭頭函數參數周圍加上括號。默認 avoid-儘量的省略parens。例 x => x。可選 "always"-使用包括parens。例 (x) => x
  arrowParens: 'avoid',
  // 指定格式化文件的開始行。默認 0
  // rangeStart: 0,
  // 指定格式化文件的結束行。默認 Infinity
  // rangeEnd: Infinity
  // 指定要使用的解析器。prettier會自動從輸入文件路徑中推斷出解析器。所以沒必要更改此設置。默認 babylon
  // parser: 'babylon'
  // 指定用於推斷要使用的解析器的文件名
  // filepath: ''
  // 須要編譯指示。默認 false
  // requirePragma: false
  // 插入Pragma。默認 false
  // insertPragma: false
  // 散文包裹。默認 preserve-按原樣包裝散文。可選，always-若是超過打印寬度就包裝。never-不要包裝
  // proseWrap: 'preserve'
  // HTML空白靈敏度 默認 css-尊重css display屬性的默認值。可選：strict-空格被認爲是敏感的，ignore-空格被認爲是不敏感的
  // htmlWhitespaceSensitivity: 'css',
  // 行結尾：默認 auto-維護現有的行結尾，可選 lf-(\n)，在Linux和macOS以及git repos 內部很常見 crlf-回車符+換行符(\r\n), 在Windows上很常見 cr-僅限回車符，不多使用
  // endOfLine: 'auto',
};

集成 lint-staged

前面雖然是在本身的電腦本身的編輯器裏添加了一些配置，當本身保存時就能夠自動格式化本身寫的代碼。我可是咱們並不能強求別人也用vscode來編碼，可能別人用習慣了webstorm等。這時候爲了繼續維持項目統一的風格，最好是在react-cli腳手架工具中直接體現，而儘量少的讓別人須要去作別的編輯器配置。

這一小節作的就是讓你們在git commit的時候自動觸發prettier格式化代碼的命令。

npm i -D husky lint-staged

接下來配置 husky 和 lint-staged。在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"
    ]
  },

v1.0.0

• npm 設爲淘寶源
• 在TypeScript中使用antd
• 國際化

實現細節：

npm 設爲淘寶源

npm config set registry https://registry.npm.taobao.org