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