前言
編輯器之間的競爭一直也十分的激烈捍岳，用過Webstom富寿，Hbuilder，之前sublime也被我折騰的寫代碼十分舒服锣夹，然而當(dāng)出現(xiàn)了幾乎所有使用過的人都發(fā)出好評的VScode的時候必然還是想去試試页徐，用完幾個月之后，著實真心感覺到了微軟這波誠意也是到位了银萍，"真的舒服"是我唯一能表達(dá)的感受变勇，所以就從個人的角度出發(fā)對vscode的使用做一個小結(jié)，本文類似一個記錄板，快捷鍵和代碼塊簡寫確實用熟練了能提高我們寫代碼的速度搀绣，所以本文會從這些可以以記得東西出發(fā)飞袋，到我所使用的插件的推薦，再到代碼塊的簡寫記錄來表達(dá)我對這款編輯器的好評链患，也當(dāng)做一個不熟練的筆記本吧巧鸭。
常用快捷鍵
基礎(chǔ)的到處使用類似于ctr+c是復(fù)制這種“客套話”就不說了....以下快捷鍵組合都是以MAC為例，不過帶cmd鍵的你只要換成ctr在Win上也都是好使的麻捻。當(dāng)然這些都是默認(rèn)的快捷鍵纲仍，你自己改掉了一些快捷鍵不能說我賴皮。
常用cmd+shift+?系列
| 快捷鍵 | 功能 |
|---|---|
| cmd+shift+D | 打開Debugger |
| cmd+shift+K | 刪除光標(biāo)所在的一整行 |
| cmd+shift+L | 選擇當(dāng)前文件中所有你當(dāng)前選中的詞匯 |
| cmd+shift+F | 打開全局搜索 |
| cmd+shift+M | 打開你的問題面板 |
| cmd+shift+H | 對當(dāng)前文件的查詢替換 |
| cmd+shift+S | 文件另存為 |
| cmd+shift+T | 打開最近關(guān)閉的那個文件 |
| cmd+shift+X | 打開安裝插件的入口 |
| cmd+shift+V | 預(yù)覽MarkDown |
| cmd+shift+空格 | 參數(shù)提示 |
| cmd+shift+\ | 光標(biāo)跳轉(zhuǎn)到花括號閉合處 |
常用的cmd+?系列
| 快捷鍵 | 功能 |
|---|---|
| cmd+B | 打開或者關(guān)閉側(cè)邊欄 |
| cmd+W | 關(guān)閉當(dāng)前窗口 |
| cmd+P | 打開最近關(guān)閉的文件 |
| cmd+]/[ | 左右控制行縮進(jìn) |
| cmd+/ | 注釋一行或取消當(dāng)前行的注釋 |
| cmd+F | 查詢在當(dāng)前文件 |
| cmd+, | 打開用戶設(shè)置 |
| cmd+N | 新建一個文件 |
| cmd+O | 打開一個文件 |
| ctr+` | 打開集成的終端 |
常用的cmd+K ?系列
在Vscode中的cmd+k我覺得像是vim中的退出到命令執(zhí)行模式,他會等待你繼續(xù)按下下面的命令贸毕，你也可以認(rèn)為一系列的cmd+k系的都是組合件
所以接下來就是
cmd+k系列的快捷鍵了
| 快捷鍵 | 功能 |
|---|---|
| cmd+k cmd+s | 打開快捷鍵設(shè)置(其實每個人的操作習(xí)慣不同郑叠，在此你可以自定義你的鍵組合) |
| cmd+k U | 關(guān)閉工作區(qū)中沒有更改的編輯窗口 |
| cmd+k Z | 進(jìn)入zen模式，就是刪除所有其他讓人分心的元素明棍，安心寫代碼的模式 |
| cmd+k R | 在mac中是在文件系統(tǒng)（Finder）中顯示你正在編輯的文件 |
| cmd+k P | 復(fù)制當(dāng)前文件的絕對路徑 |
其余的我不常用的就不列舉了乡革，可以在快件鍵設(shè)置中查找或者自定義你的指法:)
插件推薦
插件推薦應(yīng)該說明情況，由于本人的主要代碼是Javascript（Node摊腋，ES6沸版，ES5）和Python，主要框架為Vue歌豺，Express,也開始漸漸的直接在在Vscode中寫Markdown了（之前使用MacDown其實也很舒服）推穷。所以插件在于慢慢發(fā)現(xiàn)是和合適自己需求的，自己覺得舒服的类咧。那么作為我的推薦以及我自己所使用的也會根據(jù)我自己的場景進(jìn)行馒铃。
-
JavaScript
- JavaScript (ES6) code snippetsES6常用語法生成代碼塊
- JavaScript Snippet PackES5常用操作DOM的語法代碼塊
-
Node
- Node.js Modules IntellisenseNode引入模塊的時候智能提示
- Npm Intellisense功能與上一個插件類似，也是在引入模塊的時候十分的智能
- Import Cost引入模塊的時候后面能顯示模塊的大小
- expresssnippetExpress常用代碼塊
- webpack生成一個簡單的webpack.config.js的大體結(jié)構(gòu)（支持ES6）供繼續(xù)改造
-
Python
- python 6個million的下載量...
-
Vue
- Vetur這個應(yīng)該是開發(fā)vue必裝的吧痕惋，語法高亮区宇，功能強(qiáng)大。
- Vue 2 Snippets提供一些常用模板代碼塊
- vscode-element-helper對Element-UI提供全方位的支持
-
其他小工具
- Auto Rename Tag關(guān)閉html標(biāo)簽值戳，改動前面的標(biāo)簽名后面閉合的也會一起改议谷。
- Eslint規(guī)范代碼
- Beautify非常強(qiáng)大的格式化代碼插件
- open-in-browser右鍵編輯中的html可以選擇直接在瀏覽器中打開
-
MarkDown
- Markdown Preview Enhanced提供非常舒服的預(yù)覽，和其他比較全面的支持
- Markdown all in One為markdown語法提供常用快捷鍵
-
主題
- One Dark Pro偏愛暗色系
- Atom One Dark Theme感覺跟上面的差不多
- vscode-icons文件圖標(biāo)
生成代碼塊插件的縮寫記錄
- JavaScript (ES6) code snippets插件提供
| 簡寫 | 生成 |
|---|---|
imp |
會生成import moduleName from 'modulename'
|
imn |
直接引入不加模塊名import module
|
imd |
導(dǎo)入模塊的一部分import { } from 'module';
|
ime |
導(dǎo)入模塊的所有內(nèi)容并且進(jìn)行重命名import * as alias from 'module';
|
ima |
導(dǎo)入部分并重命名import { originalName as alias } from 'module'
|
enf |
使用export導(dǎo)出一個方法export const functionName = (params) => {};
|
edf |
使用export default 到處一個默認(rèn)方法export default (params) => {};
|
ecl |
使用export defauly導(dǎo)出一個默認(rèn)類export default class className {};
|
ece |
使用export defauly導(dǎo)出一個默認(rèn)繼承基類的類export default class className extends baseclassName {}
|
con |
類中的構(gòu)造函數(shù)constructor(params) {}
|
met |
類中的方法methodName(params) {}
|
pge |
類屬性的get方法get propertyName() {return this.;}
|
pse |
類屬性中的set方法set propertyName(value) {;}
|
prom |
返回一個promise對象return new Promise((resolve, reject) => {});
|
anfn |
生成一個標(biāo)準(zhǔn)箭頭函數(shù)(params) => {}
|
dar |
數(shù)組解構(gòu)const [propertyName] = arrayToDestruct;
|
clg |
console.log |
- JavaScript Snippet Pack插件提供
| 簡寫 | 生成 |
|---|---|
ae |
增添監(jiān)聽器document.addEventListener('load', function (e) {});
|
cel |
創(chuàng)建一個dom對象document.createElement(elem);
|
gi |
document.getElementById('id'); |
gc |
document.getElementsByClassName('class'); |
gt |
document.getElementsByTagName('tag'); |
ih |
document.innerHTML = 'elem'; |
afn |
function聲明的匿名函數(shù)堕虹，正好補(bǔ)充了上面插件的anfn箭頭函數(shù) |
fn |
具名函數(shù)function methodName (arguments) {}
|
jp |
JSON.parse(obj); |
js |
JSON.stringify(obj); |
iife |
立即執(zhí)行函數(shù) |
- Vue 2 snippets 插件提供
好就在vue是單獨一套的語法結(jié)構(gòu)所以在使用vue的時候基本上你敲入vue三個字母的時候你想要的就已經(jīng)看到了卧晓，不用特殊的記憶
