vscode 配置

安装

• 官网 下载最新版本安装 click next step
• 建议勾选下面所有选项，开发更加方便（右键、code）

界面布局

• 活动区(A)：提供vscode的核心功能以及一些插件的快捷入口
• 侧边栏(B)：展示当前操作的文件目录等
• 编辑区(C)：代码的编辑区域
• 面板(D)：terminal操作、输出操作日志等信息
• 状态栏(E)：当前文件操作的一些状态

常用快捷键

Mac 快捷键	Win 快捷键	作用
cmd + ,	ctrl + ,	打开设置
cmd + b	ctrl + b	快速显隐侧边栏
cmd + j	ctrl + j	快速显隐面板
cmd + p	ctrl + p	显示最近操作的文件
cmd + shift + p	ctrl + shift + p	显示命令面板
cmd + Shift + n	ctrl + Shift + n	重新开一个软件的窗口
cmd + Shift + w	ctrl + Shift + w	关闭软件的当前窗口
cmd + n	ctrl + n	新建文件
cmd + w	ctrl + w	关闭当前文件
cmd + enter	ctrl + enter	下方插入一行
cmd + shift + enter	ctrl + Shift + enter	上方插入一行
option + ↑	alt + ↑	将代码向上移动
option + ↓	alt + ↓	将代码向下移动
option + shift + ↑	alt + shift + ↑	将代码向上复制
option + shift + ↓	alt + shift + ↓	将代码向下复制
option + 鼠标点击	alt + 鼠标点击	同时插入光标
cmd + shift + L	ctrl + shift + L	在选中文本的所有相同内容处，出现光标
cmd + d	ctrl + d	可以连续操作，选中最近的相同内容处，出现光标
cmd + g	ctrl + g	跳到制定行数
cmd + shift + k	ctrl + shift + k	删除整行
cmd + u	ctrl + u	将光标的移动回退到上一个位置
cmd + /	ctrl + /	单行注释
shift + option + a	shift + alt + a	块注释

常用插件

名称	简述
Auto Import	import提示
Auto Rename Tag	修改HTML标签时，自动修改匹配的标签
Better Align	对齐赋值符号和注释
Better Comments	编写更加人性化的注释
Bracket Pair Colorizer	用不同颜色高亮显示匹配的括号
Code Runner	运行选中代码段（支持多数语言）
Color Picker	拾色器
DotENV	.env文件高亮
EditorConfig for VS Code	EditorConfig插件
ESLint	ESLint插件，高亮提示
Git Blame	在状态栏显示当前行的Git信息
Git History	查看git log
GitLens	显示文件最近的commit和作者，显示当前行commit信息
RemoteHub	在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地
gitignore	.gitignore文件语法
Polacode	将代码生成图片
vscode-icons	更好看的文件icon
vetur	vue开发必备，语法高亮，智能提示等
vue VSCode Snippets	vue语法提示，比vetur的更加好用
image preview	项目中快速预览图片
Path Intellisense	自动补全路径
CSS Peek	增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式
Vue CSS Peek	CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持
Prettier	格式化代码

git操作

vscode 默认和 git 集成，但需要本地安装 git 客户端。 在vscode中使用Git

配置同步

新版vscode已经内置在线同步功能，无需安装第三方插件。选择使用github帐号登录即可

还原默认设置

mac 系统

// 删除以下两个文件夹：
/Users/用户名/.vscode
/Users/用户名/Library/Application Support/Code

windows 系统

// 删除以下文件夹里的所有内容：
C:>User>用户名>AppData>Roaming>Code

配置自动格式化

vscode 编辑区失去焦点自动格式化保存，使用的格式化程序是eslint

安装 vscode 所需的插件： eslint、vetur

  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  // 会和eslint fix冲突
  "editor.formatOnSave": false,
  "editor.minimap.enabled": true,
  "editor.renderControlCharacters": false,
  "breadcrumbs.enabled": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.validation.template": false, // vetur 不校验template
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline",
      "end_with_newline": false
    },
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    // "source.fixAll.stylelint": true
  },
  "explorer.compactFolders": false,

参考资料

vscode 官网