开发工具VSCode基本使用

  对于前端开发者来说，有不少可供选择的开发工具，笔者曾用过VSCode、WebStorm、HBuilderX、Sublime Text等等。开发工具本身就是大同小异，重点是要选择一款适合自己，且有利于提高工作效率的。 本文主要介绍一下VSCode基本使用。
  VSCode具有以下特点：免费、开源、多平台，以及集成git，代码调试，插件丰富等。

安装

下载地址：https://code.visualstudio.com/，推荐使用稳定版。

布局

常用快捷键

1. Ctrl + Z 撤销

2. Ctrl + Shift + Z 反撤销

3. Ctrl + P 查找文件

4. Ctrl + S 保存文件

5. Ctrl + F 搜索代码

6. Shift + Alt + F：格式化代码

7. Ctrl + / 当前行添加注释

8. Ctrl + Enter 当前行下另起一行

9. Ctrl + Shift + Enter当前行上另起一行

10. Ctrl + B 切换面板

ps：快捷键的设置可通过"文件-首选项-键盘快捷方式"查看

插件

  插件的使用需谨慎！!安装太多容易有冲突，从而导致个别插件不起作用。小编在开发时用到的插件只有以下几个：

prettier设置

(将以下代码复制到settings.json中即可)

 "vetur.format.options.tabSize": 4,
  "vetur.format.scriptInitialIndent": true,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 140
    },
    "prettier": {
      "singleQuote": true,
      "printWidth": 400,
      "proseWrap": "never"
    }
  },
  "prettier.semi": true,
  "prettier.printWidth": 400,
  "prettier.proseWrap": "never",
  "prettier.singleQuote": true,
  "vetur.validation.template": false,
  "editor.formatOnSave": true,
  "cssrem.rootFontSize": 75,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    "vue"
  ],
  "eslint.autoFixOnSave": true

  在开发中使用相同的代码规范，并且还能自动格式化代码，可以大大提高开发效率。

插件的安装步骤：

导入git项目

  由于VSCode不提供创建git项目功能，所以需要先创建git项目，然后打开再用它编辑。
  打开本地的git项目后，对文件进行修改会自动激活VSCode的git工具。

提交代码

1

2

3

提交代码可能遇到的问题：

1.VSCode Git:failed to execute git

在VSCode中选择全部提交时候提示 Git:failed to execute git

在git日志中会看到这么一行错误信息 empty ident name (for <XXXXXX.com>) not allowed (XXXXXX为你的邮箱)

出现这个错误的原因是：git没有设置用户信息

解决方案：

设置user.email和user.name,再重新提交。

$ git config --global user.name "XXXXXX"（设置你的用户名）

$ git config --global user.email "XXXXXX.com" （XXXXXX为你的邮箱）

2.点击push后：

输入上一步设置的用户名及gitlab密码即可！！