Sublime text3 開發react時的小工具

第一項工具，打註解時有快鍵JC+ tab，在render中要打註解的話，必須要像{/* A JSX comment */}的格式，但是每次都要這樣打很麻煩，所以在sublime上方工具列中Preferences → Browse Packages → Put snippet in User folder.

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

{/* A JSX comment */}

{/* 
  Multi
  line
  comment
*/}  

jsx-comment.sublime-snippet檔案內容為：

<snippet>

  <content><![CDATA[

{/* ${1:JSX Comment} */}

]]></content>

  <!-- Hit `jc` in any JS document to get a JSX comment -->

  <tabTrigger>jc</tabTrigger>

  <scope>source.js</scope>

</snippet>

第二項工具，在render中可以使用Emmet+React JSX自動補齊的功能，在Sublime上方工具列中，Preference->Key Bindings -> user default中把下面程式碼貼上，之後就可以使用Emmet的功能只在render中，例如：
ul>li*6、div.ABC、div#ABC、h1...等等加tab就可以自動補齊的功能

{
"keys": ["tab"], 
"command": "expand_abbreviation_by_tab", 

// put comma-separated syntax selectors for which 
// you want to expandEmmet abbreviations into "operand" key 
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
"operand": "meta.group.braces.round.js, text.html", 
"operator": "equal", 
"match_all": true, 
"key": "selector"
}, 

// run only if there's no selected text
{
"match_all": true, 
"key": "selection_empty"
},

// don't work if there are active tabstops
{
"operator": "equal", 
"operand": false, 
"match_all": true, 
"key": "has_next_field"
}, 

// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible -- 
// remove this section
{
"operand": false, 
"operator": "equal", 
"match_all": true, 
"key": "auto_complete_visible"
}, 
{
"match_all": true, 
"key": "is_abbreviation"
}
]
}

Sublime text 3 常用外掛

Color Scheme
Color Highlighter
ColorPicker
Emmet
HTML-CSS-JS Prettify(這個在React專案中完全沒用，而且會把jsx的檔案打亂，小心用)
AutoFileName
Babel
Babel Snippets
SublimeLinter
SublimeLinter-contrib-eslint
SublimeLinter-contrib-tslint (使用ionic2時可以Check語法的工具)

sublime text3 eslint搭配Babel-lint做語法檢查(React)

eslint搭配Babel-lint做語法檢查，以確保團隊的程式碼結構統一。

要用到eslint並搭配使用Babel的話記得在package.json的devDependencies中放入這些項目，這些會裝到node_mudules底下


STEP1:

package.age 格式

    "babel-eslint": "^7.1.1",

    "eslint": "^3.13.1",

    "eslint-config-airbnb": "^13.0.0",

    "eslint-plugin-import": "^2.2.0",

    "eslint-plugin-jsx-a11y": "^2.2.3",

    "eslint-plugin-react": "^6.7.1",

CLI安裝指令：

sudo npm i babel-eslint eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

STEP2:

在sublime text3 package install 中安裝SublimeLinter以及SublimeLinter-contrib-eslint, Babel, SublimeLinter這三個，之後在Sublime中的view-syntax就有Babel Javascript語法可以選擇

STEP3:

在專案最上層加入這三個基礎設定檔案

(1).babelrc

檔案內容為：

{

   "presets": ["react", "es2015", "stage-0"]

}

(2).eslintrc

檔案內容為：

{

  "extends": "airbnb",

  "parser": "babel-eslint",

  "rules": {

    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

  },

  "globals": {

    "document": true,

  }

}

(3).jshintrc

檔案內容為：

{ 

  "esversion": 6 

}