語(yǔ)言包

中文包: Chinese (Simplified) Language Pack for Visual Studio Code

• Ctrl+Shift+P 打開(kāi)命令面板，之后輸入 "config" 篩選可用命令列表，最后選擇配置語(yǔ)言命令勋陪。

  
  

外觀設(shè)置

主題: Solarized Dark

• VSCode 已經(jīng)內(nèi)置可以直接在settings.json中配置

{
  "workbench.colorTheme": "Solarized Dark"
}

圖標(biāo): VSCode Great Icons

• Installation

ext install EditorConfig

• settings.json

{
  "workbench.iconTheme": "vscode-great-icons"
}

字體: Fira Code

• Download
• How to install
• settings.json

縮進(jìn): Guides

• Installation

ext install Guides

• settings.json

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}

• 效果
  
  
  javascript console utils(自定義風(fēng)格的console)
• Installation

javascript console utils

• How to use

// 一鍵生成
cmd+shift+L
// 刪除所有console
cmd+shift+D

• 修改插件
  1. git clone
  2. edit file extension.js replace 62 lines

  const str = `${text}`.replace(/\'|\"/g,'');
  const logToInsert = `console.log('%c${str}: ','color: MidnightBlue; background: Aquamarine; font-size:   20px;',${text});`;
  
  

  3. npm install vsce -g
  4. 修改包的版本如0.8.0(package.json中的version)
  5. vsce package生成vsix文件

  6. 卸載原有的javascript console utils插件拧篮，再?gòu)膙scode安裝

     
     

  7. 大功告成,look一下效果

     
     

風(fēng)格檢查

縮進(jìn)方式: EditorConfig 通過(guò)簡(jiǎn)單的配置文件在不同團(tuán)隊(duì)成員孕讳、不同 IDE涣易、不同平臺(tái)下約定好文件的縮進(jìn)方式良哲、編碼格式，避免出現(xiàn)混亂

• Installation

ext install EditorConfig

• How to use

new .editorconfig file in the root directory

• coding

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2

代碼格式化: Prettier

• Installation

ext install esbenp.prettier-vscode

vue格式化: Vetur

• Installation

ext install Vetur

snippets(自定義代碼片段) 神器!

• 自定義snippets
  
  
  具體使用方法請(qǐng)點(diǎn)擊這里
• plugin
  1.HTML Snippets HTML 標(biāo)簽片段
  2.Javascript (ES6) Code Snippets 常用的類聲明筑煮、ES 模塊聲明辛蚊、CMD 模塊導(dǎo)入等

自動(dòng)補(bǔ)全

• Auto Close Tag 自動(dòng)補(bǔ)全要閉合的標(biāo)簽
• Auto Rename Tag 修改開(kāi)始（結(jié)束）標(biāo)簽的時(shí)候修改對(duì)應(yīng)的結(jié)束（開(kāi)始）標(biāo)簽
• Path Intellisense 文件路徑補(bǔ)全
• NPM Intellisense NPM 依賴補(bǔ)全
• IntelliSense for CSS class names in HTML CSS 類名補(bǔ)全
• Emmet vscode已經(jīng)內(nèi)置了Emmet

功能增強(qiáng)

• Color Highlight 識(shí)別代碼中的顏色
• Bracket Pair Colorizer 識(shí)別代碼中的各種括號(hào)，并且標(biāo)記上不同的顏色
• Project Manager 項(xiàng)目管理真仲，讓我們方便的在命令面板中切換項(xiàng)目文件夾

  Project Manager: Save Project Save the current folder as a new project
  Project Manager: Edit Project Edit your projects manually (projects.json)
  Project Manager: List Projects to Open List all saved/detected projects and pick one
  Project Manager: List Projects to Open in New Window List all saved/detected projects and pick one to be opened in New Window
  Project Manager: Refresh Projects Refresh the cached projects
  

• Git Lens 優(yōu)化VSCode內(nèi)置Git的體驗(yàn)

編碼效率

Document This 能夠一鍵給代碼中的類袋马、函數(shù)加上注釋，支持函數(shù)聲明秸应、函數(shù)表達(dá)式虑凛、箭頭函數(shù)等

• How to use
  1. windows

    alt+ctrl+D
  

  2. osx

  ^(control)+?(option)+D
  

  重復(fù)倆次

Code Spell Checker 實(shí)時(shí)的識(shí)別單詞拼寫是否有誤，并給出提示
Code Runner 選中要執(zhí)行的代碼鼠標(biāo)右鍵run code

插件管理工具(Settings Sync)

Settings Sync
使用GitHub Gist跨多臺(tái)機(jī)器同步設(shè)置软啼、代碼片段桑谍、主題、文件圖標(biāo)祸挪、啟動(dòng)锣披、鍵綁定、工作區(qū)和擴(kuò)展贿条。

簡(jiǎn)單的事情重復(fù)化雹仿，重復(fù)的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情自動(dòng)化

能讓你開(kāi)發(fā)效率翻倍的 VSCode 插件配置（上）
能讓你開(kāi)發(fā)效率翻倍的 VSCode 插件配置（中)

后續(xù)會(huì)更新更多使用技巧..........