vscode使用指南1.vscode介绍 2. vscode快捷键 3.1 mac使用code .命令打开VSCode

1.vscode介绍

本文主要介绍vscode在工作中常用的快捷键及插件，目标在于提高工作效率。本文的快捷键是基于mac的

2. vscode快捷键

// 重点记忆
ctrl + shift + T: // 撤销最近关闭的窗口
ctrl + 1/2/3/4/5。 
opt + delete // 删除上一个单词， 很有用
cmd + opt + F: // 当前文件替换 👍
opt + cmd + 上箭头 ：// 在上面插入光标
opt + Enter ： 选择查找匹配的所有匹配项 👍
cmd + 1、2、3： 聚焦到第1、2、3个编辑器 // 同等重要
cmd + opt + 左右方向键 // 在已经打开的多个文件之间进行切换 非常实用
cmd + shift + \ // 跳转到匹配的括号
shift + cmd + H ：// 在文件中替换
cmd + opt + ][ : // 展开折叠代码 👍
fn+ delete: // 删除光标之前的一个单词 👍
ctrl + j: // 将多行代码合并为一行
cmd + opt + shift + / // 合并所有编辑器组
opt + shift + m // (Go Back)后退 这个快捷键非常好用。 这是我自定义的快捷键，搭配(Go Forward)使用
opt + shift + n // (Go Forward)前进

// 修改快捷键的位置: 
Code => Perferences(首选项) => Keyboard Shortcuts(键盘快捷键方式)
opt + Shift + F // 格式化
ctrl + g // 跳转到某一行
shift + opt + up/down // 在当前行上下复制当前行
cmd+ shift + k // 删除行
cmd + = 和 cmd + -: // 组合来进行字体缩放;
cmd + opt + S: // 保存所有文件
cmd + d: // 当前文件查找选中单词下一目标, 再按一下匹配下一个
opt + shift + I: // 在选中文本的所有相同的内容处, 出现光标 👍
cmd + G / shift + cmd + G ：// 查找下一个/上一个
cmd + \ ： 拆分窗口 👍 // 重要 抄代码利器
cmd + g // 在当前文件中搜索代码, 光标仍停留在编辑器里。 很巧妙 👍
ctrl + r // 切换工作区 👍

cmd + ][ : // 缩进 和 反缩进 
cmd + shift + n: // 在当前文件夹下新建文件夹  
opt + shift + 鼠标拖动: // 在选中区域的每一行末尾，出现光标 👍
cmd + u: // 将光标的移动回退到上一个位置

ctrl + cmd + f: // 全屏和退出全屏(效果同mac左上角最小化右边那个按钮)
cmd + shift + Z: 取消撤回
cmd + Z: 撤回
cmd + P 快速打开文件；
opt + up/down: 移动行上下
shift + opt + A ：// 切换块注释 直接输入 `/**` 然后回车更好用
cmd + P ： // 跳到文件
ctr + `: // 打开/关闭 终端
cmd + B // 关闭左侧菜单栏
control + tab // 切换同一编辑器不同的标签页  
cmd + 逗号 // 设置

// vscode设置
连字符双击可以全选:   "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?", // 双击选中连字符。 删除了中间有个-

3.1 mac使用`code .`命令打开VSCode

需要安装code：打开vscode –> command+shift+p –> 输入shell command –> 点击提示Shell Command: Install ‘code’ command in PATH运行

使用方式：打开终端，cd到要用vscode打开的文件夹，然后输入命令code .即可打开

3.2 当顶部菜单栏隐藏时候，如何调出来

设置里的 Show Tabs

3.3 vscode找到全局配置文件`settings.json`

首选项-> 设置 -> 输入(syn)进行搜索 -> 在最底下的Vetur中选择在settings.json中编辑

3.4 vscode下插件的安装

在vscode中使用微信小程序

wechat-snippet

微信小程序代码辅助，代码片段自动完成

minapp

微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue和wepy框架，并提供snippets)
需要输入< 才会触发标签补全
输入空格会触发对应标签的属性补全

3.5 vscode 打开新文件覆盖窗口，始终显示一个窗口

。正常来说vscode打开文件，在可以多窗口展示的。如果打开新页面会覆盖之前的老页面，始终只能显示一个窗口，那就会很麻烦使用起来。解决办法: ctrl+shift+p打开命令面板。输入settings，选择Open Settings(JSON)。然后在settings.json文件中修改workbench.editor.showTabs:true

ctrl+shift+p
输入settings打开settings.json
修改workbench.editor.showTabs:true

3.6 vue通过`@`符号导入组件路径提示

开发场景
当使用 Vue 框架进行项目开发时，在 vue.config.js 中配置好了路径别名后，到其他页面引入组件、引入 css 、引入静态文件路径时，使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件，但是并无作用。这样容易出现路径拼写错误的低能问题，同时也会造成开发效率降低。

解决方案
在 vscode 的 setting.json 中给 Path Intellisence 配置（该方案是最优选，能识别任意格式文件，覆盖率最广。当别名发生改变时只需修改配置即可)。 注意，这里要安装插件: Path Intellisense

// settings.json 
"path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "u": "${workspaceRoot}/src/utils",
    "c": "${workspaceRoot}/src/components",
    "v": "${workspaceRoot}/src/views",
    "a": "${workspaceRoot}/src/assets",
    "s": "${workspaceRoot}/src/styles"
},

3.7 vscode在终端和面板之间切换

cmd + shift + p打开控制面板。找到keybindings.json。添加如下代码，快捷键可以自行设置

{
    "key": "ctrl+a",
    "command": "workbench.action.terminal.focus",
    "when": "editorFocus",
},
{
    "key": "ctrl+a",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "terminalFocus",
}

3 vue项目自定义`alias`别名

在vue项目中。不同的文件有不同的路径，有的路径比较深，有的经常被引用。所以，建议使用alias别名对项目文件进行别名引用。这样引入文件的时候会更加方便。

首先在vue.config.js中的module.exports里配置别名

configureWebpack: {
  // provide the app's title in webpack's name field, so that
  // it can be accessed in index.html to inject the correct title.
  // 自动补全的扩展名
  resolve: {
    extensions: ['.js', '.ts', '.vue', '.json', '.css', '.node', '.sass'], // 注意这一行代码要加， 否则点击右键无法跳转js, css等文件
    alias: {
      '@': resolve('src'),
      'c': resolve('src/components'),
      'u': resolve('src/utils'),
      'v': resolve('src/views'),
      'i': resolve('src/assets/images'),
      's': resolve('src/styles'),
    }
  }
},

新建jsconfig.json，在这里匹配vue.config.js里的配置

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "u/*": ["src/utils/*"],
      "c/*": ["src/components/*"],
      "v/*": ["src/views/*"],
      "i/*": ["src/assets/images/*"],
      "s/*": ["src/styles/*"]
    },
    // 解决.jsx文件无法快速跳转的问题
    "jsx": "preserve"
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

小贴士: 以上两个配置只针对当前单一项目进行的配置。如果想在全局生效。可以直接在全局设置里配置 3. settings.json里做如下配置

"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src",
  "u": "${workspaceRoot}/src/utils",
  "c": "${workspaceRoot}/src/components",
  "v": "${workspaceRoot}/src/views",
  "a": "${workspaceRoot}/src/assets",
  "i": "${workspaceRoot}/src/assets/images",
  "s": "${workspaceRoot}/src/styles"
},

4. vscode插件

Auto Close Tag
Auto Complete Tag
Auto Import
Auto Rename Tag
Better Comments
Chinese(Simplified)
Code Spell Checker
CSS Navigation
CSS Peak
Data Workspace
DotENV
Image perview
Material Icon Theme
open in browser
Path Intellisense
Prettier - Code formatter
Project Manage
Quokka.js
REST Client
SQL Database Projects
SQL Server
stylus
TODO Highlight
Vetur
Vue CSS Peek
wxml: 微信小程序wxml格式化以及高亮组件(高度自定义)
WXML-Language Service
autopunc 中文标点符号转英文

5. 个人`settings.json`的全局配置

{
  "workbench.editor.showTabs": true,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "u": "${workspaceRoot}/src/utils",
    "c": "${workspaceRoot}/src/components",
    "v": "${workspaceRoot}/src/views",
    "a": "${workspaceRoot}/src/assets",
    "i": "${workspaceRoot}/src/assets/images",
    "s": "${workspaceRoot}/src/styles"
  },
  "editor.wordWrap": "on",
  "javascript.validate.enable": false, // 主要是这个，关闭vscode的js验证器
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  
  "editor.snippetSuggestions": "top", // 代码提示。许多插件都有代码提示，代码缩写提示优先显示在最上方
  "vetur.grammar.customBlocks": {},
  "explorer.confirmDelete": false,
  // 配置文件关联
  "files.associations": {
    // 比如小程序的.wxss这种文件， 会把它作为css文件来处理， 提供对应的css语法提示，css格式化等
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.ts": "typescript"
  },
  "git.autofetch": true, // 在push代码时，是否先自动从远端拉取代码
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "/dist": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.vscode": true,
    "**/tmp": true,
    "**/dist/static/css": true,
    "**/build": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.js": {
      "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
    },
    "chunk-04c1d476.85d188e8.css": true
  },
  // 配置是否在左侧目录列表里显示
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    // "**/node_modules": true,
    "**/CVS": true
  },
  "svn.multipleFolders.ignore": [
    "**/dist",
    "**/.git",
    "**/.hg",
    "**/vendor",
    "**/node_modules"
  ], // 两个选择器中是否换行
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "editor.wordSeparators": "`~!@$%^&*()=+[{]}\\|;:'\",<>/?.", // 双击选中连字符和带#的
  "minapp-vscode.disableAutoConfig": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.useEditorConfig": false,
  "prettier.singleQuote": true,
  "prettier.semi": true, // 是否句末加分号
  "prettier.trailingComma": "none", // 最后一个对象元素加逗号
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned"
  },
  // 以下为stylus配置
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": true, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "javascript.updateImportsOnFileMove.enabled": "never",
  "window.zoomLevel": 0,
  "gitlens.advanced.messages": {
    "suppressFileNotUnderSourceControlWarning": true
  },
  "tabnine.experimentalAutoImports": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#00000090",
    "editor.lineHighlightBorder": "#ffffff30"
  },
  "explorer.confirmDragAndDrop": false,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "mssql.connections": [
    {
      "server": "{{put-server-name-here}}",
      "database": "{{put-database-name-here}}",
      "user": "{{put-username-here}}",
      "password": "{{put-password-here}}"
    }
  ], 
  // "python.languageServer": "Pylance", // 解决单击@无法跳转的问题
  "editor.formatOnSave": false,
  "files.autoSave": "afterDelay" // #值设置为true时，每次保存的时候自动格式化；
}

vscode使用指南

1.vscode介绍

2. vscode快捷键

3.1 mac使用code .命令打开VSCode

3.2 当顶部菜单栏隐藏时候， 如何调出来

3.3 vscode找到全局配置文件settings.json