定制vs code

定制vs code

vs code已经用了很久了，今天来总结一下好用的插件和个性化的配置

插件

先来说好用的插件
vim 首先来解放鼠标，vs code的vim扩展，支持命令行以外的绝大部分功能
Git Lens 包括git log， git diff，git blame，一眼看得清楚，堪比git extension
Panda Theme Panda推出的一款主题，楼主现在用的主题就是基于panda的
vscode-icons 来让vs的图标更好看，更好辨认
Path Intellisense 自动路径提示，让引用变得更容易
Output Colorizer output更容易辨认

---

以上就是必备插件了， 剩下一下是语言依赖插件，因为本人是做node的，所以大部分都是JS HTML相关的了
Beautify美化js html css代码
ESLint js jsx代码检查
HTML Snippets html 代码提示 上色
HTML CSS support html attribute id class自动补全 很好用
JavaScript code snippets js代码提示
Node.js Modules Intellisense node包引用自动补全，同时支持typescript
npm 提示node modules的版本，自动检查package.json
Auto Rename Tag 有了它以后HTML tag只需要改一边就好了
Angular v5 Snippets vs code最火的Angular自动完成插件，省时省力
现在用的插件就这么多，以后有了好用的再补上
Node exec 调试单个js文件必备

---

*配置，配色 红黑主题vs code

{
    "editor.tabSize": 2, // tab必须是两格，漂亮 省地方
    // "vim.disableAnnoyingNeovimMessage": true,
    "vim.useCtrlKeys": false, //这个不禁用就不能CTRL c，CTRL v了
    "workbench.iconTheme": "vscode-icons", //好辨认的icon
    "material-icon-theme.folders.theme": "none",
    "material-icon-theme.folders.color": "#42a5f5",
    "workbench.colorTheme": "Panda Syntax", //Panda主题
    "workbench.sideBar.location": "right", //本人是双屏，vs code在右边，所以把sidebar放在最右边更舒服   
    //接下来改改颜色了
    "workbench.colorCustomizations": {
        "editor.background": "#0a0a0a", //背景黑一点 对比明显 代码看得清楚
        "activityBar.foreground": "#ff0303",//侧边图标变红
        "sideBar.background": "#000000", 
        "activityBar.background": "#000000",
        "contrastActiveBorder": "#ff0000", //选文件的时候加个红边框 选的更准
        "scrollbarSlider.background": "#7a2d2d", //滚动条更明显
        "scrollbarSlider.hoverBackground": "#a00f0f",
        "scrollbarSlider.activeBackground": "#ff0000",
        "scrollbar.shadow": "#ff0000",
        "statusBar.background": "#5c0000" //下边栏增强对比
    }
}

---