如何轻松设置VSCode编辑器

安装下载

https://code.visualstudio.com/

设置方式

方式一 (手动点击设置)： 文件 -> 首选项 -> 设置
方式二 (代码设置)：Ctrl+Shift+P输入Preferences: Open Settings (JSON)
打开的setting.json即为配置文件

普通配置

1、自动保存：文件 -> 自动保存
其他设置

// 设置Tab空格数
"editor.tabSize": 2,

扩展配置

插件推荐

Auto Complete Tag ： 自动补全
Vetur : vue高亮语法
Bracket Pair Colorizer2 : 颜色区分括号
Open in browser ： 打开默认浏览器

1、设置中文

1、安装扩展Chinese (Simplified) Language Pack for Visual Studio Code
2、使用快捷键组合Ctrl+Shift+p，在搜索框中输入或选择“Configure Display Language”，点击确定
3、在显示的en，zh-cn中选择zh-cn，接下来选择重启就好了。

2、设置Emmet

打开vscode内置的emmet

"emmet.triggerExpansionOnTab": true

问题：emmet会和vscode自带的智能提示冲突
解决：
方式一：在按下emmet快捷键(Tab)的时候先按ESC，再按快捷键。
方式二：Ctrl+Shift+P输入Preferences: Open Keyboard Shortcuts (JSON)
打开keybindings.json文件后，在数组中加入以下配置

  { 
    "key": "enter", 
    "command": "acceptSelectedSuggestion",
    "when": "editorTextFocus && suggestWidgetVisible" 
  },
  { 
      "key": "tab",
      "command": "editor.emmet.action.expandAbbreviation",
      "when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorHasSelection && !editorReadonly && !editorTabMovesFocus" 
  }

3、ts

"javascript.implicitProjectConfig.experimentalDecorators": true

快捷键

Ctrl + F ： 查找
Ctrl + H ： 替换
Ctrl + / ： 注释
Ctrl + B ： 隐藏显示左边工具栏
Ctrl + ~ ： 隐藏显示控制台终端
Ctrl + Shift + N : 新建一个窗口
Shift + Alt + F ： 代码格式化
ctrl + ( + / – ) ： 字体放大/缩小

网站导航

网站导航