vscode插件使用合集 - 前端技术分享

当扩展很慢的时候

Developer：show running extensions (发现哪些导致慢)
https://code.visualstudio.com/updates/v1_32#_bundling-extensions-with-webpack?wt.mc_id=devto-blog-jopapa - 官方提供了打包功能
写在前面
调出——显示所有命令（cmd + shift + P）
然后搜索 code
选择 install code command in path
这样就可以在shell中直接通过code xxx 调起vscode 来

vscode常用快捷键：

显示所有命令（cmd + shift + P）
转到文件（cmd + P）
在文件中查找（cmd + shift + F）
开始调试（F5）

Plugin: vscode-faker

使用场景:
目标，生成一行行的名字如下

export default `
Abbott
Turner
Kutch
Reichert
Funk
Mante
Hammes
Howell
`.trim().split(/\s+/g)

用这些名字，生成一个name的数组，那么，怎么生成一行一个名字呢？

vscode-faker + 多行选中功能

利用多行选择和faker
alt+shift (先点击第一行，按完快捷键后，再点击最后一行)
再cmd+shift+p调出faker，选中要生成的类型即可

Plugin: open in browser

我的家里电脑的chrome浏览器之前点击open in browser 一直没有反应，升级了之后就好了（但是也是只在没有打开过浏览器页面的情况下生效

那么open in browser or view in browser 的原理是什么呢？为什么会产生我家里电脑那种情况呢？

插件评级星星边上有repository，可以通过这个点到github里面去看他们具体的实现

const opn = require('opn');

export const open = (path: string, browser: string = '') => {
  // const name = browser ? browser : standardizedBrowserName(defaultBrowser());
  // const name = standardizedBrowserName(browser);
  opn(path, { app: browser })
    .catch(_ => {
      vscode.window.showErrorMessage(`Open browser failed!! Please check if you have installed the browser ${browser} correctly!`);
    });
};

1	https://www.npmjs.com/package/opn //opn链接，现已更名open

PS: 一般情况下，我要打开静态资源，会起个静态资源服务，就OK了，http-server

svg viewer

可以看svg图片

koroFileHeader

团队注释规范，可以制定好规范，提供配置给团队成员使用