VsCode使用指南

Question

VsCode使用指南

CruxF opened this issue 6 years ago · comments

安装插件

方法一：Ctrl/Cmd+P (或 Ctrl/Cmd + E) 输入 ext install [插件关键字/名称]；
方法二：Ctrl/Cmd+Shift+P (或 F1) 输入 Extensions, 选中 Install Extension然后输入插件名称/关键字；
方法三：不在插件商店的插件, 则可以放置到用户目录下的 .vscode/extensions 文件夹中~ 重启 VS Code 即可生效

一般情况下我们使用方法一来安装插件，比如我们安装一个浏览器打开html文件的插件（open-in-browser），步骤分别是：

ctrl+p
ext install open-in-browser
回车
安装

有个地方需要注意的是，当你把整个项目拖进vscode中，那么右键HTML文件才会出现“open with default browser”

当然也可以使用快捷键在浏览器中打开这个HTML文件，使用方法看介绍即可（在window系统下ctrl+alt+o，当然这个不是一定的，还是得根据安装后的提示信息进行快捷键操作）

还有另外一个方法也是挺方便的，直接到管理扩展的地方（左侧5个按钮中的最下那个）去搜索插件进行安装，对于左侧那5个按钮具体的作用看下图

更多实用的插件可以点击这里，当然了，还可以点击这里

目前我安装了如下的插件

让vscode终端变成git终端

假如你不知道你的git安装地址在哪，那么可以这么来找：File ==> perferences ==> setting ==> 搜索git.path，那么就能够看到git的安装地址

接着再点击左下角的settings，点击Extensions，然后再点击Edit in settings.json，之后修改文件如下即可

更多教程请点击这里

创建vue文件模板

首先我们找到关于vue的json配置文件：File ==> perferences ==> user snippets ==> 搜索vue，然后将下面的代码复制粘贴即可

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
  ],
    "description": "Log output to console"
  }
}

注：$0 表示你希望生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令。例如我们新建一个名为demo.vue的文件，输入vue按下enter，就会自动生成内容啦。文章源地址传送门

VSCode快捷键

这种东西，在网上有很多参考文章，因此在这我就不自己写了，不过传送门还是贴一下吧。

安装中文版本

插件名称：Chinese Language Pack for Visual Stidio Code

适用于VS Code的中文（简体）语言包新手建议先用中文熟悉，以后上手英文界面也不迟。

工作常用快捷键

1.复制相同字段后的不同字段

export function getName() {}
export function getAge() {}

步骤一：鼠标选中export function
步骤二：ctrl+shift+p  ==> 选择所有
步骤三：移动键盘右键或者左键直到目标字段的首位
步骤四：ctrl+shift+键盘右键或者左键
步骤五：ctrl+c
步骤六：ctrl+v

工作常用插件

GitLens — Git supercharged：查看代码输入者以及时间