網頁

2014年8月20日 星期三

[Project] 用Magento_公益購物商城架站_02

Eclipse 設定相關環境及HTML5開發環境

一套 PHP開發的伺服器運作系統, 不僅只有 PHP, Java等, 再沒足夠的指引下, 只好一邊摸索, 同時 Google 扒文找資料.

Eclipse 有多種可直接使用的免安裝包, 我抓回來的是 Java Eclipse Luna 4.4 版, 需要, 支援 PHP 等一堆功能, 而內定使用的HTML4, 必須動手改造, 參考作者: 噗噗的 [Eclipse搭建HTML5开发环境]

1. 推薦使用Eclipse IDE for Java EE Developers,包含動態Web開發包,對於使用J2EE開發網站的開發人員非常不錯。[直接按這裡下載最新版]

2. 若只需要開發Html5應用,可不用配置Java環境。下載壓縮包,直接解壓即可使用。
Eclipse幾乎不需要怎麼配置,只需在首次啟動的時候選擇工作區就行。所謂工作區就是我的所有專案 / 檔案建立時預設的目錄。

3. 打開 Eclipse,選單選擇 File->New->Project...或者 File->New->Other...你現在會看到類似下面的一個彈出視窗,這個視窗就是顯示所有可選的項目類型。



如果沒有Web 的選項, 請從選單的 說明 ->/安裝新軟體 -> 彈出安裝視窗, Work with: 選擇  --所有可用網站 --. 或是新增更新網址, 在過濾文字欄打入 Web, 會在完成搜尋後出現與 Web 相關的套件.

Sublime Text 2 便携版工具包
http://loo2k.com/blog/sublime-text-2-portable-version-tool/


http://etosun.com/sublime_text2_zh_cn.html

Sublime Text 手冊
http://docs.sublimetext.tw/

Sublime Text2 SublimeCodeIntel 語言開發套件包 (含追蹤程式碼)
http://www.barryblogs.com/sublime-text2-php-developer-package/

https://sublime.wbond.net/packages/SublimeCodeIntel
http://ilowkey.net/kmtool-sublime-text-chinese-file/#.U_R8scmGmSo

Readme

Source
    raw.​githubusercontent.​com

SublimeCodeIntel

Code intelligence plugin ported from Open Komodo Editor to Sublime Text.

Supports all the languages Komodo Editor supports for Code Intelligence (CIX, CodeIntel2):
JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Provides the following features:

    Jump to Symbol Definition - Jump to the file and line of the definition of a symbol.
    Imports autocomplete - Shows autocomplete with the available modules/symbols in real time.
    Function Call tooltips - Displays information in the status bar about the working function.

Plugin should work in all three platforms (MacOS X, Windows and Linux).
Click here to lend your support to SublimeCodeIntel and make a donation!
Installing

With the Package Control plugin: The easiest way to install SublimeCodeIntel is through Package Control, which can be found at this site: http://wbond.net/sublime_packages/package_control

Once you install Package Control, restart Sublime Text and bring up the Command Palette (Command+Shift+P on OS X, Control+Shift+P on Linux/Windows). Select "Package Control: Install Package", wait while Package Control fetches the latest package list, then select SublimeCodeIntel when the list appears. The advantage of using this method is that Package Control will automatically keep SublimeCodeIntel up to date with the latest version.

Without Git: Download the latest source from GitHub and copy the whole directory into the Packages directory.

With Git: Clone the repository in your Sublime Text Packages directory, located somewhere in user's "Home" directory:

git clone git://github.com/SublimeCodeIntel/SublimeCodeIntel.git

The "Packages" packages directory is located differently in different platforms. To access the directory use:

    OS X:

    Sublime Text -> Preferences -> Browse Packages...

    Linux:

    Preferences -> Browse Packages...

    Windows:

    Preferences -> Browse Packages...

Using

    Start typing code as usual, autocomplete will pop up whenever it's available. SublimeCodeIntel will also allow you to jump around symbol definitions even across files with just a click ..and back.

    For Mac OS X:
            Jump to definition = Control+Click
            Jump to definition = Control+Command+Alt+Up
            Go back = Control+Command+Alt+Left
            Manual Code Intelligence = Control+Shift+space
    For Linux:
            Jump to definition = Super+Click
            Jump to definition = Control+Super+Alt+Up
            Go back = Control+Super+Alt+Left
            Manual Code Intelligence = Control+Shift+space
    For Windows:
            Jump to definition = Alt+Click
            Jump to definition = Control+Windows+Alt+Up
            Go back = Control+Windows+Alt+Left
            Manual Code Intelligence = Control+Shift+space

Don't despair! The first time you use it it needs to build some indexes and it can take more than a few seconds.

It just works!
Configuring

For adding additional library paths (django and extra libs paths for Python or extra paths to look for .js files for JavaScript for example), either add those paths as folders to your project, or create an optional codeintel configuration file in your home or in your project's root.

Configuration files (~/.codeintel/config or project_root/.codeintel/config). All configurations are optional. Example:

{
    "PHP": {
        "php": '/usr/bin/php',
        "phpExtraPaths": [],
        "phpConfigFile": 'php.ini'
    },
    "JavaScript": {
        "javascriptExtraPaths": []
    },
    "Perl": {
        "perl": "/usr/bin/perl",
        "perlExtraPaths": []
    },
    "Ruby": {
        "ruby": "/usr/bin/ruby",
        "rubyExtraPaths": []
    },
    "Python": {
        "python": '/usr/bin/python',
        "pythonExtraPaths": []
    },
    "Python3": {
        "python": '/usr/bin/python3',
        "pythonExtraPaths": []
    }
}

Additional settings can be configured in the User File Settings:

Do NOT edit the default SublimeCodeIntel settings. Your changes will be lost when SublimeCodeIntel is updated. ALWAYS edit the user SublimeCodeIntel settings by selecting "Preferences->Package Settings->SublimeCodeIntel->Settings - User". Note that individual settings you include in your user settings will completely replace the corresponding default setting, so you must provide that setting in its entirety.

Available settings:

    A list of disabled languages can be set using "codeintel_disabled_languages". Ex. "codeintel_disabled_languages": ['css']
    Live autocomplete can be disabled by setting "codeintel_live" to false.
    Live autocompletion can be disabled in a per-language basis, using "codeintel_live_disabled_languages". Ex. "codeintel_live_disabled_languages": ['css']
    Information for more settings is available in the SublimeCodeIntel.sublime-settings file in the package.

Troubleshooting

To force re-indexation of the code intelligence database you need to follow these steps:

    Close Sublime Text
    Open a terminal or navigate through your directories to find the directory ~/.codeintel that contains codeintel.log, VERSION and the directory db. In Windows, this should be at %userprofile%\.codeintel.
    Delete the whole directory ~/.codeintel and all of its content. Particularly, if you want to delete only the indexes, the code intelligence database indexes are located inside ~/.codeintel/db.
    Start Sublime Text and enjoy a clean re-indexing!

Building

Building process is no longer distributed with this repository. You need to get SublimeCodeIntel/CodeIntelSources to run build.sh.

More information in SublimeCodeIntel/CodeIntelSources/src.


Sublime Text 2 個人環境設定筆記
版本:Sublime Text 2.0.2 x64 [Portable Version]
更新日期:20130815
套件數量:30
環境設定檔路徑:
Windows:.\Data
Mac OS X:~/Library/Application Support/Sublime Text 2/Data

快捷鍵備忘:
Windows
編輯
Ctrl + N 開新分頁
Ctrl + X 刪除行
Ctrl + / 單行註解
Ctrl + Shift + / 區塊註解
Ctrl + F 搜尋
Ctrl + H 取代
Ctrl + Shift + F 檔案間搜尋
Ctrl + R 快速跳到某個函數
F11 全螢幕
Shift + F11 極簡潔全螢幕
Alt + Shift + [1-4] 水平多重視圖
Alt + Shift + [8,9] 垂直多重視圖
Alt + Shift + 5 4格多重視圖
Shift + Mouse Right Drag Column Selection
環境
Ctrl + Shift + P Sublime 命令列
Ctrl + ` Python 控制台
Mac OS X (super = command = ⌘ | option = opt = Alt = ⌥ | Control = ctrl = ^)
編輯
 + N 開新分頁
⌘ + X 刪除行
 + / 單行註解
 +  + / 區塊註解
 + F 搜尋
 + ⌥ + F 取代
 + Shift + F 檔案間搜尋
 + R 快速跳到某個函數
⌘ + ^ + F 全螢幕
 + ^ + Shift + F 極簡潔全螢幕
 +  + [1-4] 水平多重視圖
 +  + Shift +  [8,9] 垂直多重視圖
 +  + 5 4格多重視圖
⌥ + Mouse Left Drag Column Selection
環境
 + Shift + P Sublime 命令列
Control + ` Python 控制台

1. 安裝 Package Control
Python 控制台下輸入
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

2. 安裝外掛
檔案類型支援擴充:
INI - 支援 .ini 語法顏色
ApacheConf.tmLanguage - 支援 .conf 語法顏色
HexViewer - 二進位檢視

通用:
Alignment - 程式碼對齊 選取後 Ctrl + Alt + A / Cmd+Ctrl+A
BracketHighlighter - 括號{}高亮顯示(安裝後需設定參數)
ConvertToUTF8 - 可開啟 UTF8 以外檔案
DocBlockr - 快速註解
Goto Documentation - 快速查看函數說明(需自行定義 keybinding)
SFTP - 遠端同步編程
SublimeCodeIntel - 智慧提示
SyncedSideBar - 側邊攔與tab頁籤同步
Theme - Soda - 慣用 Theme
Git - GitHub 支援
AutoFileName - 檔案路徑智慧提示

PHP 用:
Drupal - Drupal 支援
Goto Drupal API - Goto Documentation for Drupal 支援
Drupal Snippets - 快速插入 Drupal 片段
Drupal Project Autocomplete - Drupal 支援
SublimeLinter - PHP 語法檢查
CodeIgniter Snippets - CodeIgniter Framework 支援
CodeIgniter Utilities - CodeIgniter Framework 支援

網頁前端:
ColorPicker - 快速顏色選取器 Ctrl + Shift + C / Super + Shift + C
Emmet - ZenCoding 支援
jQuery - jQuery 語法提示支援
jQuery Snippets Pack - 快速插入 jQuery 片段*
JsFormat - JS格式化插件 Ctrl + Alt + F(需自行定義 keybinding)
Prefixr - CSS跨瀏覽器相容性補齊 Ctrl+Alt+X
SCSS - 可程式化CSS語法支援
SublimeTmpl - 快速模板 Ctrl+Alt+(C[ss],H[tml],J[avascript])
HTML5 - HTML5 tag支援


3. 環境設定 (注意事項:最後一項設定結尾不能有 , )
Setting - User
字體大小:"font_size": 13(Windows) or 18(Mac OS X)
高亮目前選取行:"highlight_line": true
存檔時移除不必要的空白:"trim_trailing_white_space_on_save": true
存檔時檔尾留一行:"ensure_newline_at_eof_on_save": true
使用 Theme - Soda(需先安裝Theme - Soda):"theme": "Soda Dark.sublime-theme"
專案資料夾 icon(需先安裝Theme - Soda):"soda_folder_icons": true
停用插件變慢警告訊息:"detect_slow_plugins": false

Setting - Default
選取變數可以選取到 !@#$:移除 "word_separators": 中的 !@#$

KeyBindings - User
Windows
Ctrl + T 開新分頁:{ "keys": ["ctrl+t"], "command": "new_file" }
F1 PHP 函數官方說明頁:{ "keys": ["f1"], "command": "goto_documentation" }
Alt + D 在資料夾中檢視檔案:{ "keys": ["alt+d"], "command": "open_dir", "args": {"dir": "$file_path", "file": "$file_name"} }
Alt + J JavaScript 格式化:{ "keys": ["alt+j"], "command": "js_format"}
Alt + H HTML&PHP 格式化:{ "keys": ["alt+h"], "command": "reindent", "args": {"single_line": false} }
Ctrl + V 修改為自動符合縮排 { "keys": ["ctrl+v"], "command": "paste_and_indent" }
Mac OS X (super = command = ⌘ | option = opt = Alt = ⌥ | Control = ctrl = ^)
⌘ + T 開新分頁:{ "keys": ["super+t"], "command": "new_file" }
⌘ + Q PHP 函數官方說明頁:{ "keys": ["super+q"], "command": "goto_documentation" }
^ + D 在資料夾中檢視檔案 { "keys": ["ctrl+d"], "command": "open_dir", "args": {"dir": "$file_path", "file": "$file_name"} }
^ + J JavaScript 格式化:{ "keys": ["ctrl+j"], "command": "js_format"}
^ + H HTML&PHP 格式化:{ "keys": ["ctrl+h"], "command": "reindent", "args": {"single_line": false} }
⌘ + V  修改為自動符合縮排 { "keys": ["super+v"], "command": "paste_and_indent" }
KeyBindings - Default
移除無用快捷(避免誤按)
Windows
Ctrl + J { "keys": ["ctrl+j"], "command": "join_lines" }
Ctrl + L { "keys": ["ctrl+l"], "command": "expand_selection", "args": {"to": "line"} }

BracketHighlighter 高亮設定 (Preferences -> Package Settings -> Bracket Highlighter -> Bracket Settings - Default)
大約 333 行(或搜尋 "default": { )
註解 "color": "brackethighlighter.default",
取消註解 //"color": "entity.name.class",
"style": "underline" 修改為 "style": "hightlight"
註解 "tag" 底下的 "style"

讓 Emmet 符合 xhtml 規範(啟用 self_closing_tag)
[Preferences] -> [Package Settings] -> Emmet -> emmet -> emmet-app.js
搜尋 createProfile('html', {self_closing_tag: false}); 將 false 改為 'xhtml'

HexViewer 設定自動作用 (Preferences -> Package Settings -> HexViewer ->  Settings - Default)
"auto_open" : false -> true
"auto_open_patterns" : 加入作用的檔案類型 ex: *.exe

CodeIgniter Snippets 修改 Snippets 加入 Controller,Model 建構子
.\Data\Packages\CodeIgniter Snippets\controller.sublime-snippet
.\Data\Packages\CodeIgniter Snippets\model.sublime-snippet

public function __construct()
{
     parent::__construct();
}



4. 加入 Winodws 右鍵選單
在 Sublime 目錄下新增一個 BATCH(.bat) 檔案
@echo off
reg add "HKCR\*\shell\SublimeText2" /t REG_SZ /v "MUIVerb" /d "用 Sublime Text 2 編輯" /f
reg add "HKCR\*\shell\SublimeText2" /t REG_SZ /v "Icon" /d "%cd%\sublime_text.exe" /f
reg add "HKCR\*\shell\SublimeText2\Command" /t REG_SZ /ve /d "\"%cd%\sublime_text.exe\" \"%%1\"" /f

5. 輸入註冊碼
----- BEGIN LICENSE ----- 
Andrew Weber 
Single User License 
EA7E-855605 
813A03DD 5E4AD9E6 6C0EEB94 BC99798F 
942194A6 02396E98 E62C9979 4BB979FE 
91424C9D A45400BF F6747D88 2FB88078 
90F5CC94 1CDC92DC 8457107A F151657B 
1D22E383 A997F016 42397640 33F41CFC 
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D 
5CDB7036 E56DE1C0 EFCC0840 650CD3A6 
B98FC99C 8FAC73EE D2B95564 DF450523 
------ END LICENSE ------ 


6. 繁體中文化(非完美繁中化)
下載 219_sublimetext_cht.7z 解壓縮至 .\Data\Packages\Default 下