MAYDAY1993 / mayday1993.github.io

只记录技术问题
https://mayday1993.github.io/
8 stars 1 forks source link

vdcode setting #19

Closed MAYDAY1993 closed 7 years ago

MAYDAY1993 commented 7 years ago

2017-08-01 建军节 36度


2018-01-17 更新:terminal里clear:

mac: cmd+k or 输入clear; windows: ctrl+k 垃圾桶图标是关闭窗口


今天陆续有小伙伴看到我漂亮的屏幕说好看哎 好开心 vs code 好看又好用 记录下简单的插件安装和设置 以备不时之需

先来看下我那好看的编辑器:

2017-08-01 11 01 26

我是在mac windows没有太大区别

分这几部分:

下载

自己官网找去

安装插件

最左边侧边栏如下 很好用 真的很好用

image

下面列出我的常用插件:

vscode-icons:显示各种文件的图标

image

Guides:刚折叠代码才发现 我线哪儿去了 明明已经安好了 后来有卸载 重新安装 又关了当前的项目 才生效

js-css-html formatter:可自动保存格式 如果你安装了这个 一保存后发现结构都乱掉了 就把这个卸载到 这挖了个

配置文件

vscode有一套默认的配置 也有自定义的配置用来覆盖:包括字体、字号、主题(需要先下载对应的主题再设置)、各种插件的设置;

打开方式:shift+command+p 输入setting 选择 打开用户设置,或通过preferance 打开

我的配置文件setting.json如下 你可以复制过去覆盖掉 很方便 :

// 将设置放入此文件中以覆盖默认设置
{
    // "editor.fontFamily": ["Hack","Dengxian"],
    "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.fontWeight": "600",
    "editor.tabSize": 4,
    "window.zoomLevel": 0,
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css",
        "*.wxml": "html",
        "*.ts": "javascript"
    },
    "workbench.colorTheme": "Atom One Dark",
    "workbench.iconTheme": "vscode-icons",
    "editor.minimap.enabled": true,

    // Render the actual characters on a line (as opposed to color blocks)
    "editor.minimap.renderCharacters": true,

    // Limit the width of the minimap to render at most a certain number of columns
    "editor.minimap.maxColumn": 200,
    "vsicons.projectDetection.autoReload": true,

    "todohighlight.isEnable": true, //toggle the highlight, default is true
    "todohighlight.isCaseSensitive": true, //whether the keywords are case sensitive or not
    "todohighlight.highlightWholeLine": false, //highlight whole line instead of keyword only
    "todohighlight.keywords": [
        "BUG:", // adding custom keywords without specifying the look, default color will be applied
        "REVIEW:", //another custom keyword
        {
            "text": "NOTE:", // custom text to be highlighted
            "color": "#ff0000", // the text color, any css color identifier is valid
            "backgroundColor": "yellow", // the text background color
            "overviewRulerColor": "grey" //the color of the ruler mark on the scroll bar. use rgba() and define transparent colors to play well with other decorations.
        },
        {
            "text": "HACK:",
            "color": "#000"
        },
        { //this block will override the built-in keyword `TODO:` and give it new style
            "text": "TODO:",
            "color": "red",
            "backgroundColor": "rgba(0,0,0,.2)"
        }
    ],
    "todohighlight.keywordsPattern": "TODO:|FIXME:", // Specify keywords via RegExp instead of `todohighlight.keywords` one by one. NOTE that if this presents, `todohighlight.keywords` will be ignored. And REMEMBER to escapse the back slash if there's any in your regexp (using \\ instead of signle back slash). 
    "todohighlight.defaultStyle": { //specify the default style for custom keywords, if not specified, build in default style will be applied
        "color": "#0000ff",
        "backgroundColor": "yellow",
        "overviewRulerColor": "grey"
    },
    "todohighlight.include": "{**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.html,**/*.php,**/*.css,**/*.scss}", //A glob pattern that defines the files to search for. Only include files you need, DO NOT USE `{**/*.*}` for both permormance and avoiding binary files reason
    "todohighlight.exclude": "{**/node_modules/**,**/bower_components/**,**/dist/**,**/build/**,**/.vscode/**,**/_output/**,**/*.min.*,**/*.map}", //A glob pattern that defines files and folders to exclude while listing annotations
    "todohighlight.maxFilesForSearch": 5120, //Max files for searching, mostly you don't need to configure this
    "todohighlight.toggleURI": false //If the file path within the output channel not clickable, set this to true to toggle the path patten between `<path>#<line>` and `<path>:<line>:<column>`

}

使用体验

好看又好用 真的很好用

编辑器历史:之前用webstorm很卡 而且整个项目搜索要等 看着进度条在动 后来用atom 真心好看 不过因为很多需要自己配的 换电脑就要再重新配 而且很多功能配起来超麻烦 很耗时(还不是很想入很花时间来配的工具 毕竟追求快速入门能用是多数) 用着就不舒服 再后来就是vs code 了 写angularjs 因为天生对typescript友好 天生支持node调试

highCPU

嗯 外面38度 mac键盘热得嘞 暖手型键盘 资源管理器一看 占了100+cpu
打开设置文件 设置了一下 就好了 看现在的占比 :smile

screen shot 2017-08-03 at 6 32 14 pm

"files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/.DS_Store": true,
    "**/bower_components": true,
    "**/jspm_packages": true,
    "**/node_modules": true
    },
"files.watcherExclude": {
    "**/tmp/**": true,
    "**/node_modules/**": true,
    "**/bower_components/**": true
  }

言必有疏 欢迎指教