2017-08-01 建军节 36度
今天陆续有小伙伴看到我漂亮的屏幕说好看哎 好开心 vs code 好看又好用 记录下简单的插件安装和设置 以备不时之需
先来看下我那好看的编辑器：
我是在mac windows没有太大区别
分这几部分：
下载
自己官网找去
安装插件
最左边侧边栏如下 很好用 真的很好用
-
全项目搜索：（+正则）速度比webstorm快很多 不能忍受ws搜索慢的要耐心等待
-
文件： 普通的文件目录
-
调试：很好用 node直接运行 log
-
扩展：安装各种插件 适合各种框架的应用尽有
下面列出我的常用插件：
vscode-icons:显示各种文件的图标
配置文件
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调试
言必有疏 欢迎指教
