sublime text 3 及相關開發插件安裝

sublime是大多程序員開發所用到的編輯器，很流行。

 

------------------

sublime text3的安裝和經常使用插件的安裝

 

一、百度sublime text3 下載電腦系統至關的版本，而後安裝

https://www.sublimetext.com/3

 

二、再安裝 package control

百度package control

下載https://packagecontrol.io/installation

再打開sublime編輯器，菜單Preferences=》點Browse Packages=》將下好的Package Control.sublime-package這個包，拷貝在上一層目錄Installed Packages文件夾裏

而後從新運行sublime編輯器

按ctrl+shift+p打開插件工具命令窗口，輸入pcip，選擇第一個Package control:install package

 

三、在線安裝emmet插件

按ctrl+shift+p打開插件工具命令窗口，輸入pcip，選擇進入Package control:install package

而後輸入搜索emmet插件，點第一個Emmet下載等安裝

使用：新建文檔，輸入 !，再按下 Tab鍵或者 Ctrl + E ，就能快速打開HTML5的總體結構。

 

四、安裝SideBarEnhancements插件，方便用瀏覽器進行瀏覽。

快捷鍵 ctrl+shift+p 打開插件管理，輸入pcip，調出插件安裝命令，再輸入SideBarEnhancements，進行在線安裝便可。

 

五、安裝HTML/CSS/JS prettify插件，快捷鍵 ctrl+shift+p 打開插件管理，輸入pcip，調出插件安裝命令，再輸入prettify，進行在線安裝便可。

安裝好後快遞鍵 Ctrl+Shift+h 便可快速整理代碼，讓代碼看起來更工整。若是不能使用，請安裝nodejs，去官方下載一個node.exe,放入提示的指定目錄（C:\Program Files\nodejs\node.exe），便可。

 

六、css顏色拾合器ColorPicker插件

快捷鍵 ctrl+shift+p 打開插件管理，輸入pcip，調出插件安裝命令，再輸入ColorPicker在線安裝便可。

使用快捷鍵調用Ctrl+Shift+C

 

七、php代碼錯誤提示

先安裝sublimelinter本體安裝完之後

再搜索一下，安裝sublimelinter-PHP

--------------------

 

 

彈性盒子方法：

html, body {

                display: -webkit-box;

                display: -webkit-flex;

                display: flex;

                -webkit-box-orient: vertical;

                -webkit-flex-flow: column;

                flex-flow: column;

                height: 100%;

            }

 

.header {

                width: 100%;

                height: 45px;

               

            }

            

            .content {//縱向的彈性盒子

                -webkit-box-flex: 1;

                -webkit-flex: 1;

                flex: 1;

                width: 100%;

               

            }

            

            .footer {//底部也是一個4等分彈性盒子  

                display: -webkit-box;

                display: -webkit-flex;

                display: flex;

                -webkit-box-orient: horizontal;

                -webkit-flex-flow: row;

                flex-flow: row;

                width: 100%;

                height: 45px;

               

            }

.footer .menu {//橫向的4等分彈性盒子

                -webkit-box-flex: 1;

                -webkit-flex: 1;

                flex: 1;

                padding-top: 27px;

                padding-bottom: 6px;

                text-align: center;

                font-size: 10px;

                color: #595959;

                background-repeat: no-repeat;

                background-size: 20px 20px;

                background-position: center 6px;

            }