vscode鍵盤俠養成記

引子

先說明一下，此鍵盤俠可非彼鍵盤俠（免的捱揍）。那這個鍵盤俠是什麼呢？這個鍵盤俠是指咱們能夠用鍵盤來完成咱們平常的開發任務。不用鼠標哦，是否是很酷。固然這須要咱們記住大量的快捷鍵，還須要藉助插件來幫助咱們，這一刻意練習的過程，我稱它爲鍵盤俠養成記。html

學習方式

此次我想換個方式來說解，我知道，要是光禿禿的放幾個功能的快捷鍵使用方式會很枯燥，並且一點也不新穎，尤爲是你看完了就完了，忘的一乾二淨。因此此次我採用實戰的方式來說解，看看咱們在實際作一個項目的時候都須要用到哪些快捷鍵。以實際的應用點來驅動咱們學習。學以至用，用不到的咱們不學。若是你跟着文章敲一遍的話，我相信這些快捷鍵你會記得很牢固。前端

若是你想直接看對應的快捷鍵的話，能夠點擊目錄上的快捷鍵集合，查看全部的快捷鍵vue

壞境

說了那麼多，還沒介紹咱們使用的開發壞境git

嗯，我是一個前端，我選擇 vscodegithub

嗯，我是一個前端，我選擇 macshell

嗯，我感受使用 vim 很酷npm

因此這篇文章主要的壞境是 mac + vscode + vimjson

固然了，還須要一些其餘的插件來助威。vim

File Utils
JavaScript (ES6) code snippets
ES7 React/Redux/GraphQL/React-Native snippets

固然了，其實 vocode 提供了不少快捷鍵徹底是能夠代替 vim 下常常用到的功能，在末尾我會給出對應的快捷鍵。api

FizzBuzz

先簡單的介紹一下今天得小項目吧

寫一個程序打印 1 到 100 這些數字。可是遇到數字爲 3 的倍數的時候，打印「Fizz」替代數字，5 的倍數用「Buzz」代替，既是 3 的倍數又是 5 的倍數打印「FizzBuzz」

需求很容易理解是吧

不過，這裏我用 TDD 的方式來實現，是否是等不及了那咱們開始吧

新建項目

mkdir fizzbuzz && code fizzbuzz
複製代碼

code 命令能夠用 vscode 打開這個文件夾

安裝 code

打開 vscode
shift + command + p -> 打開命令面板
輸入 path

初始化項目

首先咱們須要先用 npm 來初始化咱們的項目，而後安裝 jest 測試框架來幫助咱們作 TDD

control + ` -> 打開 vscode 內置的終端
建立 package.json
安裝 jest
安裝 @types/jest （在寫代碼的時候會有 api 提示）

npm init -y && npm i jest && npm i @types/jest -D
複製代碼

建立文件

接着咱們須要建立一個 index.js 文件做爲咱們的入口文件。怎麼用快捷鍵來建立呢？首先咱們須要藉助 File Utils 這個插件小哥。

它可讓咱們用快捷鍵作一系列的操做：建立、移動、更名、刪除文件或者文件夾

安裝 File Utils （安裝插件不在贅述）
打開命令面板
輸入 File: New File
輸入要建立的文件名

建立文件夾

咱們還須要建立 test 文件夾來存放咱們的測試文件

打開命令面板
輸入 File: New Folder
輸入要建立的文件夾名

在指定的文件夾下建立文件

接着咱們須要在 test 文件夾下建立 index.test.js 文件

這個操做稍微有點麻煩，我先拆分一下操做步驟

command + shift + E -> 須要聚焦到資源管理器區域（左側的文件區）
聚焦到指定的文件夾下（可使用上下鍵來選擇聚焦的指定文件）
建立文件 index.test.js 文件（具體能夠看建立文件，這裏不在累贅）

這裏要注意聚焦到資源管理器快捷鍵頗有可能和其餘的軟件衝突！！當你按完快捷鍵後發現無論用的話千萬要記得檢查快捷鍵衝突

跳轉到指定文件

接着咱們要打開 index.test.js 文件

command + p -> 轉至文件
輸入文件名

生成測試代碼塊

首先咱們在 index.test.js 文件內先寫一個測試。這裏咱們要藉助 ES7 React/Redux/GraphQL/React-Native 插件小哥來快速生成經常使用的測試代碼塊

安裝 ES7 React/Redux/GraphQL/React-Native

生成 desc 代碼塊

輸入 desc

生成 test 代碼塊

輸入 test

打開第二個編輯區

這時候我須要一邊寫測試一邊寫邏輯，那麼我不想來回切換文件呀怎麼辦？在打開一個編輯區就好啦

command + \ -> 新打開一個編輯區（這時候聚焦在新的編輯區上）
選擇打開指定的文件

選擇不一樣的編輯區

當我寫測試的時候須要切換到編輯區1，當我寫邏輯的時候須要切換到編輯區2

command + 1 -> 切換到編輯區1
command + 2 -> 切換到編輯區2

關閉編輯區

那怎麼關閉某個編輯區呢？

聚焦到要關閉的編輯區
command + k + w -> 關閉全部的文件

關閉全部的文件後，vscode 會自動關閉當前的編輯區

快速生成代碼塊

爲了能方便咱們快速生成平常開發常用的代碼塊，咱們請到了 JavaScript (ES6) code snippets 插件老哥

安裝 JavaScript (ES6) code snippets

咱們能夠經過這個插件找到不少生成代碼塊的快捷鍵

小夥伴們能夠記錄一下平常開發中常用到的。

下面我將演示在當前項目中用到的幾個快捷生成代碼塊的方式

導入

接着我要在 index.test.js 文件內導入 index.js 啦

這裏使用的 ESModule

imp 快速生成導入的代碼塊

導出

而後我須要在 index.js 文件內默認導出一個函數

edf 快速生成默認導出函數的代碼塊

編碼

剩下的內容基本上是關於 vim 的使用了。這部分我會經過錄制視頻的方式來呈現，用文字來表述太麻煩了！！！ vscode鍵盤俠養成記 - fizzbuzz

先挖個坑啥時候填就說不定了哈哈哈哈哈 :)逃
已經填上啦能夠點擊視頻跳轉到 b站觀看

總結

咱們以用驅學，以實戰項目來學習對應的快捷鍵。而且咱們作每一件事都是有明確目標的。好比我想經過快捷鍵來建立文件，因此我找到了 File Utils 插件、在好比我想快速生成常用到的代碼塊，因此我找到了 JavaScript (ES6) code snippets，咱們藉助插件來完成咱們想要的功能，甚至你也能夠開發出你本身的插件。這樣咱們會慢慢造成一套體系，而且隨着時間會愈來愈完善，經過刻意練習，每一個人均可以成爲一名合格的鍵盤俠。

快捷鍵集合

在終端建立一個文件夾

mkdir fizzbuzz
複製代碼

以 vscode 的方式打開文件夾

code fizzbuzz
複製代碼

打開 vscode 內的終端

control + `
複製代碼

打開命令面板

shift + command + p
複製代碼

建立文件

須要安裝 File Utils

// 步驟
1. shift + command + p
2. file: new file
複製代碼

聚焦到資源管理器

command + shift + E
複製代碼

在資源管理器區域聚焦指定的文件

使用上下鍵選擇聚焦的文件或文件夾使用左右鍵打開或關閉文件夾或者進入文件

vim 模式：

使用 jk 同上下鍵

使用 l 同左右鍵

跳轉到指定文件

command + P
複製代碼

打開新的編輯區

command + \
複製代碼

切換不一樣的編輯區

command + 1

command + 2
複製代碼

關閉聚焦的編輯區

command + k + w
複製代碼

參考資料

這是咱們團隊的開源項目 element3
一個支持 vue3 的前端組件庫