VScode配置
title: VS code配置 id: 286047f78f94fd1eb9f87e168816089a tags: [] date: 2000/01/01 00:00:00 updated: 2025/03/25 11:36:24 isPublic: true --#|[分隔]|#--
VS code配置
安装VS code后，首先进行的就是设置软件，安装插件等等，下面就是我自己安装的插件和设置项。
常用插件
以下插件是我这里使用的所有插件，其中
Autoprefixer、Easy Sass和scss-to-css和安装完后就禁用，因为我大部分项目是需要使用webpack编译，不需要这两个插件，只有在开发静态项目，不使用自动构建工具时，才需要使用他们。
Chinese (Simplified) Language Pack for Visual Studio Code
Class autocomplete for HTML
Debugger for Chrome
ESLint
filesize
FreeMarker
HTML Snippets
HTMLHint
Live Server
Path Intellisense
Vetur
View In Browser
Todo Tree：在代码中写下
// TODO 其他注释说明，侧边栏的这个插件栏就会展示这个未完成的事项。Search node_modules：作者为[Jason Nutter]的这个插件，可以使用快捷键「command + k, command + n」，直接从 node_modules 文件夹中搜索并打开文件，解决了当需要查看依赖源码，但从 node_modules 查找时不容易找到的痛点。
any-rule：内置了大量常用格式的正则，可以直接使用其网页版搜索复制正则：https://any86.github.io/any-rule/
Format Files 批量格式化，安装后，在资源管理器的栏目中右键，选择 Start Format Files: Workspace，就噼里啪啦开始了
Markdown-preview-enhanced 预览 md 文件的插件，vs自带 md 预览是黑色背景，感觉视觉不清晰，所以用了这款插件，据说可配置项还挺多，可搜索官网学习，自定义预览页面样式也很简单，官网教程有写，就是改
~/.mume/style.less文件。Sublime Text Keymap：Sublime 快捷键映射，自己酌情判断是否需要
Bookmarks 书签功能，查看源码时很有用
GitLens — Git supercharged 显示git提交信息和一些其他项目git信息和功能
Vue VSCode Snippets
Comment Translate框选注释自动翻译(可能需要在插件选项设置一下，指定翻译为中文)
Bracket Pair Colorizer(选用js中的代码块的颜色标记)
minapp(微信小程序语法, 非必须)
Draw.io Integration(非必须) 这个插件可有可无，主要是让可以让 vs code 能编辑.drawio格式的流程图，有兴趣的可以查看插件官方介绍(英文) ，中文官网。Partial Diff 框选两端代码进行 diff 比较，详细用法百度或看文档。
Rust （非必须）rust 开发需要
Native Debug （非必须）rust 开发需要
键盘快捷方式自己改
三个 css 编译插件的说明
当开发静态项目时，也推荐自己使用parceljs这个构建工具，真的是零配置工具，自动支持[es6/代码压缩混淆]，只需要安装一个scss依赖，其他什么也不用做，就可以支持[scss]，如果还需要css自动补全兼容语法，就需要稍微配置一下了，这里也可以使用我搭建的parceljs搭建的静态项目脚手架，如果使用了这个脚手架，那么这三个插件就不需要了。
Autoprefixer：自动补全css兼容语法。
Easy Sass：scss自动转css。
scss-to-css：scss自动转css的同时，也自动补全css兼容语法，但需要两个额外的配置。
手动全局安装node-sass，否则不生效。
在项目根目录，添加一个自动补全css的浏览器配置文件，名称
.scssrc，内容如下：
{ "browsers": ["ie > 9", "iOS > 8", "Android >= 4.4", "ff > 38", "Chrome > 38"] }以上三个，同时只能使用一个，同时使用也行，但他们三个会各自为战，不能互相配合，这里推荐只使用scss-to-css，一步到位。
登录 github 同步配置
vs code 支持同步配置，只需点击左下角配置，选择打开设置同步：
随后让选择进行同步的模块，可见几乎就是所有常用配置了：
最后，选择同步时使用的平台，暂时只提供了以下两个：
选择后，会自动打开浏览器，打开对应平台的网站进行授权，如果浏览器已经登录了，那直接点击授权按钮即可，否则就需要先用浏览器登录一下了。
让 vs code 识别代码中的别名@
使用 vs code 开发react、vue等项目时，自己经常会使用脚手架的别名配置，让 @ 等价于 src/，这样引入文件资源模块时，可以以绝对路径的写法引入文件资源：
// 某js中引入文件时，有了两种写法
// 写法一，原本的写法，需要使用相对路径
import Top from '../../components/Top'
// 写法二，使用别名 @ 后，可以使用绝对路径的写法
import Top from '@/components/Top'但这样使用有两个问题，下面附上两个缺点的解决方案。
写路径时的智能提示
本来使用了 Path Intellisense 这个插件（我记得是插件的功能），再引入文件写文件路径时，输入斜杠就会自动展示这个文件夹下面的所有文件，以供用户快速选择输入。
但使用了 @ 后，这个插件不认识了，不知道这个符号代表的是哪个文件夹，无法自动展示了。
解决方法：
同样需要 Path Intellisense 这个插件(又名扩展)，插件安装好后，右键插件选择 扩展设置，设置界面中找到 Path-intellisense:Mappings 这项设置，点击下面的 在 settings.json 中编辑 按钮。
点击后，会发现跳转到的 vs code 的系统设置的 settings.json 文件中，并自动添加了此插件的配置对象，我们需要修改为以下：
{
// ...上面是其他配置们
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src",
}
}然后，再使用写法二时，就又会出现我们想要的文件夹下的展示了。
option+单击跳转到此文件
使用相对路径引入模块时，按住 option 点击模块或者路径时，会自动打开此文件。
但使用了 @ 后不行了，一样的不识别的问题。
而且，问题一是插件的功能，改插件配置能解决。
而这个跳转功能是 vs code 的功能，需要修改 vs code 才能解决。
解决方法：
这个方法需要在项目中添加一个配置文件，用于 vs code 读取，官方教程 https://code.visualstudio.com/docs/languages/jsconfig。
在项目根目录添加文件 jsconfig.json 文件，如果存在 tsconfig.json，那么在这个文件中修改也OK，因为 jsconfig.json 本就是 tsconfig.json 的子文件。
主要内容为：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
}有了上面这个文件，vs code 就可以认识一些自定义的别名符号了。
配置使用code启动vs code
在windows系统，可以在终端中使用code .指令，可以用vs cdoe快速打开当前目录下的项目，比较方便。
而Mac系统，则需要设置一下才能使用，mac的vs code中，使用快捷键Command + Shift + P打开命令面变，然后输入shell command，就会如下图所示出现命令提示，点击对应的「在PATH中安装“code”命令」这个操作就可以了。
其他一些配置
修改文件时卡顿提示：正在运行“文件重命名"参与者
也就是在vs code中修改了文件名称，经常会一直loading卡主，导致需要等半天，见截图：
可以通过修改设置解决，设置中搜索「参与者」，把超时设置为0，已禁用参与者，这样再修改文件，瞬间完成，不过相关的引用这个文件的其他位置，需要自己再手动去改名称，这个我认为是必须的，因为文件名称改了，import 使用时，形参名称正常也是要对应的修改的。
配置截图：
json 设置文件
// 将设置放入此文件中以覆盖默认设置
{
// 以像素为单位控制字号。
"editor.fontSize": 14,
"editor.hover.delay": 1000, // 悬浮提示的出现的前置时间
// 控制编辑器是否应自动设置粘贴内容的格式。格式化程序必须可用并且能设置文档中某一范围的格式。
"editor.formatOnPaste": false,
// 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
"editor.tabSize": 2,
// 控制折行的缩进。可以是“none”、“same”或“indent”。
"editor.wrappingIndent": "indent",
// 控制折行方式。可以选择： - “off” （禁用折行）， - “on” （视区折行）， - “wordWrapColumn”（在“editor.wordWrapColumn”处折行）或 - “bounded”（在视区与“editor.wordWrapColumn”两者的较小者处折行）。
"editor.wordWrap": "off",
// 控制是否将代码段与其他建议一起显示以及它们的排序方式。
"editor.snippetSuggestions": "top",
"workbench.startupEditor": "newUntitledFile",
"editor.multiCursorModifier": "ctrlCmd",
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false
},
"git.enableSmartCommit": true,
"liveServer.settings.donotShowInfoMsg": true,
"git.autofetch": true,
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.scpt": "applescript"
},
// 把前面两种格式的文件,识别为html(主要可以自动补全)
"emmet.includeLanguages": {
"wxml": "html",
"ftl": "html",
"javascript": "javascriptreact"
},
"minapp-vscode.disableAutoConfig": true,
"editor.suggestSelection": "first",
"javascript.updateImportsOnFileMove.enabled": "never",
"editor.renderWhitespace": "none",
"editor.renderControlCharacters": false,
"diffEditor.ignoreTrimWhitespace": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "never"
},
"git.confirmSync": false,
"explorer.confirmDragAndDrop": false,
"bookmarks.saveBookmarksInProject": true,
"debug.onTaskErrors": "debugAnyway",
// 双击代码框选时，遇到下面这些字符，会停止框选(把原默认配置中的 - 去掉了)
"editor.wordSeparators": "`~!@$%^&*()=+[{]}\\|;:'\",.<>/?，。？！、【】（）‘’“”：；《》￥…「」『』·",
"workbench.editorAssociations": {
"*.pdf": "default",
"*.scpt": "default"
},
"security.workspace.trust.untrustedFiles": "open",
"liveServer.settings.CustomBrowser": "chrome",
"editor.unicodeHighlight.ambiguousCharacters": false,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"terminal.integrated.defaultProfile.osx": "zsh",
"explorer.confirmDelete": false,
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
"window.openFoldersInNewWindow": "on",
"workbench.colorTheme": "Default Dark+",
"editor.quickSuggestions": {
"strings": true
},
"settingsSync.ignoredExtensions": [],
"editor.accessibilitySupport": "off",
"window.commandCenter": false,
"workbench.layoutControl.enabled": false,
"remote.forwardOnOpen": false,
"typescript.updateImportsOnFileMove.enabled": "never",
"explorer.confirmPasteNative": false,
"update.showReleaseNotes": false,
"editor.stickyScroll.enabled": false,
"vue.server.hybridMode": "typeScriptPluginOnly",
"books.maxWords": 65,
"workbench.colorCustomizations": {
"statusBar.background": "#333333", /* 状态栏背景色 */
"statusBar.foreground": "#94b4cd", /* 状态栏前景文字颜色 */
}
}Last updated
Was this helpful?
