vscode 快速入門
本篇主要講解 vscode 使用中的一些經驗：
- 配置 vue 開發環境 - Vetur+ESLint+Prettier
- 代碼片段的使用
- 常用插件
- 如何完全卸載 vscode
- 通過命令行啟動 vscode
- 編輯器的快捷鍵
注：筆者使用的 vscode 是 1.58.0，windows。由於版本的不同，而且 vscode 的配置也會改變，所以筆者盡量通過界面去操作，而不是直接修改 settings.json。
安裝
官網下載，一路 next 即可。
Tip: 如果官網下載很慢或不能下載，可以去”騰訊軟件中心“搜索 vscode 進行下載。
卸載
主要提一下如何完全卸載 vscode。
首先在控制面板卸載 vscode，再次重裝，發現插件都還在。
再次通過控制面板卸載，並刪除 .vscode 文件夾，但配置還在。
Tip: 我的 .vscode 目錄是 C:\Users\xxx\.vscode，里面有 argv.json、extensions。
再次卸載，然后刪除 C:\Users\xxx\AppData\Roaming\Code，重裝后，終於回到最初狀態。
啟動
這里主要講一下通過命令行啟動 vscode。
首先在任意目錄中查看版本，如果不能識別 code 則需要配置環境變量：
> code -v
1.58.0
940b5f4bb5fa47866a54529ed759d95d09ee80be
x64
啟動 vscode：
// 在任意目錄中輸入 code 即可啟動 vscode
D:\> code
// 使用 vscode 打開項目或目錄（Users）
D:\> code Users
漢化
vscode 打開后界面是英文，可以將其漢化，操作十分簡單。
點擊 extensions（擴展）- 筆者的版本在左側從上到下第 5 個圖標，在輸入框中輸入要下載的插件，這里輸入 chinese，選擇中文（簡體），點擊安裝，重啟即可。
Tip: 下文功能介紹的名稱都是漢化后的，比如點擊擴展，而不是點擊 extensions。
編輯器界面介紹
界面左側從上到下有：
- 資源管理器
- 搜索
- 源代碼管理
- 運行和調試
- 擴展
- 賬號
- 管理
界面頂部從左到右有：
- 文件
- 編輯
- 選擇
- 查看
- 轉到
- 運行
- 終端
- 幫助
設置
設置，能在這里對 vscode 做設置，功能很強大。
下面我稍微介紹一下。
首先通過管理 -> 設置，即可打開設置。通過 ctrl + , 也可快速打開。
Tip：vscode 中有關插件比較復雜的部分就是配置，相關部分就是這里。
注：修改配置，有時需要重啟 vscode 才會生效
format on save
我們編寫 javascript 時，希望保存時能格式化一下代碼，比如去除下面的連續空格：
// 等號右側太多空格
let a = "3" ;
進入設置，在”搜索設置“的輸入框中輸入format on save，在查詢出來的內容中，把”Format On Save“勾選上。
Tip：在設置界面的右上角，有個圖標，鼠標移上去會顯示”打開設置（json）“，點擊該圖標，則會打開 setting.json，最開始是一個空對象，當我們勾選”Format On Save“，該 json 也會同步，就像這樣：
{
"editor.formatOnSave": true
}
而當我們將 ”editor.formatOnSave“ 屬性刪除，則也會同步到界面。
回到 js 文件，ctrl + s保存，則會被格式化，就像這樣：
let a = "3";
font size
想將文字調大，看的清晰一些。除了在”搜索設置“中輸入”font size“快速查找出相應配置，還可以通過左側導航（文本編輯器 -> 字體）找到“Editor: Font Size”，將 14 改為其他字號即可。
其他配置
剩余配置請根據需要自行研究和配置，提供的完整功有：
- 常用設置
- 文本編輯器
- 工作台
- 窗口
- 功能
- 應用程序
- 擴展。從中我們知道 vscode 自帶的有 markdown、git、emmet等，后續我們安裝的 eslint、vetur 也會出現在這里。
終端
筆者安裝完 vscode，在 vscode 的終端中發現集成了兩種：powershell 和 cmd。
注：筆者曾在 powershell 中全局安裝淘寶鏡像，之后運行 cnpm -v 來檢測 cnpm 是否安裝成功，結果報錯，后來換一個終端（gitbash）再次檢測，結果顯示 cnpm 安裝成功。
// 全局安裝淘寶鏡像
> npm i -g cnpm --registry=https://registry.npm.taobao.org
// 檢測 cnpm 是否安裝成功
> cnpm -v
無法加載文件 ....\AppData\Roaming\npm\cnpm.ps1，因為在此系統中禁止執行腳本。有關詳細信息，請參閱 "get-help about_signing"。
所在位置 行:1 字符: 5
+ cnpm <<<< -v
+ CategoryInfo : NotSpecified: (:) [], PSSecurityException
+ FullyQualifiedErrorId : RuntimeException
代碼片段
比如我經常需要輸入一些重復的代碼，就可以給其創建一個代碼片段，然后起個名字，當我輸入這個名字，vscode 就會有相應的提示，只需要選中即可。
我們來體驗一下。
選擇“系統 -> 用戶代碼片段” 創建一個全局代碼片段，會生成一份文件：
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
這里有一個例子，將“Example”下面的代碼放開，就創建了一個代碼片段。
然后在 js（scope 指定該片段的使用范圍） 文件中輸入 log（即 prefix 指定的字符），就會出現提示，選中我們的代碼片段即可：
// 在 js 文件中輸入：
log
// 選中代碼片段，生成如下代碼：
console.log('');
片段分析：
- Print to console，代碼片段名稱
- prefix，插件前綴
- body，插件內容可以是字符串，也可以為數組，若為數組每個元素都做為單獨的一行插入。
- description，插件描述
示例
每個片段都並具有范圍、前綴、正文和描述：
- 范圍通過逗號分隔，如果范圍未定義則用於所有語言。
- 前綴，用於觸發代碼片段。
- $0 用於光標最終位置
- $1、$2 等用於 tab 停止的地方
新建如下幾個代碼片段供參考：
{
"cd": {
"prefix": "cd",
"body": [
"```javascript",
"$1",
"```",
"",
"$0"
],
"description": "markdown code"
},
"function": {
"prefix": "fun 新建方法",
"body": "function ${1:name}() {${2}}",
"description": "方法"
},
"import": {
"prefix": "imp 導入資源",
"body": "import {$1} from '$2';",
"description": "導入"
},
"vue": {
"scope": "vue",
"prefix": "vue 單頁面組件",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" data() {",
" return {\n",
" };",
" },",
" created() {\n",
" },",
" mounted() {\n",
" },",
" methods: {\n",
" }",
"};",
"</script>\n",
"<style scoped lang=\"${1:less}\">\n",
"</style>\n",
],
},
"module desc": {
"prefix": "module desc",
"body": [
"/**",
"* @module ${TM_FILENAME_BASE}",
"* @author: ph",
"* @description: $1",
"* @since ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
"*/",
""
],
"description": "模塊描述"
}
}
markdown 中使用
自定義的 snippet 在 markdown 文件（.md）中不會有提示。
可以通過打開 markdown 的 quickSuggestions 選項開解決此問題。通過 ctrl + p 打開 VS 的 settings.json，配置如下：
{
"[markdown]":{
"editor.quickSuggestions": true
}
}
編輯器的快捷鍵
移動到行首 - fn + home
移動到行尾 - fn + end
Tip: fn 是功能鍵，比如比如 f9 上是一個靜音的按鈕，按 fn + f9 就是靜音
移動到文檔開頭 - fn + ctrl + home
移動到文檔結尾 - fn + ctrl + end
復制光標行 - alt + shift + 上下鍵頭
Tip: 上箭頭，光標不會動
單行注釋 - ctrl + /
多行注釋 - alt + shift + a
刪除代碼 - ctrl + shift + k
代碼格式化 - alt + shift + f
批量操作
多個光標 - alt
連續光標 - alt + shift + i
例如需要將如下代碼的 a 變量改為 a1，可以通過按下 alt 鍵點擊鼠標左側，就會出現多個光標，然后輸入 1 即可：
function a() {
const a = 3;
const b = 4;
}
function b() {
const a = 3;
const b = 4;
}
例如我要將 b() 方法中兩行代碼的分號刪除，可以選中該兩行，在按下alt + shift + i，就會在這兩行末尾各產生一個光標，最后按 delete 刪除即可。
鍵盤快捷參考
無需去其他地方，直接看 管理 -> 鍵盤快捷方式
插件簡單介紹
通過 vscode 擴展功能，能非常方便搜索相關插件，並進行安裝。以下是筆者覺得好用的插件，可以根據需要自行安裝。
Tip: 以下插件，筆者根據自己偏好標注為：高、中、低
漢化 [高]
Chinese (Simplified) Language
項目管理 [高]
Project Manager，方便 vscode 在多個項目中來回切換。
安裝此插件，會在vscode 左側增加一個文件夾的圖標，點擊該圖標，可以保存項目，后續需要切換哪個項目，點擊該項目就好。
着色匹配括號 [高]
Bracket Pair Colorizer 2，用於着色匹配括號的可定制擴展
此插件可以通過不同顏色來匹配括號
a.map(() => (b() && c.join(d(), d())))
突出顯示匹配標簽 [高]
Highlight Matching Tag，此擴展突出顯示匹配的開始或結束標記，盡管 VSCode 有一些基本的標簽匹配，但這只是 - 基本的。此擴展將嘗試在任何地方匹配標簽：從標簽屬性、字符串內部、任何文件，同時還提供廣泛的樣式選項來自定義標簽的突出顯示方式。
es6 片段 [高]
VS Code JavaScript (ES6) snippets，ES6 語法中的 JavaScript 代碼片段
fin 生成：
for (const item in object) {
}
con 生成：
constructor(params) {
}
met 生成：
methodName(params) {
}
GitLens [中]
GitLens — Git supercharged
此插件增強了 vscode 中內置的 Git 功能。最典型的是每一行代碼旁邊都有日志，可以清楚的知道是誰寫的。
安裝成功后，左側不會新增 GitLens 圖標，而是會在“源代碼管理”中增加一些tab：
- COMMITS 查看每次提交的具體內容
- FILE HISTORY，可以查看文件的提交記錄、
- 還有 BRANCHES、REMOTES、STASHES、TagS
自動重命名標簽 [中]
Auto Rename Tag
比如在 html 中需要將 p 改為 span，則要改兩處：
// <span> 和 </span>
<p>hello</p>
安裝此插件后，只需要改一處：
// <span>
<p>hello</p>
而且也支持批量操作。比如我需要將下面兩個標簽都改為 span：
<p>hello</p>
<div>hello</div>
可以通過 alt 選中 p 和 div，同時編輯即可。
UI 框架 [中]
根據需要自行安裝。
element-ui-helper，用於 Element-UI
美化 vscode 的圖標 [中]
vscode-icons
安裝完成，項目的圖標更好看，用於增加顏值
Tip: 更多類似插件，在擴展中輸出“icons”自行選擇安裝
注釋 [中]
Document This，在 TypeScript 和 JavaScript 文件中自動生成詳細的 JSDoc 注釋。
例如給函數添加注釋，在 sum() 的上一行（行{1}），按兩次ctrl + alt + d：
// {1}
function sum(a, b) {
return a + b;
}
/**
*
*
* @param {*} a
* @param {*} b
* @return {*}
*/
function sum(a, b) {
return a + b;
}
Vue 片段 [中]
Vue 3 Snippets
此插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 對應的代碼片段。你不需要記住什么 snippets，就像往常一樣在 vscode 里寫代碼就好了。比如你可以鍵入 vcom 然后按上下鍵選中 VueConfigOptionMergeStrategies 再按 Enter 鍵，就輸入了 Vue.config.optionMergeStrategies 了。再比如在 .vue 文件中輸入 vueinit 就會輸出如下代碼：
<template lang="">
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>
javascript 控制台工具 [中]
vscode-js-console-utils，輕松插入和刪除 console.log 語句
用法
有選擇：
- 突出顯示一個變量（或任何文本）
- 按 Cmd+Shift+L
- 輸出（在新行上）將是： console.log('variable: ', variable);
無選擇：
- 按 Cmd+Shift+L
- 輸出（在同一行）將是： console.log();
刪除 console.logs：
- 按 Cmd+Shift+D
- 這將刪除當前文檔中的所有 console.log 語句
emmet [中]
VS Code 內置集成，無需在安裝。
Tip: vscode 也在升級，越來越好用。
Prettier [低]
Prettier 是一個固執的代碼格式化程序。 它通過解析您的代碼並使用自己的規則重新打印它來強制執行一致的樣式，這些規則將最大行長度考慮在內，並在必要時包裝代碼。
Beautify [低]
在 Visual Studio Code 中美化javascript、JSON、CSS、Sass和HTML。
VS Code 內部使用了 js-beautify，但是它缺乏修改您希望使用的樣式的能力。這種擴展使運行JS-美化在VS代碼，及接受任何.jsbeautifyrc在打開的文件的路徑樹文件來加載你的代碼樣式。
右鍵運行代碼 [低]
Code Runner - 運行多種語言的代碼片段或代碼文件
Tip：運行 javascript 需要安裝 node
未安裝此插件前，需要運行某 js 文件，需要通過 node a.js，安裝此插件后，則通過右鍵點擊 Run Code 即可：
// a.js
console.log(1);
// 未安裝前
> node a.js
1
// 安裝此插件后，進入 a.js，右鍵，點擊 Run Code
[Running] node "test-vscode\a.js"
1
[Done] exited with code=0 in 0.116 seconds
Open in Browser [低]
Open in Browser - 右鍵將 html 文件在瀏覽器中打開。
Tip: vscode 中，該插件描述的很清楚
在編輯器中顯示導入包的大小 [低]
import cost
import Vue from 'vue'
// 變成
import Vue from 'vue' 64k (gzipped: 22.9K)
實時服務器 [低]
live server，為靜態和動態頁面啟動具有實時重新加載功能的開發本地服務器
安裝完畢，在一個 html 頁面中，右鍵點擊 “open with live server” 即可以本地服務的方式打開該頁面
主題 [低]
Better Solarized - 發布者 ginfuru
安裝完成，提供三種顏色主題：深色、深色斜體、淺色。可以在設置中，通過“theme”快速找到“Color Theme”來切換主題。
Tip：更多主題，可以直接在擴展中輸入“theme”自行安裝即可
智能提示類 [低]
Visual Studio IntelliCode
此擴展為 Visual Studio Code 中的 Python、TypeScript/JavaScript 和 Java 開發人員提供 AI 輔助開發功能，提供基於理解代碼上下文並結合機器學習的見解
配置 vue 開發環境 - Vetur+ESLint+Prettier
Tip：由於每個項目的配置都不相同，比如 eslint，哪怕都是用 npx eslint --init 來生成 .eslintrc.js，里面的內容也不盡相同，所以筆者就不介紹完整的方案，僅拋磚引玉。
首先我希望保存的時候能自動格式化：
// js 文件
let a = "3" ; // 等號右側太多空格
ctrl + s，自動格式化為：
let a = "3";
可以修改 settings.json（參考上文的“format on save”小節）:
{
"editor.formatOnSave": true
}
vetur
目前打開 .vue 文件，就像用記事本打開一樣，沒有高亮，沒有提示，emmet 在 .vue 中也無法使用。可以使用 vscode 安裝插件 vetur（VS Code 的 Vue 工具）。
安裝完成，.vue 文件就會：
- 高亮
- 支持 emmet
- 代碼提示，比如寫 p，就會彈出 propsData、props等供你選擇
- 代碼片段，例如輸入“vue”就會生成對應的片段
- 右鍵，會有“格式化文檔”選項
格式化
Vetur 支持格式化嵌入式html/pug/css/scss/less/postcss/stylus/js/ts.
Vetur 只有“整個文檔格式化程序”，不能格式化任意范圍。
根據 vetur 官網，我們知道可以在 VS Code 配置中選擇每種語言的默認格式化程序，當前默認值如下：
{
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.pug": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter"
}
什么意思？
進入“設置->擴展->Vetur”，在 Vetur 的配置界面，能發現“Vetur › Format › Default Formatter: JS”選中的就是 prettier，當我們選擇 “none”，對應的 settings.json 就會生成：
{
"vetur.format.defaultFormatter.js": "none"
}
prettier 也是一個插件，用於格式化代碼，讓代碼更好看，而 vetur 默認集成了該插件。
eslint
我希望保存時自動修復，比如使用將雙引號改為單引號，並去除分號。而現在保存只是格式化，例如：
let a = "b" ;
// ctrl + s
let a = "b";
在 prettier 官網，與 Linter 集成章節中提到：Linter 通常不僅包含代碼質量規則，還包含樣式規則。大多數風格規則在使用 Prettier 時是不必要的，但更糟糕的是——它們可能與 Prettier 沖突！使用 Prettier 解決代碼格式問題，使用 linters 解決代碼質量問題。
首先通過 vscode 安裝插件 eslint。
Tip：該插件用於將 ESLint 集成到 VS Code 中，並使用安裝在打開的工作區文件夾中的 ESLint 庫。在新文件夾上，可能還需要創建一個 .eslintrc 配置文件。
接下來我們安裝 eslint 包，以及通過命令生成 eslintrc 配置文件。
// 生成 package.json
> npm init -y
// 安裝依賴包
> npm i -D eslint
// 通過 eslint 生成配置文件。與 vue-cli 類似
> npx eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · none
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · 4
√ What quotes do you use for strings? · single
√ What line endings do you use? · windows
√ Do you require semicolons? · No / Yes
Successfully created .eslintrc.js file in ...
生成的配置文件：
// .eslintrc.js
module.exports = {
'env': {
'browser': true,
'es2021': true
},
'extends': 'eslint:recommended',
'parserOptions': {
'ecmaVersion': 12
},
'rules': {
'indent': [
'error',
4
],
'linebreak-style': [
'error',
'windows'
],
// 使用單引號
'quotes': [
'error',
'single'
],
// 不要分號
'semi': [
'error',
'never'
]
}
}
接着，將鼠標移到 let a = "b"; 上，就會看到 eslint 的提示（字符串必須使用單引號）
但在 .vue 文件中，卻沒有：
<script>
export default {
...
};
// 同樣的代碼，確沒有 eslint 的提示
let a = "b";
</script>
重啟 vscode 也無效。於是決定用 eslint 重新生成一份配置，主要變動是選用 vue。
// 無需刪除配置，直接運行
> npx eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · none
// 框架使用 vue
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · 4
√ What quotes do you use for strings? · single
√ What line endings do you use? · windows
√ Do you require semicolons? · No / Yes
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest
Installing eslint-plugin-vue@latest
added 6 packages, and audited 122 packages in 42s
16 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Successfully created .eslintrc.js file in ...
配置文件如下：
// .eslintrc.js
// env，rules，parserOptions都沒變
module.exports = {
...
'extends': [
'eslint:recommended',
'plugin:vue/essential'
],
'plugins': [
'vue'
],
}
重啟 vscode，你會發現 .vue 文件也有 eslint 提示。
我希望保存的時候能讓 eslint 修復代碼，比如去除分號，將雙引號改為單引號。
修改 vscode 的設置：
// settings.json
{
"editor.codeActionsOnSave": {
// 包括 ESLint 在內的所有提供程序打開自動修復
"source.fixAll": true
}
}
Tip：有的是可能寫為 "source.fixAll.eslint": true，即只為 ESLint 開啟。更多信息可以在 vscode 官網 的 “extensions” 中搜索 eslint。
在 js 中保存（ctrl + s），生效：
let a = "b";
// 保存 ctrl + s
let a = 'b'
但在 .vue 中卻無效：
<script>
let a = "b";
</script>
// 保存，代碼抖動，但還是沒變
<script>
let a = "b";
</script>
在講 vetur 的時候提到默認值 "vetur.format.defaultFormatter.js": "prettier",，也就是說 vue 中 js 會使用 prettier 格式化代碼，而 eslint 修復 js 也算是格式化，兩者都對 js 進行格式化，也就存在沖突。
很多文章提到將 prettier 改為 vscode-typescript，筆者干脆改為 none:
{
"vetur.format.defaultFormatter.js": "none"
}
再次保存，.vue 中的 eslint 也生效了：
<script>
- let a = "b";
+ let a = 'b'
</script>
Tip: 分號、單引號也可以通過 prettier 來格式化。
editorconfig
很多項目有 .editorconfig 文件，例如開源項目 vue-element-admin 的 .editorconfig 的內容是：
# https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
EditorConfig 有助於為跨各種編輯器和 IDE 處理同一項目的多個開發人員維護一致的編碼風格。
EditorConfig官網提到，很多編輯器直接支持，而 vscode 需要安裝插件。
下面我們來玩一下：
目前我們在 js 中，一個 tab 就是 4 個空格（我們也可以通過 vscode 設置為其他數字）。
在項目根目錄新建文件 .editorconfig，內容就是 vue-element-admin 中的。
vscode 安裝插件 EditorConfig for VS Code。
再次輸入 tab，就從 4 個變為 2 個空格。
空格的個數是通過 indent_size 來設置。
另外說一下 root = true，EditorConfig 插件會在項目中以及每一個父目錄中找 .editorconfig，直到根目錄，或者配置文件中有 root = true才停止。