search

mask2012 / MaskBlog

all blogs are in issues.
12 stars 5 forks source link

vs code 学习总结 #19

Open mask2012 opened 6 years ago

mask2012 commented 6 years ago

昨天学了一天vs code，发现上手挺快的，我把他看成是sublime text的升级版

总结一下vs code相较与st的优势

  1. 更新快，st目前的更新感觉是停掉了；社区插件提交活跃
  2. shortcut，插件，preference，都有友好的UI界面，特别值得一提的是插件介绍页，基本上每个插件都自带gif解释，一图胜千言，学习门槛低
  3. 每个插件装好后，可以很方便在shortcut列表页搜到并调整，快捷键有冲突提示
  4. ctrl+p提示更好，没有冗余信息，文件名前置

总体来说就是把我在st中的设置与习惯搬到了vs code上，发现竟然都可以搬过来，有的体验变好了，有的体验变差了。当然我看中的是他未来插件的发展。

皮肤

这个是相处时间最长的，我花了有一段时间，才找到对比没那么强烈的皮肤

image

选择器

快速的选择是提高效率的必备武器，emmet中自带了选择，然后加上插件expand_region，即可实现sublime里边我常用的选择功能，并按照ctrl+0开始设定了快捷键

image image

line actions

整行操作也是不可获取的效率操作，我改成了和st一致 Copy Line Down 复制本行 ---ctrl+shift+d Move Line Up 整行上移 ----ctrl+shift+uparrow Move Line Down 整行下移 ----ctrl+shift+downarrow

跳转定义/预览定义

Go To Definition f12 Peek Definition alt+f12

启动cmd，切编辑器和cmd区

Toggle Intergrated Terminal ---ctrl+shift+` Focus First Editor Group ---ctrl+shift+alt+upArrow Focus Terminal ---ctrl+shift+alt+downArrow

github开发者互动

color picker

使用过程中很不喜欢颜色预览，大多数情况下我是不需要这个的，只因为碍眼，真的碍眼 发现在issue里和我有同样感受的不止一个，于是作者应大家的要求很快就加上了去掉颜色预览的option https://github.com/Microsoft/vscode/issues/10943 在setting里搜css.colorDecorators 即可找到此选项

image

keep open

另一个很不喜欢的地方是打开文件默认是当作临时文件的，此时如果打开别的文件，会在当前文件打开，而不是新开窗口。我并不觉得这样的特性有神马好的，如果要关我自己会关的，我既然打开了肯定有用。好在同样搜到了此项设定 在setting里搜workbench.editor.enablePreview 即可找到此选项 image

插件使用

open file path 这个可以按住ctrl点击文件打开文件，省力高效 expand-region 选择用，可以层级往上和层级往下 jce 支持jce语法高亮 vscode-fileheader 在文件头部插入修改日期并自动更新 beautiful UI 我用的这个皮肤 Project Manager 快速切换工程，保存用命令，打开用快捷键ctrl+shift+o 新工程打开

插件使用遇到问题解决

插件color-picker调起时遇到问题， 后来发现他的运行需要依赖某些模块，然后会自动去下载，（去看官方issue也有很多都是启动不了） 通过help-toggle develop tool 发现插件是运行在chrome的环境下的，可爱的是调试信息很丰富。 发现是npm下载遇到了问题，我本机的npm源是我们自己布的一个源，这个源下载失败了 后来切到淘宝源，还是失败了， 再试试切到npm官方源，竟然成功了 image

Settings Sync

同步所有vs code的设置 那么在别的电脑施展vs code的时候，先装上Setting Sync，再下载配置，就可以还原vs code的所有设置了，包括插件，快捷键，snippet等。

上传

  1. Settings Sync插件安装完成后，会弹出界面，点Login with github，授权他写入文件到github
  2. extension.updateSettings 上传快捷键 shift+alt+u

    下载

  3. 同样login with github
  4. extension.downloadSettings 下载快捷键 shift+alt+d

实际操作中，在另一台电脑down配置的时候遇到了非预期的东东，最终找到了解决方案，看这里。

DongLee0504 commented 6 years ago

expand-region 这个插件好方便，emmet自带的好像不支持js

DongLee0504 commented 6 years ago

Settings Sync 这个插件也不错，和github一起用，可以在不同的设备上同步插件&设置&快捷键

mask2012 commented 6 years ago

@DongLee0504 是的 expand-region相当于是一个一直往大范围选择的选择器。 以前我在st里选择引号内容，只需要一个快捷键搞定（当然也用了插件），现在用expand-region需要点2下才行