Sublime Text 3 - 建立 React 開發環境

Sublime Text 一直是我很喜歡的前端編輯器，兼具輕量及可攜帶性一直是我很喜歡的特色，然而最近在開發 React 的時候，發現開發沒有特別設定的開發體驗實在不佳，於是在參考許多網路上大大們的文章後完成以下的開發環境需求，下面內容會一步步說明各個需求的設定過程，或許各位有更好的 package 清單，歡迎留言建議。

本篇所建立的開發環境

支援 ES6、JSX 語法高亮 | Support JSX Syntax Highlight
錯誤提示 | ES-Linter
Emmet 支援 JSX 語法 | Enable Emmet while writing in JSX
自動完成語法 | React-Snippet

基本需求

Sublime 已經安裝 Package Manager 及 Emmet，若已使用 SublimeLinter-jshint，請在使用者設定的地方將他關掉。此外，NodeJS 也需要安裝。

Sublime Package List

SublimeLinter
SublimeLinter-contrib-eslint
Babel
Babel Snippets

Node Package List

eslint
babel-eslint

1. 支援 ES6、JSX 語法高亮

使用 package manager 安裝 Babel、Babel Snippets，再次開啟 .js 檔案時，點選 View -> Syntax -> Open all with current extension as... -> Babel -> JavaScript(Babel)。

若遇到想更換主題卻無法切換，可以在 ctrl + ` 的視窗中輸入 view.settings().erase("color_scheme")。

2. 錯誤提示

npm 安裝 eslint 、babel-eslint npm install eslint babel-eslint -g

使用 package manager 安裝 SublimeLinter、SublimeLinter-contrib-eslint。
在專案 root folder 底下新增 .eslintrc.js，貼上以下內容

{
  // 使用 babel-eslint 解析
  "parser": "babel-eslint",
  "env": {
    // for browser
    "browser": true,
    // in CommonJS
    "node": true
  },
  // 可以自定義要覆寫的預設檢查內容:
  "rules": {

  }
}

Eslint 可以搭配 Sublime Linter，在存檔的時候自動檢查錯誤：

Preferences -> Package Settings -> SublimeLinter -> Settings-User

，設定 "show_errors_on_save": true。

另外，全域安裝 eslint

$ npm install -g eslint

可以在專案根目錄使用

$ eslint --init

指令，由提示選項自動產生 .eslintrc.[js|json] 檔案，做出更加客製化的錯誤提示。

自行定義 ESLint 檢查的規則設定請參考: ESLint-Rule

3. Emmet 支援 JSX 語法

不需要額外安裝 package ，只需要在 Prefrences > Key Bindings (User) 中加入下列設定：

 {
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 
  "context": [
    {
      "operand": "source.js, text.html", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector"
    }, 
    {
      "match_all": true, 
      "key": "selection_empty"
    },
    {
      "operator": "equal", 
      "operand": false, 
      "match_all": true, 
      "key": "has_next_field"
    }, 
    {
      "operand": false, 
      "operator": "equal", 
      "match_all": true, 
      "key": "auto_complete_visible"
    }, 
    {
      "match_all": true, 
      "key": "is_abbreviation"
    }
  ]
}

現在只需要在鍵入 div.container 後按下 tab ，就會產生
<div className="container"></div>。

詳細設定內容請參考:Emmet-Sublime

4. 自動完成語法

package manager 安裝 Babel Snippets，即可支援語法如:

鍵入rcc 後按下 tap 產生

import React, { Component } from 'react';

export class script extends Component {
    render() {
        return (
            
        );
    }
}

更多自動完成語法請參考: Babel-Sublime

若想要鍵入 rcc 時，產生的 class 之前加上 default，那麼需再在安裝 PackageResourceViewer，為 Babel Snippets 在 rcc 對應的語法修改。

首先在 sublime 中按下 command + shift + p，接者在輸入框選擇 PackageResourceViewer: Open Resource，打開 Babel Snippets 套件，輸入 rcc 應該可以對應到 react_component_class.sublime-snippet，打開該檔案後直接在 class 前加上 default，再輸入 rcc 一次就可以產生帶有 default 的語法囉！

前端筆記