发布于 2022-04-16, 更新于 2025-05-23
VSCode 用于前端及 Node.js 开发功能已经足够，在 react 或 vue 的 ts 项目内都能做到较好的提示和跳转了，再配合设置和插件，整体开发体验不错。
而且前端及 Node.js 生态中的很多包都是优先更新到 VSCode，只有使用 VSCode 才能拥抱最新的生态。
在设置面板，有两个 tab 选项：
~ 目录，所有项目生效同样的，如果需要指定某插件本项目不使用，或仅本项目使用，在插件中选择 启用（工作区）即可。
Format On Save 即可，适用于全部文件"editor.codeActionsOnSave": {
"source.fixAll": "always"
}
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
}
// .vscode/settings.json
{
"npm.packageManager": "pnpm",
"eslint.workingDirectories": [
{ "mode": "auto" } // 自动检测
],
}
避免开启新目录、历史项目时直接把当前项目覆盖掉。
设置 Open Folders In New Window 为 on
避免错按退出按钮，导致文件未保存、项目需重新启动等。
设置 Window: Confirm Before Close 为 always
vscode 中执行 shift+command+p ，打开命令面板，键入shell，选择 “在PATH中安装code命令”，即可安装到命令行中使用。
搜索设置下 Enable Run From Folder ，勾选；
然后到 EXPLORER 中右上角打开，选中 NPM Scripts，即可看到 npm 指令已自动添加到面板里。
可将该面板拖出来，拖到跟 EXPLORER 同级，方便访问。
搜索 Script Explorer Action 设置，选择 run ，点击即可启动命令，更方便启动。
重启命令的方式：重新在 NPM Scripts 面板运行该命令即可，如果已运行它会提示重启。
默认窗口会显示文件名等信息，文件名比较长，在 Windows 中切换窗口，几乎就看不出哪个项目，很难找。
这就可以在设置中搜索 window.title ，将它改为 ${rootName} ，windows 可以设置为 ${dirty}${rootName} ，这样直接显示工作区的名字，如果是单目录打开它会是项目的名字。
比如选择 css 时，总是希望能带上 - 一起选择，可以搜索分词符设置 "editor.wordSeparators" ，将 - 去掉即可。
可设置到工作区或项目，指定项目使用。
可在设置中点击齿轮，很方便地重置此设置。
VSCode 对别名 @ 的解析，是通过 tsconfig.json 或 jsconfig.json 来解析的。如果是 js 项目，项目内需建立一个 jsconfig.json 文件：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
未启用 ts 情况下，即使使用了 jsconfig 文件，体验还是不太友好，需要进行配置。
别名路径跳转 插件，未启用 tsconfig 的情况下，支持 @ 别名跳转"gutterpreview.paths": { "@": "./src" },"path-intellisense.mappings": { "@": "${workspaceRoot}/src" }, 使提示更完善，比如支持图片路径提示出现非预期的提示，或者提示超出了
Editor: Snippet Suggestions 设置的值首先要在设置中，将 Window: Native Tabs 勾选。
需要合并时，在 Window 菜单勾选 Merge All Window。
全局正则搜索，带括号时，在替换时使用 $1 可代表匹配的第一个括号内容，以此类推。
如 [0001 格式的题目链接标题，在前面批量加个内容：
\[(\d\d\d\d)[leetcode $1在 Perferences 中选择 Configure User Snippets，然后在弹窗选择需要设置 snippets 的语言。
根据模板样式进行设置即可。 $1 指光标出现的第一个位置，$2 指按 Tab 键切换后光标出现的第二个位置。
需要说明，光标处于 $1 这种位置时，是无法使用代码提示，这些占位符只适合值输入的场景。
可指定VSCode 内的终端特定的环境变量，就不用到全局变量中设置了，如果工作流全都集中在 VSCode ，这样更方便。
又或者有时候 VSCode 读取不到某些变量，比如 NODE_OPTIONS ，可能是 VSCode 有些版本自身会使用这个变量，产生冲突之类的，这时就可以通过终端环境变量来设置了。
设置方式：设置 - 功能 - 终端 - Integrated › Env: Linux
安装的插件比较多，会使得 VSCode 变慢，而且有时候某些插件会与当前的想要的操作冲突。这时希望能在项目中禁用插件。
可以到插件界面，Disable 按钮有一个下拉选项，选择 Disable (Workspace)，即可在当前项目禁用插件了。虽然这里说的是工作区，但直接打开目录时是对项目生效的。
也可以设置一个多目录工作区，可以定制各个方面的环境，包括单独设置插件是否启用。
可以创建 .vscode 目录进行项目内的设置：
.code-snippets 文件。插件可按流行度、最近更新等排序，插件的命令在 command palette 中可以搜到。
"code-runner.runInTerminal": true 在终端运行"code-runner.ignoreSelection": true 忽略选中，执行整个文件"code-runner.saveFileBeforeRun": true 运行前保存文件"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
"editor.quickSuggestions": {
"strings": true
},
Vue - Official ，vue 2 项目使用 Vetur ，不要混用。默认关闭，工作区开启。CSS Navigation 安装后支持 vue 单文件组件内样式跳转uni-helper, 支持 uniapp 开发的拓展包，按需启用@xxx 在文件中设置变量，可通过 rest-client.environmentVariables.$shared 设置全局变量，也通过项目级设置变量在目录中设置变量。编辑器本身已经具备较强的markdown功能： https://code.visualstudio.com/Docs/languages/markdown
再配合一些设置和插件，VSCode 整体的 Markdown 编辑体验已经比较不错了。
// 设置换行符在 Markdown 预览中换行
"markdown.preview.breaks": true,
// 启用突出显示当前文档中的链接匹配项
"markdown.occurrencesHighlight.enabled": true,
// 重命名/移动工作区中的文件时，请尝试更新 Markdown 文件中的链接
"markdown.updateLinksOnFileMove.enabled": "always",
// 定义通过放置或粘贴操作复制或创建的文件应位于哪个位置
"markdown.copyFiles.destination": {
"/**/*": "images/${documentBaseName}/"
},
"[markdown]": {
// 设置语法提示位置于底部，写项目内链接时，避免提示覆盖在文件路径提示中，不好找
"editor.snippetSuggestions": "bottom",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
[链接文字](/notes/test.md)；文件名有空格的，可以使用 <> 扩住，如 [链接文字](</notes/1. test.md>)