持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

vscode主界面

左边工具栏 + 侧边工具栏对应内容 + 右边代码编辑器 + 底部提示信息

工具栏含有资源管理器、搜索、源代码管理、运行和调试、扩展等

资源管理器是我们要做的项目的一个文件目录，这里我们可以做代码切分，同时展示两个文件

搜索：在我们修改旧代码的时候经常用到，注意：一般需要设置一个搜索范围来提高我们的搜索效率；另外有一个隐藏的搜索方式是聚焦在资源管理器中然后直接输入文字就能匹配到文件名

源代码管理：可以不使用任何git可视化工具就能够快速地提交代码，当合并产生冲突的时候特别好用

运行和调试：一般用来调试node代码，我们写的前端应用一般不能直接执行所以无法直接进行调试，但是可以用来测试我们写的某个函数，首先打开“Javascript debug terminal”，然后在里面输入命令“node index.js”,这样程序就会进入我们的断点了

扩展（这里直接罗列我目前在用的）：

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
Add jsdoc comments
Auto Close Tag
Auto Rename Tag
Beautify css/sass/scss/less
VSCode CSS Modules
Error Lens
ESLint
GitLens — Git supercharged
JavaScript and TypeScript Nightly
Live Server
Material Icon Theme
Prettier - Code formatter
REST Client
Vetur
Vue VSCode Snippets
ES7+ React/Redux/React-Native snippets

vscode配置

全局配置还是局部配置

刚开始我会全部使用全局配置去进行格式化，如果遇到了其他的项目就往上面叠加格式化配置，到后面越来越难以维护，而且不知道那些规则对那些项目起了作用

后来经过师兄的指点才知道原来vscode是有局部配置的，局部配置优先级大于全局配置，这样就好了，有一些不变的配置可以放在全局，另外一些可以在项目下

哪些配置可以放在全局：

编辑器样式相关，例如"workbench.iconTheme": "material-icon-theme"
插件的统一配置，例如"github.copilot.enable": { "*": true, "yaml": false, "plaintext": false, "markdown": true }
工具栏相关配置，例如"workbench.editor.enablePreview": false","git.autorefresh": false

基本上其他配置都应该在项目目录下配置，不应该污染全局配置，特别是和格式化有关的配置一定要在项目下，并且随项目提交上去

格式化

格式化怎么不起作用？怎么没有按照eslint的规则进行格式化？

要解答这个问题我们先来看看vscode中有几种格式化方式：vscode自带的js格式化、prettier格式化、eslint格式化

vscode有多种格式化触发方式，其中最常用的是快捷键格式化和保存时格式化，这样我们可以同时配置两种格式化方式，保存代码时使用eslint格式化，按下快捷键时用prettier格式化，配置如下：

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

这样我们command+s保存代码时能够触发eslint格式化，解答了第二个问题之后，我们来看第一个问题，如果是在prettier下的格式化不起作用可以打开控制台，切换到输出，右边选择prettier，这里我们可以看到执行了格式化时的报错信息，一般prettier格式化不起作用一般是因为有报错：

那么eslint格式化不起作用可能有以下原因：eslint配置不当、没有安装eslint插件

还要注意一点：editorconfig会覆盖掉prettier的配置，因此慎用editorconfig

用户代码片段

这是提升我们编码速度的一大利器，我们可以把常用的代码片段放到里面，需要用的时候直接敲击快捷键就可以了，具体位置在：

命令面板

有一些插件的启动需要使用命令，这就涉及到命令面板，我们可以使用command+shift+p打开命令面板，这里也可以进行代码格式化，甚至可以选择到所有的格式化方式

帮助

vscode卡顿了怎么办？我们可以通过帮助面板查看问题：

打开进程管理器之后可以查看CPU和内存占用情况，看是否有内存泄露的情况

另外可以打开开发者工具查看控制台是否有报错：

熟练使用vscode

vscode主界面

vscode配置

全局配置还是局部配置

格式化

用户代码片段

命令面板

帮助