安装

官网： https://code.visualstudio.com/

目录结构说明

文件资源管理器 (ctrl+shift+E)
全局搜索
windows: ctrl+f 文件内搜索，ctrl+shift+f 全局搜索
mac: command+f 文件内搜索，command+shift+f 全局搜索
git 管理
debug 调试
插件管理

常用快捷

mac电脑是cmd，windows是ctrl

ctrl + ~：打开和关闭终端
cmd+shift+P(win: ctrl+shift+P): 打开终端命令行
cmd+shift+f: 全局搜索, cmd+f: 文件内搜索
cmd+n: 新建文件
cmd+o: 打开文件，慎用
cmd+p: 打开并跳转到的某个文件
cmd+/: 注释
ctrl+d: 将选定的字符移动到下一个匹配字符串上，在批量修改用时很香

基本配制项

通过settings.json文件配置，基本上，所有的vscode的配置，都可以在这里设置的
code---preference---settings---User settings:

image.png

{
  // 设置字体大小
  "editor.fontSize": 14,
  // 将tab缩进改为2
  "editor.tabSize": 2,
  // git的路径（windows）
  "git.path": "D:\\Git\\bin"
}

UI操作界面去配置

vscode 双击选择-连接词
file-preference-settings中，搜索wordSeparators，将分隔词-去掉即可
image.png

主题

code---preference---Color Theme

代码片段

command + shift + p
输入 snippets,选择 Preferences: Configure User Snippets
选择新建 New Global Snippets file，自定义命名文件

// ct.code-snippets

// 代码片段的名称
  "Comment": {
    // 影响范围,不写的话默认全局通用
    "scope": "javascript,typescript",
    // 快捷字段
    "prefix": "ct",
    // 快捷字段对应的代码片段
    "body": ["/*", "*", "*/"],
    // 描述
    "description": "add commnet"
  }

常用的 vue 代码片段：

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "    <div>\n",
      "    </div>",
      "</template>\n",
      "<script>",
      "export default {",
      "    props: {\n",
      "    },",
      "    data() {",
      "        return {\n",
      "        };",
      "    },",
      "    computed: {\n",
      "    },",
      "    created() {\n",
      "    },",
      "    mounted() {\n",
      "    },",
      "    watch: {\n",
      "    },",
      "    methods: {\n",
      "    },",
      "    components: {\n",
      "    },",
      "};",
      "</script>\n",
      "<style scoped lang=\"${1:scss}\">\n",
      "</style>\n"
    ],
    "description": "Create vue template"
  }
}

更多片段可参考：https://www.jianshu.com/p/bec1e0f04171

常用插件推荐

高亮类

vscode-icons: 将文件目录变成视图文件树，让左边的文件树有对应图标区分
Bracket Pair Colorizer: 将括号以颜色区分，便于区分代码块
vetur：高亮 vue 语法, vue 必备（vue3可以换成使用volar替代vetur）
DotEnv：高亮.env文件
color highlight: 自动高亮所写的颜色，比如：#FFFFFF,会自动增加白色背景色
Trailing Spaces: 高亮句尾后的空格

格式化

eslint
Prettier: 严格化代码

功能类

css peek: 可以根据样式类名跳转到定义的地方
auto close tag: 自动补齐 html的关闭标签
auto rename tag: 自动重命名标签对
code runner: 可以直接运行js等文件
Live Server：快速启一个本地服务器
image preview: 悬停图片链接时，预览图片
Auto Import - ES6, TS, JSX, TSX：自动导入文件，比如使用另一个方法或变量，会自动生成import语句
document this: 安插这个插件后，写方法时，可以自动添加注释，比如写个function test(a, b)，在方法上方写/***/就会自动生成方法注释
vscode-fileheader、koroFileHeader：生成文件备注，谁改都知道
npm Intellisense：npm模块提示，不记得怎么写的模块名，会有提示
Wrap Console Log Lite：点击某变量，直接生成console.log("varName", var)

关于插件使用的一些坑

coderunner运行js
- 不识别中文路径
- node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。（这个要先排除node有没有安装好的问题，在终端运行node -v，有版本号就是全局安装是ok的）

// settings.json
{
    // 中文路径加这句
    "code-runner.runInTerminal": true,
    "code-runner.executorMap": {
        // 不识别node，加这句，这是windows的写法
        "javascript": "D:\\nodejs\\node.exe",
    }
}

设置tab size为2，但是不生效
点击下图的“Editor: Detect Indentation”，进去后，将detect Indentation的勾选取消掉，这个选项会检测你文件之前的默认tab格数，然后自动给你设置成一样的

vscode-settings
之前不知道点到哪了，左侧的菜单栏资源树不见了

vscode.png
解决：使用快捷ctrl + shift + E就可以显示出来了

使用nodemon启动脚本失败
nodemon : 无法加载文件 C:\Users\Doubl\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。
这是因为你电脑禁止运行脚本，解决办法：
管理员身份打开powerShell，输入set-ExecutionPolicy RemoteSigned
image.png