简单的vs code配置, 让开发更高效

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的功能可不止这么一些，善于利用插件，能让你的工作更加游刃有余。实在没有合适的插件的时候，你还可以选择自己写一个~~酷狗音乐~~，毕竟程序员最擅长挖坟造轮子。