vs code经过这几年的发展，已经算是个成熟的编辑器了。当然，它还是没学会自己写代码 摔。不会写代码没关系，我们可以通过一些简单的配置和扩展插件，让开发更高效。不过高效不意味着你写代码的时间就能减少🙄。
扩展插件
vs code的插件可以说为vs code提供了无限的能力。比如网易云音乐插件，让福报与摸鱼可以兼得🤣。
云村.png
外貌插件
好的主题配色，能让人神清气爽、增强体质、延年益寿，这里推荐一个Electron Color Theme 。
有代码洁癖的可以考虑一下beautify。
前端插件
vs code可以说对前端的支持是最完善的了，这里以vue来做介绍。
vetur：vue开发必备插件，支持语法高亮、自动补全等功能。
eslint：为代码规格提供实时提示的插件。有些人不喜欢配置eslint，但是这样还是要强烈推荐使用。虽然有点学习成本，上手后，就可以和我一样，菜鸟装大神了。这个可能需要配置一下才能使用。
"eslint.options": {
"configFile": ".eslintrc.js"
},
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "vue", "autoFix": true}
],
使用vue的手脚架创建的工程，如果使用eslint，那么在根目录就有.eslintrc.js。其他工程手脚架的可能没有js文件后缀，按需调整。
git
vs code本身支持git的，当然需要装git的客户端。这里推荐颜值担当的cmder。下载完整版就包含git客户端。此外，cmder还包含一些Linux的命令行，比如rm、ls。
Windows中因为权限问题无法删除的文件夹，可以使用rm -rf 文件夹名来删除。
为vs code添加配置
"git.path": "D:\\Program Files\\cmder\\vendor\\git-for-windows\\bin\\git.exe",
"terminal.integrated.shell.windows": "D:\\Program Files\\cmder\\vendor\\git-for-windows\\bin\\bash.exe",
terminal.integrated.shell.windows可以把cmd换成bash。
bash
tasks
顾名思义，任务。可以把开发中需要的命令写成tasks。比如编译，部署一类的操作。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "npm run build",
"type": "shell",
"command": "npm run build",
},
{
"label": "部署开发环境",
"type": "shell",
"dependsOn": ["npm run build"],
"command": "scp -r ./dist/* root@192.168.0.1:/example/",
}
]
}
还是比较好理解的，而且vs code本身会解释每个字段名。dependsOn表示部署开发环境这个task依赖于npm run build，即执行部署开发环境的时候会先执行npm run build。更多详细内容👉传送门。
代码片段
代码片段，很多编辑器都有的功能。用好代码片段，能够有效的提高写代码的速度。特别是前端里面，有些相似度高的页面。来看几个例子：
"insert a get": {
"prefix": "iag",
"description": "插入get请求",
"body": [
"const response = await this.$$http.get('example/webapi$1', $2);"
],
},
prefix表示激活片段的前缀，比如这里输入iag就会插入body的内容。
$ 后面是占位符。比如 $1，$2。相同序号的占位符，编辑一个的时候，其他会跟着变化。这个在import的时候很有用。
由于$是个转义符号，所以代码中有$的话，需要写多一个$。
代码片段还支持变量，比如
" methods: {",
" submit${TM_FILENAME_BASE}Model(e) {",
" e.preventDefault();",
" },",
" },",
这里会根据文件名产生submit文件名Model(e)这样格式的函数名出来。
再来看个模板片段
"create the template": {
"prefix": "ctt",
"scope": "vue",
"body": [
"<template>",
" <main>$0</main>",
"</template>",
"",
"<script>",
"// description: $2",
"// author: $3",
"export default {",
" name: '$TM_FILENAME_BASE',",
" components: {},",
" props: {",
" },",
" data() {",
" return {};",
" },",
" mounted() {",
" },",
" methods: {",
" },",
"};",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"</style>\n",
],
"description": "创建vue组件模板",
},
直接将一个vue模板写成片段，以后只要输入ctt就可以插入这些代码。同时，将保持name属性和文件名相同。如果页面相似度越高，这个模板可以越丰富，这样可以有效的避免重复写代码。更多代码片段的内容，查看这里。
更多
vs code的功能可不止这么一些，善于利用插件，能让你的工作更加游刃有余。实在没有合适的插件的时候，你还可以选择自己写一个酷狗音乐，毕竟程序员最擅长挖坟造轮子。
网友评论