VSCode安装步骤

VSCode安装步骤

1.引言

工欲善其事，必先利其器。想要优雅且高效的编写代码，必须得先熟练使用一款前端开发工具，但是目前前端开发工具有很多，例如：Sublime，Webstorm等等。

长话短说，首先，大家可以先打开VScode的官网下载地址：https://code.visualstudio.com/

2.安装步骤：

2.1 首先，我们需要同意这个安装许可协议。

2.2 接着，我们需要选择安装路径，在这里建议不要安在C盘，可以选择其它盘，我这里是选择安装在E盘。

2.3 直接点击下一步

2.4 在这里记得勾选创建桌面快捷方式

2.5 然后就可以直接点击安装了

3.检查一下安装情况

3.1 刚开始这个面板是显示一个英文版本，等待一会后发现会跳出来一个弹窗，我们只需要在此时安装上汉化包

3.2 页面简单介绍

3.3 然后我们可以在桌面创建一个文件夹，然后在打开此文件，然后创建文件，然后再创建好的.html文件里面直接输入doc，即可弹出框架，现在我们就可以在这里建立我们自己的前段界面啦

注意（选弄，可以根据读者自己个人选择是否执行一下操作）

用户设置：
文件>首选项>设置 > 搜索workbench.settings.editor，选中json即可改成json设置；将下述配置替换掉原有配置

  "files.associations": {
  "*.vue": "vue",
  "*.wpy": "vue",
  "*.wxml": "html",
  "*.wxss": "css"
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
  "vue-html": "html",
  "vue": "html",
  "wpy": "html"
  },
  //主题颜色 
  //"workbench.colorTheme": "Monokai",
  "git.confirmSync": false,
  "explorer.confirmDelete": false,
  "editor.fontSize": 14,
  "editor.wordWrap": "on",
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  //失去焦点后自动保存
  "files.autoSave": "onFocusChange",
  // #值设置为true时，每次保存的时候自动格式化；
  "editor.formatOnSave": false,
   //每120行就显示一条线
  "editor.rulers": [
  ],
  // 在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/target": true,
      "**/logs": true,
  }, 
  // 这些文件将不会显示在工作空间中
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/*.js": {
          "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
      },
      "**/node_modules": true
  }, 
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          // #vue组件中html代码格式化样式
          "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,
          "singleQuote": true
      },
      "prettier": {
          "semi": false,
          "singleQuote": true
      }
  }}

禁用自动更新:
第一步：点击左下角点击设置图标，找到并点击“setting”
第二步：到搜索框里搜索“prevent”—>并取消此项的勾选

3.4 常用快捷键

重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
删除一行：光标没有选择内容时，ctrl + x 剪切一行 
移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行
ctrl + z 回退
ctrl + d : 选中一个词
ctrl + f ：搜索
Ctrl + ` 可以打开或关闭终端
Ctrl + Shift + P：打开命令托盘
Ctrl+P 快速打开最近打开的文件
Ctrl+Shift+N 打开新的编辑器窗口
Ctrl+Shift+W 关闭编辑器
Ctrl + Shift + [ 折叠区域代码
Ctrl + Shift + ] 展开区域代码
Ctrl + / 添加关闭行注释
Shift + Alt +A 块区域注释