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

C#

浏览数:36

2019-10-11

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

作者:谢mingmin