vscode
ESLint插件在VSCode中不提示、不生效
VSCode深度配置 - settings.json
vscode内置插件
vscode必装插件
本文档使用 MrDoc 发布
-
+
首页
VSCode深度配置 - settings.json
看完本文，你将 - 让你的 VSCode 打字流畅度提升 114 倍 - 不同工程使用各自的项目配置、插件 - 更加美观的自定义窗口 - 更加智能代码提示、替换 - 更加清晰的代码块结构，能一目了然地看出嵌套关系 - 删掉那些标题党推荐的无用插件，使用 VSCode 自带的功能 - 自定义代码颜色，VSCode 主题 # 现况概要 我每天逛各种社区，看到的关于 VSCode 的文章，99.999% 都是 **「插件推荐」** 而这些插件，说真的作用不大，很多都是 VSCode 内置的功能，而且同质化严重 他们也就知道那几个插件，没什么可说的 于是乎，我只能自己一点点的摸索 VSCode 最佳配置实践 今天有空就写一点吧 ### VSCode专栏系列： https://juejin.cn/column/7368071052448022562 # 安装 没错，这也要讲，不是我水，因为有些时候，你下载速度很慢 所以你要使用镜像下载 详细教程搜 **「VSCode镜像下载」** 注意，下载最新版的，因为我讲的配置，很多是新特性 目前我的版本是 `1.89.0` 像 VSCode 这种良心的应用，无脑装最新版即可 # 配置 第一步下载中文插件，这个大家应该都会，搜：**「Chinese (Simplified) (简体中文)」** 第二步，打开设置，快捷键 Ctrl + , 第三步，打开 `setting.json`  ## 丝滑打字配置 这四行配置加入后，你马上会给我点赞 你将体会到如同潺潺流水，流过你手的感觉 这是全新的体验，是绝大多数编辑器不具备的体验 ```json { "editor.smoothScrolling": true, "editor.cursorBlinking": "expand", "editor.cursorSmoothCaretAnimation": "on", "workbench.list.smoothScrolling": true, } ``` ## 鼠标控制大小 直接上图，按下 Ctrl + 鼠标滚轮  ```json { "editor.mouseWheelZoom": true, } ``` ## 彩虹括号与作用域块线条提示 一堆插件推荐的文章，天天叫你装插件实现，明明自带的功能 ```json { "editor.guides.bracketPairs": true, "editor.bracketPairColorization.enabled": true, } ```  ## 更加智能的代码提示 ```json { // 控制活动代码段是否阻止快速建议 "editor.suggest.snippetsPreventQuickSuggestions": false, // 除了 `Tab` 键以外， `Enter` 键是否同样可以接受建议 // 这能减少“插入新行”和“接受建议”命令之间的歧义 "editor.acceptSuggestionOnEnter": "smart", // 代码补全列表中，优先选择最近的建议 "editor.suggestSelection": "recentlyUsedByPrefix", } ``` 有一种场景，比如你在输入代码，输到一般，你突然想要代码补全 于是你调出建议，但是补全的代码会直接插入，不会覆盖你的输入 这时代码就会多一点内容出来，那么就报错了 这个也是可以配置的 ```josn { "editor.suggest.insertMode": "replace", } ``` ## 自动补全括号、引号 ```josn { "editor.autoClosingBrackets": "beforeWhitespace", "editor.autoClosingDelete": "always", "editor.autoClosingOvertype": "always", "editor.autoClosingQuotes": "beforeWhitespace", } ``` ## 关闭缩进猜测 如果你打开一个文件，他的缩进是 2，而你的配置是 4 那么你格式化时，他很可能不按你的配置来 ```json { // 关闭缩进猜测 "editor.detectIndentation": false, "editor.tabSize": 4, } ``` ## 美化窗口 window 默认窗口如下，丑陋至极  配置后使用 VSCode 自己的窗口  ```json { "window.dialogStyle": "custom", } ``` ## 自动换行和行高 设置了这个，就不用横向滚动了 ```json { "editor.wordWrap": "on", "editor.lineHeight": 1.5, } ``` ## 紧凑的文件夹模式 ```json { // 文件夹紧凑模式 "explorer.compactFolders": true, "notebook.compactView": true, } ``` 设置后会把没用的东西折叠，利于啰嗦的 Java 项目  ## 格式化自动删分号 无意义的分号，不加为妙。现代编程语言都可以不用分号 ```json json{ "javascript.format.semicolons": "remove", "typescript.format.semicolons": "remove", } ``` ## Typescript 语言设置中文  ```json { "typescript.locale": "zh-CN", } ``` ## 枚举类型数值提示  ```json { "typescript.inlayHints.enumMemberValues.enabled": true, } ``` ## JS 获得所有类型推导 如果你全开，那就满屏幕都是类型  在设置里搜 `inlayHints`即可，你自行选择 我的配置如下 ```json { // 类型提示 "javascript.inlayHints.enumMemberValues.enabled": true, "javascript.inlayHints.functionLikeReturnTypes.enabled": false, "javascript.inlayHints.parameterNames.enabled": "none", "typescript.inlayHints.enumMemberValues.enabled": true, "typescript.preferences.preferTypeOnlyAutoImports": true, "typescript.updateImportsOnFileMove.enabled": "always", "typescript.preferences.includePackageJsonAutoImports": "on", "javascript.updateImportsOnFileMove.enabled": "always", "javascript.preferences.quoteStyle": "single", "typescript.preferences.quoteStyle": "single", } ``` ## TS 导入、重命名、补全自动更新相关引用 ```json { "typescript.preferences.preferTypeOnlyAutoImports": true, "typescript.preferences.includePackageJsonAutoImports": "on", "javascript.suggest.autoImports": true, "typescript.suggest.autoImports": true, "vue.updateImportsOnFileMove.enabled": true, } ``` ## Vue 自动补全 .value 和缺失属性提醒 ```json { "vue.inlayHints.missingProps": true, "vue.autoInsert.dotValue": true, } ``` ## 关闭开屏 VSCode 的亲切问候 ```json { "workbench.startupEditor": "none", } ``` ## 自动猜测文本编码 ```json { "files.autoGuessEncoding": true, } ``` ## 保存自动删除末尾空格 这个想开就开，我不开，因为影响 md 格式 ```json { "files.trimTrailingWhitespace": false, } ``` ## 搜索吸附目录 新版特性，你要更新噢  ```json { "search.searchEditor.singleClickBehaviour": "peekDefinition", } ``` ## 父级自动吸附置顶  ```json { "editor.stickyScroll.enabled": true, } ``` ## 终端代码补全 实验性配置  ```json { "terminal.integrated.shellIntegration.suggestEnabled": true, } ``` ## 终端命令置顶 图我就不放了，就是吸顶 ```json { "terminal.integrated.stickyScroll.enabled": true } ``` ## index 替换成目录名 在打开很多文件时，能区分出是谁 ```json { // index 替换成 目录名 "workbench.editor.customLabels.patterns": { "**/index.vue": "${dirname}.vue", "**/index.js": "${dirname}.js", "**/index.ts": "${dirname}.ts", "**/index.jsx": "${dirname}.jsx", "**/index.tsx": "${dirname}.tsx" }, } ``` ## 行内样式代码补全 比如你在写 style 字符串时，能有代码提示 ```json { // 行内样式代码补全 "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, } ``` ## 双击选中被截断字符 再也不用担心双击被下滑线截断了 ```json { "editor.wordSeparators": "`~!@%^&*()=+[{]}\\|;:'\",.<>/?（），。；：", } ``` ## 折行缩进策略和关闭右侧代码地图 关闭右侧代码地图大家自己选择，反正我觉得碍眼 ```json { "editor.minimap.enabled": false, "editor.foldingStrategy": "indentation", } ``` ## 关闭搜索中跟踪符号链接 提高搜索性能 ```json { "search.followSymlinks": false, } ``` ## 更新模式选择 我要手动的 ```json { "update.mode": "manual", } ``` ## 搜索排除目录 提高性能，需要重启生效 ```json { "search.exclude": { "**/node_modules": true, "**/pnpm-lock.yaml": true, "**/package-lock.json": true, "**/.DS_Store": true, "**/.git": true, "**/.gitignore": true, "**/.idea": true, "**/.svn": true, "**/.vscode": true, "**/build": true, "**/dist": true, "**/tmp": true, "**/yarn.lock": true }, } ``` ## 文件关联 比如小程序中的 .wxss 这种文件，会把它作为css文件来处理 提供对应的 css 的语法提示 css 的格式化等 jsonc意思是能写注释的 JSON ```json { "files.associations": { "*.wxss": "css", "*.wxml": "html", "*.svg": "html", "*.xml": "html", "*.wxs": "javascript", // json注释 "*.cjson": "jsonc", "*.json": "jsonc" }, } ``` ## window 相对路径复制使用 `/` 右键文件复制路径，当你导入东西时有用 默认 window 反斜杠 ```json { "explorer.copyRelativePathSeparator": "/", } ``` # 不同项目使用不同配置 方式很多，我最推荐这个  # 代码自定义配色 这个如果你有强烈需求，我建议你写插件 因为配置文件的颜色，在 VSCode 上，会时不时闪烁 非常影响体验，你必须输入文件才有效 配置很多，我放在上 git 上 上面的配置也有，我把个人用的配置删了 如果和你的配置冲突，自行检查 https://gitee.com/cjl2385/dig-for-gold/tree/master/VSCode > 原文地址 https://mp.weixin.qq.com/s/o-h3JU7NRvgKGowaPpyK_A
admin
2024年7月2日 11:50
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码