首先宣告，為了書寫方面，下文用 VSC 替代 visual studio code 全稱

1、開發工具直接在官方下載即可，有免費版。但注意，是 visual studio code，不是 visual studio 別的。
    https://visualstudio.microsoft.com/zh-hans/free-developer-offers/

2、VSC 的外掛：實用的 Visual Studio Code 外掛
    其中，JS-CS-HTML Formatter 這個外掛自帶 Ctrl+s 格式化程式碼功能，將其禁用並重啟 VSC 就好

3、快捷鍵的使用：https://cloud.tencent.com/developer/article/1004923

4、配置 vue 元件模板
    (1)、file --> preferences --> User snippets（中文版路徑：檔案 --> 首選項 --> 程式碼片段），輸入 vue，選擇 vue（這個就是 vue.json），進入 vue.json 頁面，貼上以下內容，然後在 vue 檔案中輸入 vue 點 tab 鍵就可以了。

"Print to console": {
	"prefix": "vue",
	"body": [
            "<template>",
            "    <div class=\"$1\">\n",
            "    </div>",
            "</template>\n",
            "<script type='text/ecmascript-6'>",
            "    export default {",
            "        data () {",
            "            return {\n",
            "            }",
            "        },",
            "        components: {\n",
            "        }",
            "    }",
            "</script>\n",
            "<style scoped lang='stylus' rel='stylesheet/stylus'>\n",
            "</style>",
            "$2"
        ],
	"description": "Log output to console"
}
 

5、配置項設定：https://segmentfault.com/a/1190000014785115?utm_source=index-hottest
    其中有：程式碼錯誤實時提示，儲存時自動格式化，快捷鍵格式化，儲存時自動更正 格式 錯誤的 js 程式碼。

6、我在使用 VSC 做 vue 專案時所用到的外掛：
    vue 2 snippets：支援 vue 2 程式碼補全
    vetur：語法高亮，程式碼補全，錯誤檢測
    Color Highlight：顏色高亮
    language-stylus：以 styl 為字尾名的檔案語法高亮
    open in browser：在預設瀏覽器開啟

7、修改預設 tab 格式，預設為 4 格：https://jingyan.baidu.com/article/a3761b2bf4b0621576f9aa80.html

8、設定自動換行：https://jingyan.baidu.com/article/6dad5075383c3fa123e36ec3.html

最後，才剛開始使用 VSC ，更多問題和需求待更新