@Author：Runsen
@Date：2020/6/11

人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！

寫代碼，IDE很重要。Pyhon用Pycharm，Java用IDEA，由于我還裝了anaconda，一系列數據分析軟件，SPSS，Stata，內存實在不行。只好選擇VsCode作為前端的開發工具。

文章目錄

• VsCode下載
• 插件的安裝
• Vscode界面介紹
• VScode用戶設置
• 前端推薦插件
• 快捷鍵

VsCode下載

首先就是安裝了，在百度上直接搜索vscode，全英文的就是

在里面點擊下載，下載壓縮包
下載好之后直接點擊.exe文件就可以運行vscode了

Vscode是一個輕量的編譯器，所以默認是通過打開文件夾的功能來打開對應的工程。而且下面會列舉出最近打開的工程，方便打開用戶打開最近打開的工程進行編輯和修改。

插件的安裝

vscode之所以強大，是因為有許多插件
我先只講三個重要的插件

• chinese中文插件
• open in browser 打開瀏覽器
• material icon theme 圖標主題
  vscode是一個國外的編程軟件，所以說打開的頁面都是英文
  第一個插件chinese就是漢化插件，安裝之后都更改成了中文界面
  第二個是前端必備的插件，安裝好了之后才可以把寫好的代碼在網頁中打開
  第三個是文件圖標的主題，便于區分各種類型的文件，看著方便，美觀

如果你是新手，就直接看VScode的教程

Vscode界面介紹

（主要分為5個區域，分別是活動欄，側邊欄，編輯欄，面板欄，狀態欄）

①：活動欄從上到下依次為，打開側邊欄，搜索，使用git，debug，使用插件
②：側邊欄，新建項目文件和文件夾
③：編輯欄，編寫代碼的區域
④：面板欄，從左到右依次為，問題，輸出，調試欄，終端（terminal），最重要的是terminal，用來輸入相關命令

VScode用戶設置

使用快捷鍵 Ctrl+Shift+P ，然后搜索setting

這里解析幾個常用配置項：

（1）editor.fontsize用來設置字體大小，可以設置editor.fontsize : 14;

（2）files.autoSave這個屬性是表示文件是否進行自動保存，推薦設置為onFocusChange——文件焦點變化時自動保存。

（3）editor.tabCompletion用來在出現推薦值時，按下Tab鍵是否自動填入最佳推薦值，推薦設置為true;

（4）editor.codeActionsOnSave中的source.organizeImports屬性，這個屬性能夠在保存時，自動調整 import 語句相關順序，能夠讓你的 import 語句按照字母順序進行排列，推薦設置為true,即"editor.codeActionsOnSave": { “source.organizeImports”: true }；

（5）editor.lineNumbers設置代碼行號,即editor.lineNumbers ：true；

然后文件–首選項–設置，打開用戶設置。VScode支持選擇配置，也支持編輯setting.json文件修改默認配置。個人更傾向于編寫json的方式進行配置，下面會附上我個人的配置代碼

設置了上面的選擇，轉化成json，就是下面的

{"files.associations": {"*.vue": "vue","*.wpy": "vue","*.wxml": "html","*.wxss": "css"},"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe","git.enableSmartCommit": true,"git.autofetch": true,"emmet.triggerExpansionOnTab": true,"emmet.showAbbreviationSuggestions": true,"emmet.showExpandedAbbreviation": "always","emmet.includeLanguages": {"vue-html": "html","vue": "html","wpy": "html"},//主題顏色 "git.confirmSync": false,"explorer.confirmDelete": false,"editor.fontSize": 14,"window.zoomLevel": 1,"editor.wordWrap": "on","editor.detectIndentation": false,// 重新設定tabsize"editor.tabSize": 2,//失去焦點后自動保存"files.autoSave": "onFocusChange",// #值設置為true時，每次保存的時候自動格式化；"editor.formatOnSave": false,//每120行就顯示一條線"editor.rulers": [],// Python解釋器"python.pythonPath": "F:\\anaconda\\python.exe","editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",// 這些文件將不會顯示在工作空間中"files.exclude": {"**/.classpath": true,"**/.project": true,"**/.settings": true,"**/.factorypath": true},// leetcode的設置"leetcode.hint.configWebviewMarkdown": false,"leetcode.workspaceFolder": "C:\\Users\\YIUYE\\.leetcode","workbench.settings.openDefaultSettings": true,// 沒有本事的用ui"workbench.settings.editor": "json",// #讓vue中的js按"prettier"格式進行格式化"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js-beautify-html": {// #vue組件中html代碼格式化樣式"wrap_attributes": "force-aligned", //也可以設置為“auto”，效果會不一樣"wrap_line_length": 200,"end_with_newline": false,"semi": false,"singleQuote": true},"prettier": {"semi": false,"singleQuote": true}} }

前端推薦插件

做前端開發的時候，我們需要打開瀏覽器進行預覽和調試頁面。這個插件就可以實現靜態、動態頁面的實時預覽，保存就能看見頁面更新，不需要手動去刷新。

在vscode安裝eslint插件和錯誤自動修復

還有vetur。Vue 開發生態必備插件（官方推薦），支持 Syntax Highlighting， Emmet 2.0，Snippet，Foramtting，IntelliSense，Linting 等

• Auto Close Tag，適用于 JSX、Vue、HTML，在打開標簽并且鍵入 </ 的時候，能自動補全要閉合的標簽；

• Auto Rename Tag，適用于 JSX、Vue、HTML，在修改標簽名時，能在你修改開始（結束）標簽的時候修改對應的結束（開始）標簽，幫你減少 50% 的擊鍵；

• Path Intellisense，文件路徑補全，在你用任何方式引入文件系統中的路徑時提供智能提示和自動完成；

• NPM Intellisense，NPM 依賴補全，在你引入任何 node_modules 里面的依賴包時提供智能提示和自動完成；

• IntelliSense for CSS class names，CSS 類名補全，會自動掃描整個項目里面的 CSS 類名并在你輸入類名時做智能提示；

• JavaScript Snippet Pack：js代碼片段（必備）

• markdownlint：markdown 語法檢查

• **GitLens **：Git神器，碼農必備。如果你不知道，那真是out了。

快捷鍵

格式調整

代碼行縮進 Ctrl+[ 、 Ctrl+]

Ctrl+C 、 Ctrl+V 復制或剪切當前行/當前選中內容

代碼格式化：Shift+Alt+F，或 Ctrl+Shift+P 后輸入 format code

上下移動一行：Alt+Up 或 Alt+Down

向上向下復制一行：Shift+Alt+Up 或 Shift+Alt+Down

在當前行下邊插入一行 Ctrl+Enter

在當前行上方插入一行 Ctrl+Shift+Enter

代碼展開/收起 ctrl + K + J /ctrl + K + o

光標相關

移動到行首：Home

移動到行尾：End

移動到文件結尾：Ctrl+End

移動到文件開頭：Ctrl+Home

移動到定義處：F12

定義處縮略圖：只看一眼而不跳轉過去 Alt+F12

移動到后半個括號：Ctrl+Shift+]

選擇從光標到行尾：Shift+End

選擇從行首到光標處：Shift+Home

刪除光標右側的所有字：Ctrl+Delete

擴展/縮小選取范圍：Shift+Alt+Left 和 Shift+Alt+Right

多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up

同時選中所有匹配：Ctrl+Shift+L

Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行，后面自定義快鍵鍵中，設置與 Ctrl+Shift+K 互換了)

回退上一個光標操作：Ctrl+U

重構代碼

找到所有的引用：Shift+F12

同時修改本文件中所有匹配的：Ctrl+F12

重命名：比如要修改一個方法名，可以選中后按 F2，輸入新的名字，回車，會發現所有的文件都修改了

跳轉到下一個 Error 或 Warning：當有多個錯誤時可以按 F8 逐個跳轉

查看 diff：在 explorer 里選擇文件右鍵 Set file to compare，然后需要對比的文件上右鍵選擇 Compare with file_name_you_chose

前端相關

shift+Alt+F 代碼格式化（推薦安裝beautify插件后使用）

！+ enter 生成html骨架

直接寫標簽名（或加+ # / ./ []）再加enter可以自動補全

還有很多自己慢慢看

當然如果需要改快捷鍵，也是很簡單的，比如vscode的復制下一行的快捷鍵是ALT+SHIFT+下箭頭

我還是喜歡用Ctrl+D

如果本文對你有幫助，大家可以點贊轉發一波，有錯誤大家可以評論指出，感謝！

大家繼續加油，未來可期！Runsen的征途是星辰大海！

總結

以上是生活随笔為你收集整理的三十二、VsCode前端的开发工具介绍和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。