VS CODE常用配置以及快捷键

系列文章目录

---

前言

工欲善其事，必先利其器。想要优雅且高效的写代码，那必须先把工具给配置好，下面会介绍VS CODE常用的一些配置。

---

一、常用配置

1.设置成中文

vscode默认的语言是英文，对于英文不好的小伙伴可能不太友好。简单几步教大家如何将vscode设置成中文。

1. 按快捷键“Ctrl+Shift+P”。
2. 在“vscode”顶部会出现一个搜索框。
3. 输入“configure language”，然后回车。
4. “vscode”里面就会打开一个语言配置文件。
5. 将“en-us”修改成“zh-cn”。
6. 按“Ctrl+S”保存设置。
7. 关闭“vscode”，再次打开就可以看到中文界面了。

当然你也可以使用插件chinese

2.设置字体大小

打开设置：文件–首选项–设置
editor.fontsize用来设置字体大小，比如把字体大小设为14，editor.fontsize : 14。

3.设置自动保存

files.autoSave这个属性是表示文件是否进行自动保存，
推荐设置为onFocusChange——文件焦点变化时自动保存。

4.习惯性推荐

editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，
推荐设置为on;

5.设置导入顺序

editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，
推荐设置为true,即"editor.codeActionsOnSave": { “source.organizeImports”: true }；

6.设置代码行号

editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

7.设置自动格式

editor.formatOnSave属性设置保存时是否自动格式化代码
推荐设置为false

8.禁用自动更新

文件 > 首选项 > 设置 > 搜索update mode ,改为none

9.开启代码提示

设置 > 搜索prevent ，取消勾选

二、json文件配置

文件>首选项>设置 > 搜索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,
  "window.zoomLevel": 1,
  "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
      }
  }
}

三、常用快捷键

编写代码中快捷键会让我们高效工作，下面罗列了一些日常使用频率最高的快捷键，以Windows为主：

• Alt + 鼠标左键。 选中多行，一起输入
• ctrl+c —— 复制当前行
• ctrl+shift+u —— 向上复制行
• ctrl+shift+d —— 向下复制行
• ctrl+x —— 剪切当前行
• ctrl+shift+k —— 删除当前行
• ctrl+k ctrl+k ——删除光标右侧所有内容
• ctrl+k ctrl+t ——删除光标左侧所有内容
• ctrl+delete ——
  删除光标右侧字符（**注：1.此为删除字符即一个单词，而不是一个字母。2.若光标右侧为空格，即将当前行的下一行合并到当前行，实际就是去掉了这两行的空格）
• ctrl+backspace —— 删除光标左侧字符（同上）
• ctrl+shift+enter —— 向上插入新行
• ctrl+enter —— 向下插入新行
• ctrl+/ —— 行注释 （//）
• ctrl+shift+/ —— 块注释 (/**/)
• alt+上箭头 —— 向上移动行
• alt+下箭头 —— 向下移动行
• ctrl+] —— 将当前行向右移动一个tab
• ctrl+[ —— 将当前行向左移动一个tab
• f6 —— 切换活动栏可见性（最左侧区域）
• ctrl+b 切换文件目录区域可见性
• ctrl+shift+p —— 打开命令窗口
• shift+alt+p —— 打开项目列表（前提安装Project Manager插件）
• ctrl+w —— 关闭当前窗口
• f11 —— 全屏
• alt+shift+2 —— 拆分编辑器
• alt+shift+1 ——将拆分的编辑器改变布局（水平/垂直）
• ctrl+shift+n —— 新建窗口
• ctrl+shift+` —— 新建命令行终端
• ctrl+n —— 新建文件
• ctrl+shift+x —— 打开扩展

专门记述快捷键的官方文档