前言

延續前兩天的主題，接著來介紹 JavaScript/TypeScript 的應用場合：前端框架。
提到前端框架，會直覺地想到三巨頭：

• Angular
• React
• Vue

今天只著重在如何使用 VS Code 來減少開發的麻煩事，加速開發的流程。

前情提要

三大框架使用的語言是 JavaScript 或 TypeScript，因此關於這兩者如何與 VS Code 配合，請參考前兩天的內容：

• Day 17: 使用 VS Code 來開發 JavaScript。
• Day 18: 使用 VS Code 來開發 TypeScript。

Debugging

前端的開發仰賴瀏覽器，目前 vs code 支援的瀏覽器 Debug，就是 Chrome & Firefox

• Debugger for Chrome。
• Debugger for Firefox。

剩下的操作內容，請參考拙作：

• Day 11: 總是被忽視的功能：debugging（一）。
• Day 12: 總是被忽視的功能：debugging（二）。

Extension

接著幫大家整理前端框架會使用的 Extension。

通用型

建議安裝

• npm。
• Search node_modules。
• NPM IntelliSense。
• Path IntelliSense。
• Auto Import。

Snippets

如果不想自己寫的話，可以安裝他人寫好的：

• JavaScript (ES6) Snippets。

Linter

如果使用 JavaScript 開發的話，下面兩者擇一：

• ES Lint。
• Flow Language Support。

如果使用 TypeScript 開發的話，只有一種：

• TSLint。

HTML 支援

減少 HTML Tag 撰寫上的麻煩。

• Auto Close Tag。
• Auto Rename Tag。

Angular

首先，是 Snippets 的 Extension，選擇頗多，以下擇一即可：

• Angular Snippets (Version 8)。
• Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout。

關於 EditorConfig 的支援，當然有：

• EditorConfig for VS Code。

快速建立符合 Bootstrap 4 風格的 HTML Template：

• NgBootstrap Snippets。

React

可以再加強的部份是 Snippets，熱心的開發者眾多，以下挑一個即可（當然，要自己寫也可以）：

• ES7 React/Redux/GraphQL/React-Native snippets。
• React-Native/React/Redux snippets for es6/es7。
• React/Redux/react-router Snippets。
• Reactjs code snippets。

Vue

開發 Vue，一定要安裝的套件是：

• Vetur。

此外，Snippets 有高人寫好的，可以安裝使用：

• Vue VSCode Snippets。

結論

今天幫前端工程師們整理最基本要使用到的 Extension。
寫到最後忽然驚覺，怎麼左看右看都是強化 Snippets 啊？
而且三個框架的差異處，也是在 Snippets。
（三大框架差異處不太多的講法，似乎有證實到）