CruxF / Blog

个人博客,记载学习的点点滴滴,怕什么技术无穷,进一寸有一寸的欢喜:sparkles:
63 stars 19 forks source link

VsCode使用指南 #12

Open CruxF opened 6 years ago

CruxF commented 6 years ago

安装插件

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

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

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

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

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

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

目前我安装了如下的插件 image image image

让vscode终端变成git终端

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

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

image

更多教程请点击这里

创建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的中文(简体)语言包新手建议先用中文熟悉,以后上手英文界面也不迟。

工作常用快捷键

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


<br><br>

## 工作常用插件
- GitLens — Git supercharged: 查看代码输入者以及时间