如同 nodejs 的 npm ， Go 也擁有自己的套件管理工具 Glide，這裡介紹一下的使用方式

安裝方式 (window 10)

下載取得專案

1

go get github.com/Masterminds/glide

進入 GOPATH\src\github.com\Masterminds\glide 資料夾

編譯執行檔

1

go build glide.go

執行檔移置 bin 資料夾

1

go install

如果環境變數有設定go/bin就可以直接執行

建立一個新專案

建立glide.yaml，這是 glide 的專案設定檔，類似 npm 的 package.json

1

glide init

新增第三方套件

假設我們要新增 github.com/foo/bar 套件 (後面可以接版號)

1

glide get github.com/foo/bar#^1.2.3

glide 會幫你在專案中新增一個 vendor 資料夾，並把相依的套件放在裡面，之後執行go時，會先尋找 vendor 資料夾有無套件，如果沒有才會去找 $GOPATH

下載專案後安裝相依套件

1

glide install

如果專案內沒有 glide.lock 檔案，當您執行 glide install 後，其實系統會先執行 glide up 產生 glide.lock 檔案

window10 安裝問題處理

如果出現錯誤

1

[ERROR] Unable to export dependencies to vendor directory: Error moving files: exit status 1. output: Access is denied. 0 dir(s) moved.

這是一個 window10 的 bug ，請去修改 github.com/Masterminds/glide/path/winbug.go 76 行 move 改 xcopy

1
2
3
4
5
6
7
8
9

// Handking windows cases first
	if runtime.GOOS == "windows" {
		msg.Debug("Detected Windows. Moving files using windows command")
		// cmd := exec.Command("cmd.exe", "/c", "move", o, n) //move改xcopy
		cmd := exec.Command("cmd.exe", "/c", "xcopy /s/y", o, n+"\\")
		output, err := cmd.CombinedOutput()
		if err != nil {
			return fmt.Errorf("Error moving files: %s. output: %s", err, output)
		}

修改後重新編譯一次可

其他 Glide 參數

• --all-dependencies 下載相依套件全部的 dependencies
• -s 下載後刪除 .git 目錄
• -v 移除 Godeps/_workspace 等相關目錄

Cordova主要是將開發好的靜態Web頁面打包至APP，同時也支援各個平台。(Android、IOS、Windows..等等)

以往Web開發者，會另外開啟一個專案，再將build後的靜態產出，放進Cordova專案。

例如Vue開發者可以利用vue-cli建立一個singpage專案，build後再將dist的產出copy到Cordova專案中

如果你懶得這麼做，或許可以自己寫一個自動化，但是即使這樣還是得分別放置兩個專案(Web & Cordova)

實際上是可以直接將兩個專案合併成一個，開發上將非常方便，以下將介紹Vue專案整合至Cordova專案包中

首先建立一個Cordova專案

安裝cordova

安裝詳細可以參照我的這篇文章使用Cordova包裝你的Web，建立你的第一個APP

建立一個Cordova專案

1

cordova create [專案名稱]

以Android為例，我們先建立Android平台

1
2

cd [專案名稱]
cordova platform add android

先試試是否可以成功發布

1

cordova build

成功會產出 [專案名稱].apk

或者可以接上設備，直接發布到設備上

1

cordova run

到這裡為止，代表你的Cordova專案與環境都沒有問題，接下來我們將整合Vue-cli專案

用Vue-cli建立專案並整合至Cordova

首先在cordova專案中，用vue-cli建立vue專案

1
2

cd [專案名稱]
vue init webpack [web專案名]

安裝必要套件

1
2

cd [web專案名]
npm i

接下來開始整合專案，以cordova來說，會把cordova/www中的資料打包至app，所以只要將vue專案build後的dist導入至cordova/www就可以很方便的使用，為了達到這目的，我們需要修改vue專案中的輸出目的

修改vue專案的 config/index.js

1
2
3
4
5
6

build: {
    ...
    index:path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www/'),
    assetsPublicPath: './',
    ...

修改以上3個欄位，目的就是把build後的目標更改為 cordova/www

在vue的 index.html 中增加 cordova 掛件

1

<script src="cordova.js"></script>

為了方便輸出，我們在package.json增加一個命令

1
2
3
4
5

...
 "scripts": {
    ...
    "android": "npm run run && cordova run"
  },

試著接上手機，執行編譯

1

npm run android

完成後就可以看到手機上的畫面!

已經成功整合兩個專案

你可以使用Nodejs開發自己的命令工具，例如 Grunt，Webpack，react-cli，vue-cli….均是此類的服務。

實作一個最命令程序

例如建立一個node專案(一個資料夾，執行過 npm init..)，編寫一個 app.js 內容如下

1

console.log('hello my cli !')

一般而言，要執行這個node程序，你可以下

1
2

node app.js
//畫面輸出 => hello my cli !

如果需要將以上程序建立成命列，你可以這樣做

1
2

#!/usr/bin/env node
console.log('hello my cli !')

加上第一行指定為 node 腳本

在你的 package.json 加上 bin 屬性

1
2
3

"bin": {
    "my-cli": "./app.js"
  }

告知系統執行 my-cli 後，同等執行 node ./app.js

接下來執行以下

1
2

npm i -g
npm link

如果你有安裝其他掛件，你需要先把掛件安裝在全域

最後利用 npm link 把你的命令增加在系統參數中

以後你在任何地方都可以直接執行

1
2

my-cli
//畫面輸出 => hello my cli !

以上步驟，你已經實現了你的命令工具，當然實際上，你可以在你的 app.js 中實現你要作的事，例如自動化新增你的專案版型,或者自動化一些事務..

使用 commander 為你的命令工具增加功能性介面

commander 提供你建立完整的命令工具版型

可以很快速的為你的命令工具建立取得參數，建立命令，說明等等

首先在專案中安裝 commander

1

npm i commander

撰寫app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#!/usr/bin/env node
const program = require('commander')
program
    .version('0.0.1') // 可下 -V 查詢版本
    .description('這裡可以是一個說明')
    .option('-a, --aArgv', '新增a參數') // 可下 -a 設定 program.aArgv 為 true
    .option('-b, --bArgv', '新增b參數') // 可下 -b 設定 program.bArgv 為 true
    .option('-c, --cArgv [type]', '新增c變數內容', 'test123') // 可下 -c 帶內容 設定 program.bArgv 預設值為 test123
//定義一個 deploy 命令，並傳入name參數
program
    .command('deploy <name>')
    .description('定義一個命令')
    .action(function(name) {
        console.log('Deploying "%s"', name)
    })
program.parse(process.argv)
//列印出各個傳入參數
console.log('  - %s aArgv', program.aArgv)
console.log('  - %s bArgv', program.bArgv)
console.log('  - %s cArgv', program.cArgv)

建立命令後，你可以直接執行以下

1
2
3
4
5
6
7
8
9
10

//查看版本
my-cli -V 
//查看說明 
my-cli -h 
//傳入 a=true b=true c=test456
my-cli --aArgv -bArgv -cArgv test456 
//同等
my-cli -ab -c test456
//執行命令
my-cli deploy myname

分享你的 cli 工具

如果你希望把開發後的命令分享給其他人，可以把專案 publish 至 npm

1. 首先把你的專案發佈至 github (package.json 中記得填寫 “repository”: “https://github.com/xxxx/xxxxx.git“)
2. 註冊一個npm帳號
3. 專案中執行

   1 2	npm login //登入 npm publish //分享至npm

以後只要全域安裝你的命令，就可以直接執行

1

npm i -g your-cli

範例專案
https://github.com/cainmaila/test-cli

開發手機網頁有很多地方與開發在電腦上用遊覽器看的網頁有很多不同的地方。

下面列出一些一定要注意的基本事項，藉此提醒同學。

建議使用HTML5語法標籤

比起相容IE低階版本，不如讓手機體驗者更好，這裡我建議做取捨，直接使用HTML5規範，包含CSS3語法。

使用新的語法可以讓瀏覽器渲染你的頁面有更好的效率。

不讓使用者縮放頁面比例

讓使用者可以縮放畫面，就失去作Mobile版本的意義，你可以在你的head加上禁止縮放的meta

1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

單欄式排版，適當的UI大小

Mobile畫面實際上相當小，而且使用者可能隨時旋轉畫面(直式或橫式)，即使頁面有RWD樣式可以應對，內容部分不建議單欄以外的樣式。UI設計大小也需適當，考量手指操作，你不應該把UI做的太小。

觸控事件

Mobile操作與滑鼠操作是完全不一樣的，以技術上來說，滑鼠可以有click，mouseDown，mouseUp，mouseOver，滾輪…等等事件。
但是 Mobile 的觸控上只有 touch 相關事件，沒有mouseOver，滾輪，甚至多了多點的 touch 資訊，可以說完全不一樣，這也是設計上常常疏忽的地方。

關於 touch 事件可以參考這裡

網路環境

大部分的Mobile使用者，網路環境通常都比不上桌機的網路速度，考量到使用者體驗，你必須盡快讓使用者看到你的畫面，每個頁面不應該太長，圖片也需做適當的處理，切勿直接使用大圖縮放，如果頁面資源太大，一定要製作Loading畫面，起碼可以增加使用者等待你頁面下載的耐心。

手機與電腦的效能

雖然現代的手機速度比起過去已經進步很多，不過依然比步上桌機，終究硬體資源上本質不同，新手常犯的錯誤就是在桌機設計很酷炫的動畫，但是在手機上效果卻無法呈現期望的感覺。(儘管你已用自己的手機測試，但是你不能保證使用者的手機效能跟你一樣好)

效能優化上可以考慮以下幾點

• dom操作非常耗效能，可以的話儘量減少直接操作dom的動畫(比方直接使用jq製作動態效果)
• 延續上項建議，動態請直接使用CSS3製作，效能會有更大的進步。(使用css3的transform可以強制開啟裝置上的硬體加速)
• 優化你的js，Mobile速度已經不快啦，可以的話少做一些不必要的事
• 減少下載需求，比方合併你的js與css，並壓縮，

市面上也有很多Mobile框架可以直接參考

Brotli是Google發布的一套壓縮演算法，目前主要運用在資料傳輸壓縮，由前實習生 Anamaria Cotîrlea，在短短幾個月內做的專案，它就為 Google Play 帶來極大效益，每天能減少大約 1.5PB（即 150 萬 GB）數據量，讓用戶下載及更新應用程式變得更順暢、更節省數據傳輸量。

Brotli最初發布於2015年，用於網路字型的離線壓縮。Google軟體工程師在2015年9月發布了包含通用無失真資料壓縮的Brotli增強版本，特別側重於HTTP壓縮。其中的編碼器被部分覆寫以提高壓縮比，編碼器和解碼器都提高了速度，串流API已被改進，增加更多壓縮品質級別。新版本還展現了跨平台的效能改進，以及減少解碼所需的記憶體。

與常見的通用壓縮演算法不同，Brotli使用一個預定義的120千位元組字典。該字典包含超過13000個常用單詞、短語和其他子字串，這些來自一個文字和HTML文件的大型語料庫。預定義的演算法可以提升較小檔案的壓縮密度。

使用brotli取代deflate來對文字檔案壓縮通常可以增加20%的壓縮密度，而壓縮與解壓縮速度則大致不變。

實作實驗

以下實際測試比較

採用 node brotli

壓縮3130K的jpg檔

Express的中間插件

Brotli目前瀏覽器支援度

在這之前，你可能採用compression，幫你的資料傳輸做gzip壓縮，如果你想採用Brotli壓縮，你可以改用以下中間件

shrink-ray

Windows上，這個包依賴於node-gyp

shrink-ray支援以下規格

• deflate
• gzip
• brotli
• zopfli (for asynchronous compression of static assets)

shrink-ray 會幫你選擇適當的數據壓縮方式

1
2
3
4
5
6
7

var path = require('path');
var express = require('express');
var shrinkRay = require('shrink-ray')
var app = express();
app.use(shrinkRay({}))
app.use(express.static(path.join(__dirname, 'web'))); //靜態頁面
app.listen(80);

參考資料

Google開源公告

原始代碼

數據壓縮規格

瀏覽器相容性

效能比較

Brotli与zip压缩率对比

比較Brotli與各種壓縮算法比較

效能比較與Express使用

經過上一篇 建立你的前端開發環境(二) - ES6開發環境 建構後，你的rollup已經可以正常編譯ES6專案了。

如果你的專案需要其他第三方外掛，比方 vue vue-router 等工具，一般方式你可以直接把code掛在script標籤上(全域)

不過實務上我還是喜歡利用 npm 來管理我的外掛模組，比方我使用 yarn add vue 方式來安裝 vue ，然後再使用 import Vue from ‘vue’ 方式來匯入使用。

不過如果依照目前 rollup 專案，編譯時會產生錯誤，因為實際上使用npm管理的模塊，並不會被 rollup 直接使用。如果你需要使用 npm 管理的掛件，必須再安裝以下掛件。

1

yarn add rollup-plugin-node-resolve --dev

它會允許 rollup 使用 node_modules 資料夾中的掛件，不過 npm 所管理的模塊是使用 CommonJS ，為了讓 rollup 可以正確編譯它，需要再安裝以下掛件

1

yarn add rollup-plugin-commonjs --dev

這個掛件可以把 CommonJS 模塊轉換成為 ES6 以便後續讓 bable 去解譯它。

修改你的 rollup.config.js 加上以上兩個掛件

import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
    entry: 'src/app.js',
    dest: 'dist/build.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        nodeResolve({ jsnext: true }), //取用node_modules中的模塊
        commonjs(), //將commonjs轉換為es6
        babel({
            exclude: 'node_modules/**', //掠過檢查node_modules資料夾
        }),
        uglify(),
    ]
};

另外必須注意一下 plugins 的順序，rollup 會依順序解析你的模塊

這樣子你就可以利用 import 來匯入安裝並使用 npm 安裝的模塊了

待續…

上一篇 建立你的前端開發環境(一)，你已經可以把一個基本的js壓縮打包起來，這個單元我們準備開始建構開發ES6環境。

就上一篇的例子，如果你用ES6語法寫一個簡單的Class宣告。

app.js

1
2
3
4
5
6
7
8
9
10
11
12

class MyCalss {
    constructor(myName) {
        this.myName = myName;
    }
    logMyName() {
        console.info(this.myName);
    }
}
let myClass = new MyCalss('Cain');
myClass.logMyName();

我們透過 yarn dev 編譯成 build.js 結果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(function () {
'use strict';
class MyCalss {
    constructor(myName) {
        this.myName = myName;
    }
    logMyName() {
        console.info(this.myName);
    }
}
let myClass = new MyCalss('Cain');
myClass.logMyName();
}());

你會發覺，code 幾乎沒有被處理，僅被一個立即執行的函示打包起來，這不是我們期望的結果，接下來，我們繼續建構，目標是可以把ES6輸出成ES5的code，讓大部分的瀏覽器可以正常執行。

建立ES6開發環境

把ES6輸出成ES5需要兩個掛件，首先安裝以下

1
2

yarn add rollup-plugin-babel --dev
yarn add babel-preset-es2015-rollup --dev

我們利用 rollup 讓他透過 babel 把 es6 的 code 編譯成為 es5

接下來我們建立個 babel 的設定檔
.babel

1
2
3

{
  "presets": ["es2015-rollup"],
}

把 babel 掛件增加到你的 rollup.config.js

1
2
3
4
5
6
7
8
9
10
11
12

import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';
export default {
    entry: 'app.js',
    dest: 'build.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        babel(), //增加 babel 掛件
        uglify(),
    ]
};

之後再次編譯，yarn dev，編譯結果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

(function () {
'use strict';
var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};
var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();
var MyCalss = function () {
    function MyCalss(myName) {
        classCallCheck(this, MyCalss);
        this.myName = myName;
    }
    createClass(MyCalss, [{
        key: 'logMyName',
        value: function logMyName() {
            console.info(this.myName);
        }
    }]);
    return MyCalss;
}();
var myClass = new MyCalss('Cain');
myClass.logMyName();
}());

太棒了! 透過 babel 後，原本的 es6 編譯成為 es5，且format iife模式讓你直接js把掛在script標籤上，瀏覽器可以正常的執行它。

如果如果你仔細看過 webpack 與 rollup 編譯的結果後，你會發覺 rollup 真的乾淨非常多，產出的js檔案也相對小，重點是佈建整個開發環境速度也相當快速，這也是我目前選用 rollup 的主因

建立你的前端開發環境(三) - 使用 npm 的第三方模塊

為了建構一個讓自己可以開心工作的js前端開發環境，嘗試了了Grunt，Gulp,一直到目前最多人的 Webpack

Webpack 真的很不錯，外掛資源也豐富，但是總覺得輸出封裝後的code有些多餘(甚至你不會想要看他)，其實有時候只是需要封裝一個小模組，可能一些小演算法，或許用了ES6語法，想輸出處理成乾乾淨淨的js。這時候可以考慮使用 Rollup.js , 比起 Webpack 它更小更快，還能刪除多餘的程式碼(沒有用到的模組，rollup不會把它封裝到你的js)，但是最大的重點就是，我實在不想為了寫個小東西就去建構一個肥大的webpack環境。

Rollup.js 官網

本教程將一步一步帶你利用rollup建構一個自己的 Web app 前端開發環境

安裝 yarn

如果你以熟悉npm的話，yarn你可以當成一樣的東西，只是我覺得大部分情況下yarn更快。

如果你想繼續使用熟悉的npm，並不會影響rollup的使用，請自行評估。

關於yarn安裝與使用，你可以參考這裡

建構你的第一個rollup專案

為了讓你可以很清楚下去，我們這裡先使用最單純的作法。

首先建構你的資料夾，命令列中並進入這個工作目錄

建構專案的 package.json (這裡跟 npn init 是一樣意思)

1

yarn init

安裝rollup

1

yarn add rollup --dev

這裡加上 –dev 參數，代表我只想在develop模式中安裝他。

讓他加在 package.json 的 devDependencies 標籤中。

專案中新增一個 rollup.config.js 檔案

1
2
3
4
5

export default {
    entry: 'app.js',
    dest: 'build.js',
    format: 'iife',
};

這是一個rollup設定檔，上述是指輸入編譯 app.js，輸出成 build.js，封裝方式採用 iife。

關於format有以下幾種選擇

• amd - 輸出成AMD模塊規格(Asychronous Module Definition)，RequireJS可以用
• cjs - CommonJS規格，適合Node，Browserify，Webpack 等
• es - 這是預設值，不改變code
• iife - 自動執行函示，最適合導入 html 中的 script 標籤，而且檔案最小
• umd - 通用模式，amd cjs iife 都能用

在 package.json 中加上 rollup 執行命令

1
2
3
4
5
6
7
8
9
10
11
12

{
    "name": "demo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
        "rollup": "^0.41.4"
    },
    "scripts": {
        "dev": "rollup -c"
    }
}

加上 scripts 標籤，這個標籤相當好用，可以巨集你的命令，往後只要命令列中下 yarn dev 就會執行 rollup -c 命令，rollup預設會去找 rollup.config.js 這個設定檔

封裝你的js

依照 rollup.config.js 中的設定，你可以建立一支app.js，執行以下

1

yarn dev

就會開始處理你的js，處理好了後會輸出成 build.js，你可以自己更改 format 設定看看輸出內容的差異。

以上是最基本的使用方法，當然為了讓自己有更愉快的開發環境，我們不會只作這樣的事，為了讓你清楚使用方式，後面們會再慢慢加上去。

壓縮你的js

例如你需要壓縮你的js,你可以加上以這個掛件

首先安裝

1

yarn add rollup-plugin-uglify --dev

在 rollup.config.js 中加上 uglify 掛件

1
2
3
4
5
6
7
8
9
10

import uglify from 'rollup-plugin-uglify';
export default {
    entry: 'app.js',
    dest: 'build.js',
    format: 'iife',
    sourceMap: 'inline', //加上sourceMap
    plugins: [
        uglify(), //匯入 uglify 掛件
    ]
};

之後再編譯一次，你會發覺輸出的 build.js 已經被壓縮處理過了。

為了開發上的方便，你可以在輸出的code上加上 sourceMap ，所以我加上了 sourceMap: ‘inline’ 設定，這樣子如果有資訊輸出或錯誤，可以明確告訴你位置在哪(行數那些..)，如果不需要可以拿掉他，終究對編譯速度還是有影響。

實際發布請把這個設定拿掉，inline 這個設定會把 sourceMap 加在js結尾，增加了js容量，這不是我們希望看到的結果。

建立你的前端開發環境(二) - ES6開發環境

如何在你的Express服務中加上SSL，如果你不希望付費申請的話，可以直接使用SSL For Free

你唯一要做的事就是每三個月更新一次(你可以設定郵件通知)

申請方式請參閱這篇文章SSL For Free 免費 SSL 憑證申請，使用 Let’s Encrypt 最簡單方法教學！

申請完成後你會取得三個檔案

• ca_bundle.crt
• certificate.crt
• private.key

certificate.crt需先轉成pem檔才可以使用

1

openssl x509 -in certificate.crt -inform der -outform pem -out certificate.pem

透過openssl將crt轉成pem檔

匯入express服務

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var fs = require('fs');
var path = require('path');
var keyPath = './private.key';
var certPath = './certificate.pem';
var hskey = fs.readFileSync(keyPath);
var hscert = fs.readFileSync(certPath);
var express = require('express');
var https = require('https');
var app = express();
app.use(express.static(path.join(__dirname, 'web')));
var server = https.createServer({
	key: hskey,
    cert: hscert
}, app);
server.listen(443, function() {
    console.log('runing Web Server in ' + port + ' port...');
});

SSL預設對外請使用 443 port，路由請記得開啟

自從開始用Vue框架後，一直很快樂的在coding前端，不但學習曲線低，效能也上得了檯面

最棒的是可以像React自訂Component，不但架構清晰，如果規劃的好，Component還可以拿去別的專案使用。

vue.js 允許你自己定義 .vue 檔(Component檔)，你可以把Template，js，css(less、sass..) 全部封裝在裡面，最後透過 像是 webpack 或者 rollup 打包進你的專案使用。

筆者本身使用 Sublime Text 作為開發IDE，你可上去 packagecontrol.io上查看vue的相關資源，目前有以下三個。

• Vuejs Snippets - 提供vue Snippets
• Vue Syntax Highlight - vue語法支援
• Vuejs Complete Package - vue語法自動完整

有了以上這些掛件，基本上可以讓你在Sublime Text很開心的開發vue.js

最後你如果有使用版型整理，會發現並沒有支援.vue檔的掛件 (這件事曾將讓我這偏執狂很很不開心XD)

但是只細觀察後你會發現一件事，.vue的內容，其實是可以符合html規範的，所以當你想要整理.vue的Template時，只要把你平常整理html的方法拿來整理.vue就行了。

1. 首先安裝這個掛件 HTML-CSS-JS Prettify ，他是用來幫你整理版面的。

2. 打開工具列的 Preferences > Package Settings > HTML/JS/CSS Prettify > Set Prettify Preferences

3. 設定檔中的的html支援檔名加上vue

1. 開工具列的 Preferences > Package Settings > HTML/JS/CSS Prettify > Set Plugin Options

2. 把 format_on_save 參數改成 true ，這樣子每當你save時幫你整理對齊的版面。

碼農們! 繼續快樂的開發吧!