一. 下載安裝Visual Studio Code
- 配置前端開發環境：界面左下角“設置”圖標，選擇setting，輸入setting.json，找到setting.json並進入
{ "workbench.colorTheme": "Material Theme High Contrast", //"sublimeTextKeymap.promptV3Features": true, // 編輯器 "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions": "top", "editor.renderWhitespace": "none", "editor.formatOnPaste": true, "editor.wordWrap": "on", "editor.fontSize": 18, "editor.tabSize": 2, // 文件資源管理 "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": false, // 終端 "terminal.integrated.cursorBlinking": true, "terminal.integrated.cursorStyle": "line", "emmet.includeLanguages": { "vue-html": "html" }, // 文件 "files.eol": "\n", "files.associations": { "*.vue": "vue" }, "files.autoSave": "afterDelay", // 窗口 "window.zoomLevel": 1, // 使用 vscode-typescript 來整理代碼 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.ts": "vscode-typescript", "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 可能是讓 CPU 炸了的罪魁禍首 "search.followSymlinks": false, "html.format.extraLiners": "", "workbench.sideBar.location": "left", "workbench.iconTheme": "material-icon-theme", "editor.minimap.enabled": true, "breadcrumbs.enabled": true, "editor.renderControlCharacters": false, "workbench.statusBar.visible": true, "window.menuBarVisibility": "default", "workbench.activityBar.visible": true } - 需要安裝的插件：插件網址
- Auto Close Tag
- Auto Rename Tag 修改html標籤，自動幫你完成尾部閉合標籤的同步修改
- Bootstrap 3 Snippets 常用bootstrap的可以下載
- CSS Peek 追蹤至樣式表中 CSS 類和 ids 定義的地方
- Debug for Chrome 讓vscode映射chrome的debug功能，靜態頁面都可以用vscode來打斷點調試
- Document This Js的註釋模板
- EditorConfig for VS Code
- EsLint
- HTML CSS Support 讓HTML標籤上寫class智能提示當前項目所支持的樣式
- HTML Snippets H5代碼片段以及提示
- JavaScript(ES6) code snippets
- jQuery code Snippets jquery提示工具
- language-stylus
- Markdown All in One
- Material Icon Theme 圖標主題
- Material Theme 主題風格
- Minify 用於壓縮合並 JavaScript 和 CSS 文件的應用程序
- npm Intellisense require 時的包提示
- open-in-browser 由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項
- path Intellisense 自動路徑補全、默認不帶這個功能
- prettier-code formatter
- SVG Viewer 此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件並查看它們
- Typing Installer 安裝vscode 的代碼提示依賴庫，基於typtings
- Vetur
- vscode-icons 讓vscode資源目錄加上圖標
- Vue 2 Snippets
二. 下載安裝Node.js，並驗證是否安裝成功
三. 安裝typings，並驗證是否安裝成功
npm install -g typings
- 安裝對應插件的提示工具
typings install dt~node --global --save
typings install dt~lodash --save
typings install dt~express --save
- 基本用法
# 安裝Typings的命令行代碼.
npm install typings --global
# 搜索對應模塊的typings定義.
typings search tape
# 根據名稱尋找一個可獲得的typings定義.
typings search --name react
# 如果你用一個獨立包的模塊:
# 或者並不是安裝全局模塊
# 比如並不是在命令行通過輸入npm install -g typings這種方式安裝的.
typings install debug --save
# 如果是通過script標記
# 或者是子環境的一部分
# 或者全局typings命令不可用的時候：
typings install dt~mocha --global --save
# 從其他版本處安裝typings定義(比如env或者npm).
typings install env~atom --global --save
typings install npm~bluebird --save
# 使用該文件`typings/index.d.ts` (在`tsconfig.json`文件使用或者用 `///` 定義).
cat typings/index.d.ts
- 啓用代碼提示功能
通過兩種方式啓用：
1. 第一種是在需要進行只能提示的文件最上行增加提示信息文件所在目錄，格式如下:
/// <reference path="./typings/index.d.ts" />
注意：文中我的path路徑就是當前工作目錄的相對路徑（也可以直接寫絕對路徑）
2. 第二種是在項目所在的目錄中增加一個名爲jsconfig.json的空文件