轉載 webstrom識別 React語法

對於程序員而言：駝峯和下劃線之間是一場宗派戰爭；大括號是否換行會成爲一種黨派；逗號寫在行尾仍是行首的人來自不一樣星球……

然而，無規矩不成方圓，任何一個團隊，要想有高質量的產出，第一步必需要對一些基本的代碼風格達成共識，不然用不了多長時間，你就會發現沒人願意維護某些代碼了，由於那些代碼散發出半年以上沒衝過的馬桶的味道，而更可怕的是團隊成員之間的衝突和內耗會遠超你的想象。

好了，言歸正傳，咱們進入正題：

首選開發工具WebStorm

工欲善其事必先利其器，對於程序員而言，一款趁手的編輯器將像屠龍寶刀同樣珍貴，許多程序員終其一輩子都在追尋更好的硬件、軟件、工做流程等。做爲前端團隊，咱們強烈推薦使用 WebStorm 。大致上，它長這樣：

關於怎麼下載，怎麼安裝，以及其餘相似問題請自行Google。

新建項目

Talk is cheap. Show me the code. 好了，廢話少說，咱們趕忙上代碼：

是的，咱們的教程並非手把手的，按上圖操做後將彈出輸入框，填入你所獲得的git倉庫地址，並按照我的喜愛選擇路徑和命名後 WebStorm 將會自動拉取咱們最新的項目代碼。

初始設置

由於咱們使用了最新最潮的ES6語法，並藉助了React.js 來開發這個項目，因此咱們須要進行一些小設置來保證 WebStorm 可以正常識別咱們所寫的代碼。

按上圖所示進入設置面板：

在 Languages & Frameworks > JavaScript 條目下開啓JSX語法支持。

展開 JavaScript > Libraries ，勾選 ES6 語法支持。

 

 

 

咱們使用ESlint來檢查基本的語法錯誤，請繼續展開 "JavaScript > Libraries > Code Quality Tools > ESLint" 菜單啓用 ESLint。 ESLint 規則以 airbnb 爲基礎，考慮到中國國情以及團隊習慣，咱們進行了部分細節調整：

 { "extends": "airbnb", "rules": { "comma-dangle": [1, "never"], // 不對數組或對象末尾逗號作強制要求 "spaced-comment": [0, "always"], // 不對註釋前的空格作強制要求 "func-names": 0 // 容許使用匿名函數 } }

其餘徹底沿用airbnb，詳見 https://github.com/airbnb/javascript

代碼風格設置

爲了讓編輯器產生的代碼可以順利經過ESLint的校驗，咱們在airbnb開源的基礎上定製了本身的代碼風格：  在 "Editor > Code Style" 菜單中點擊 "Manage..." 按鈕；

在彈出來的對話框裏選擇 "Import..."

點擊肯定後會出現文件選擇對話框，選擇本項目根目錄下的 .jscsrc 文件

建議命名爲KM，以便和其餘代碼風格區分。 本代碼風格整體依然沿用 airbnb，一樣對部分細節作了調整：

 { "preset": "airbnb", "excludeFiles": [ "dist/**", "node_modules/**", "webpack*", "styleguide.js" ], "requirePaddingNewLinesBeforeLineComments": null, // 不強制註釋前空行 "requireTrailingComma": null, // 不強制要求末尾逗號 "validateQuoteMarks": null, // 字符串單引號，React 屬性雙引號 "validateIndentation": { "value": 2, "allExcept": [ "comments" // 忽略註釋中的縮進 ] }, "maximumLineLength": { "value": 80, // 單行最長80個字符，註釋除外 "allExcept": [ "comments", "urlComments", "functionSignature" ] }, "requirePaddingNewLinesAfterBlocks": null,// 區塊之間不強制空行 "disallowEmptyBlocks": { "allExcept": "comments" // 不把註釋當成空處理 } }

調整後規則的直觀體現見 styleguide.html

快速啓動

1. 首先請確保你已經安裝好了 node 和 npm，建議使用 iojs/2.5.0並配置國內源

2. 進入工做目錄新建分支   請儘可能以本次須要開發的功能或解決的問題進行分支命名，咱們提倡使用 GitHub Flow 進行分支管理。

3. 點擊編輯器底部的 'Terminal'面板，並輸入 npm i && npm start 後回車  當顯示 webpack: bundle is now VALID. 字樣時表示已經正常啓動 

4.建議使用Chrome瀏覽器，訪問 http://localhost:8000/ 便可。

5.修改JS文件，瀏覽器內容將自動發生變化（頁面不會總體刷新）

目錄結構

[./] | -- .editorconfig #編輯器配置，聲明縮進方式 | -- .eslintignore #ESLint忽略名單 | -- .eslintrc #ESLint配置 | -- .gitignore # Git忽略名單 | -- .jscsrc #JavaScript Code Style 配置 | -- README.md | -- [css] | | -- index.styl | -- [dist] #打包後目錄 | | -- daefde64ebc9619286d8.js | | -- fb5456ea68c860c4a4c93c71b1142220.css | | -- index.html | -- [docs] #說明文檔 | | -- [img] | | -- styleguide.html | -- [js] | | -- app-router.js | | -- [components] # 組件 | | | -- dashboard.js | | | -- login.js | | | -- main.js | | -- index.js | | -- [utils] # 各類輔助小工具 | | | -- ajax.js | | | -- auth.js | -- package.json | -- server.js # 開發調試用 | -- webpack.config.develop.js # 開發環境配置 | -- webpack.config.js # 通用配置 | -- webpack.config.production.js # 生產環境配置



來源地址 https://www.w3ctech.com/topic/1496