VScode开发工具（推荐使用）-CSDN博客

本文链接：https://blog.csdn.net/gddd123456/article/details/105005555

1. 技术目标

目标01：官方下载安装vscode编辑器
目标02：快捷键配置
目标03：Git和SVN环境的配置
目标03：常用插件配置
目标04：项目代码的书写

2. 环境配置

2.1 开发配置

windows操作系统
vscode编辑器

3. 技术介绍

3.1 vscode介绍

本篇文章引导你使用前段开发工具vscode进行高效的开发前段页面。如今前端开发工具也是各种各样，例如：webstrom、sublime text 3、hbuilder等，但是综合工具内存消耗和使用的角度还是强烈推荐使用vscode。

3.2 关键字

vscode、git

3.3 技术栈

开发工具

4. 技术实践

4.1 官方下载vscode编辑器

官网下载地址

4.2 git环境的配置

File----首选项----设置

{
    "git.path": "D:/2018dev/soft/Git/cmd/git.exe",
    "workbench.statusBar.feedback.visible": false,
    "git.enableSmartCommit": true,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"//在这里加上vue
        ]
    },
    "git.autofetch": true,
    "git.confirmSync": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.validation.template": false,
    "files.exclude": {
        "node_modules/": true
    },
    "workbench.editor.enablePreview": false
}

4.3 快捷键的使用配置

习惯了eclipse的快捷键，对vscode的快捷键用着感觉相对不是太习惯，为了自己开发中快捷键的统一配置，这里选择安装了eclipse快捷键的插件。

Ctrl+tab：文件切换

4.4 vscode插件配置

Chinese (Simplified) Language Pack for Visual Studio Code：中文插件
beautify：格式化代码插件
SVN：代码管理插件
Eclipse Keymap：快捷键插件
JavaScript standardjs styled snippets
ESLint：语法检查
Vetur：vue开发插件（Vue 2 Snippets）
VueHelper：vue代码提示插件
minapp-vscode：小程序代码提示插件
Live Server ：搭建本地服务
Debugger for Chrome ：debugger调试插件

4.5 搭建本地服务

1、安装npm install -g live-server或者cnpm install live-server -gf
2、配置live-server服务的地址端口
3、再运行live-server就可以在http://127.0.0.1:8080访问

4.6 模板文件生成代码

File----首选项----用户代码片段
创建demo.vue文件为例子：进入用户代码片段后，搜索vue，打开vue.json文件，进行自定义文档的编辑！

{
    "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"
    }
}