VSCode基本使用

Posted zys2019

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VSCode基本使用相关的知识,希望对你有一定的参考价值。

1.下载与安装

下载地址:https://code.visualstudio.com/Download

安装:下载了exe的文件后直接安装即可。

2.常用快捷键

命令

说明

F1或Ctrl+Shift+P

主命令框

Ctrl+Shift+N

新开一个VScode编辑器

Ctrl+C -> Ctrl+V

复制当前行

Shift+Alt+F

代码格式化

Ctrl+Shift+L

同时对选中的内容进行内容匹配后编辑

 Ctrl+F

 查找

Ctrl+H

 查找替换

 Ctrl+Shift+F

 整个文件夹中查找 

 

3.基本使用

3.1VSCode自定义vue文件模板

1)依次打开“文件 ——> 首选项 ——>用户代码片段”,输入html或html.json,回车,在里面添加下面的代码后保存(这是自定义的,可以根据实际情况修改)

"Print to console": {
            "prefix": "myv",
            "body": [
                "<template>",
                "  <div>",
                "",
                "  </div>",
                "</template>",
                "",
                "<script>",
                "",
                "export default {",
                "  name:‘‘,",
                "  components: {},",
                "  computed: {},",
                "  created() {},",
                "  data() {",
                "      return {",
                "",
                "      }",
                "  },",
                "  methods: {",
                "",
                "  },",
                "}",
                "</script>",
                "",
                "<style scoped>",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }

2)新建一个vue的文件,在开头输入myv回车,即可生成模板文件,输入如图。

技术图片

3.2VSCode中代码提交到git

1)打开从git上拉取的项目,会看到在左下角有一个master,这表示已经和github连接了

技术图片

 2)选择v型图标,输入代码的提示,点击对号将代码提交到本地仓库

技术图片

 3)点击对号后面的三个点,选择push,把本地仓库的代码提交到远程仓库,可能需要输入github的用户名和密码。

技术图片

 4)每次提交都输入用户名和密码显得很麻烦,可以进行设置。在命令终端输入

git config --global credential.helper store

3.3VSCode格式化Vue,代码会自动加上分号的问题

在对vue文件进行格式化的时候,vscode会在代码后面自动加上分号,看着不输入,语法也不通过。解决办法如下:

打开设置(文件 ——> 首选项 ——>设置),输入vetur.format.defaultFormatter.js,把prettier改为prettier-eslint。

3.4VSCode写VUE代码 注释 html出现 //

安装Vuter插件即可。

3.5VSCode中VUE.JS的HTML代码如何实现自动补全

1)下载HTML Snippets插件

2)打开File—>Preferences---->settings,输入:files.associations回车搜索

3)在files.associations{ }里面中加入

"*.ejs":"html",
"*.vue":"html"

3.6自动完成头部和尾部闭合标签的同步修改

安装插件Atuo Rename Tag即可。

3.7配置同步

一台电脑配置好之后,其它的几台电脑都不用配置,只要登录一下就搞定。安装Settings Sync插件。

3.8简体中文界面

将界面转换为中文。安装Chinese (Simplified) Language Pack for Visual Studio Code插件,然后重启即可。

 

以上是关于VSCode基本使用的主要内容,如果未能解决你的问题,请参考以下文章

vscode代码片段建议bug

VSCode自定义代码片段——CSS选择器

#VSCode保存插件配置并使用 gist 管理代码片段

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段——声明函数

VSCode自定义代码片段——.vue文件的模板