Skip to content
索引

vscode使用

官网下载 https://code.visualstudio.com/updates/v1_78

快捷键设置

记录个人顺手的vscode快捷键设置,vscode左下角齿轮->键盘快捷方式中设置

命令快捷键介绍
cursorWordLeftctrl+LeftArrow光标按单词左移
cursorWordRightctrl+RightArrow光标按单词右移
cursorHomePageUp光标移到行首
cursorEndPageEnd光标移到行尾
cursorWordLeftSelectctrl+shift+LeftArrow向左选择单词
cursorWordRightSelectctrl+shift+RightArrow向右选择单词
editor.action.copyLinesDownActionctrl+DownArrow向下复制行
editor.action.triggerSuggestctrl+enter触发建议
editor.action.showHoverctrl+h显示悬停
workbench.action.toggleActivityBarVisibilityctrl+shift+m视图: 切换活动栏可见性
workbench.action.toggleSidebarVisibilityctrl+shift+s视图: 切换侧边栏可见性
workbench.action.focusLeftGroupctrl+q视图: 聚焦到左侧编辑器组
workbench.action.focusRightGroupctrl+e视图: 聚焦到右侧编辑器组
workbench.action.closeActiveEditorctrl+d视图: 关闭编辑器
workbench.action.closeAllEditorsctrl+shift+d视图: 关闭所有编辑器
workbench.action.previousEditorctrl+1视图: 打开上一个编辑器
workbench.action.nextEditorctrl+3视图: 打开下一个编辑器
workbench.action.splitEditorRightctrl+k视图: 向右拆分编辑器
deleteWordLeftctrl+backpace删除左侧单词
deleteWordRightctrl+delete删除右侧单词
selectNextSuggestionDownArrow循环选择提示列表
workbench.action.quickOpenctrl+shift+o快速搜索打开文件

选中多个文本

alt+鼠标左键

搜索node_modules包

ctrl+0 聚焦侧边栏

直接输入想要查找的npm包名

打开新文件会覆盖之前打开的文件 tab

设置->搜索enablePreview->取消勾选

或settings.json中加入

json
 "workbench.editor.enablePreview": false
 "workbench.editor.enablePreview": false

清除空行

vscode中ctrl+f 搜索,选择使用正则表达式

bash
^\s*(?=\r?$)\n
^\s*(?=\r?$)\n

关闭受限模式

设置->搜索security.workspace.trust->取消勾选启用工作区信任

vscode识别路径别名如@

项目根目录新建jsconfig.json,vscode读取该json文件中内容,来拓展默认配置,以下代码配置路径别名

需要重启vscode才能生效

json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
    "exclude":["node_modules","dist"]
  }
}
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
    "exclude":["node_modules","dist"]
  }
}

settings.json

{
    "explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
    "explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认
    "explorer.compactFolders": false, // >方式文件树
    "emmet.includeLanguages": {
      "wxml": "html",
      "javascript": "javascriptreact",
      "vue-html": ""
    },
    "javascript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格
    "typescript.updateImportsOnFileMove.enabled": "always", // 每次保存自动格式化
    "editor.formatOnType": false, // 控制编辑器在键入一行后是否自动格式化该行
    "editor.guides.bracketPairsHorizontal": true, // 输入一个括号自动补全
    "editor.detectIndentation": false, // 字体大小
    "editor.wordWrap": "on", // 根据视区宽度折行
    "editor.tabSize": 2, // 换行默认以tab缩进 4个字符
    "editor.colorDecorators": true, // 控制编辑器是否显示内联颜色修饰器和颜色选取器
    "editor.autoClosingQuotes": "always", // 控制编辑器是否在左引号后自动插入右引号
    "editor.autoClosingBrackets": "always", // 控制编辑器是否在左括号后自动插入右括号
    "editor.autoClosingDelete": "always", // 控制在删除时编辑器是否应删除相邻的右引号或右方括号
    "editor.autoClosingOvertype": "always", // 控制编辑器是否应改写右引号或右括号
    "editor.bracketPairColorization.enabled": true, // 控制是否启用括号对着色
    "editor.guides.bracketPairs": true, // 控制是否启用括号对指南
    // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
    "files.associations": {
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript",
      "*.vue": "vue",
      "*.cshtml": "html",
      "*.dwt": "html",
      "*.tsx": "typescriptreact",
      "*.ts": "typescript"
    },
    "[css]": {
      "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.validate.enable": true,
    "http.proxyStrictSSL": false, // 控制是否根据提供的 CA 列表验证代理服务器证书
    "workbench.enableExperiments": false, // 从 Microsoft 联机服务中获取要进行的实验。
    "workbench.settings.enableNaturalLanguageSearch": false, // 在更新后显示发行说明。发行说明将从 Microsoft 联机服务中获取。
    "html-css-class-completion.HTMLLanguages": [
      "html",
      "vue",
      "razor",
      "blade",
      "handlebars",
      "twig",
      "django-html",
      "php",
      "markdown",
      "erb",
      "ejs",
      "svelte"
    ],
    "workbench.colorCustomizations": {
      "editor.lineHighlightBackground": "#49b2b93d", //修改光标所在行的背景色
      "editor.lineHighlightBorder": "#ffffff30" //修改光标所在行的边框色
    },
    // 控制如何处理在受信任的工作区中打开不受信任的文件。此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。open: 始终允许不受信任的文件引入受信任的工作区,而不显示提示。
    "security.workspace.trust.untrustedFiles": "open",
    "volar.autoCompleteRefs": true,
    "compile-hero.disable-compile-files-on-did-save-code": false,
    "compile-hero.typescriptx-output-toggle": false,
    "compile-hero.typescript-output-toggle": false,
    "compile-hero.stylus-output-toggle": false,
    "compile-hero.scss-output-toggle": false,
    "compile-hero.sass-output-toggle": false,
    "compile-hero.pug-output-toggle": false,
    "compile-hero.less-output-toggle": false,
    "compile-hero.notification-toggle": false,
    "compile-hero.javascript-output-toggle": false,
    "compile-hero.jade-output-toggle": false,
    "diffEditor.codeLens": true,
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "liveServer.settings.port": 0,
    "security.workspace.trust.banner": "always",
    "security.workspace.trust.startupPrompt": "always",
    "security.workspace.trust.enabled": false,
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "editor.semanticTokenColorCustomizations": {
      "rules": {
        // "property": "#DCDCAA",
        // "variable": "#CE70D6",
        // "parameter": "#CE70D6",
      }
    },
    "emmet.triggerExpansionOnTab": true,
    "html-css-class-completion.enableEmmetSupport": true,
    "emmet.excludeLanguages": [],
    "emmet.showSuggestionsAsSnippets": true,
    "editor.inlineSuggest.enabled": true,
    "quokka.automaticRestart": true,
    // 左侧不折叠的标签,其余标签会折叠
    "volar.splitEditors.layout.left": ["template", "script", "scriptSetup"],
    // 右侧不折叠的标签,其余标签会折叠
    "volar.splitEditors.layout.right": ["styles", "customBlocks"],
    "openInExternalApp.openMapper": [
      {
        // represent file extension name
        "extensionName": "md",
        // the external applications to open the file which extension name is html
        "apps": [
          // openCommand can be shell command or the complete executable application path
          // title will be shown in the drop list if there are several apps
          {
            "title": "typora",
            "isElectronApp": true,
            // On MacOS, openCommand should be 'Google Chrome.app'
            "openCommand": "D:\\manager\\Typora\\Typora.exe"
          }
        ]
      }
    ],
    "workbench.editorAssociations": {
      "*.md": "milkdown.editor"
    },
    "auto-rename-tag.activationOnLanguage": ["*"],
    "liveSassCompile.settings.formats": [
      {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": null,
        "savePathReplacementPairs": null
      }
    ],
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on"
    },
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.tabCompletion": "on",
    "css.completion.triggerPropertyValueCompletion": false,
    "css.lint.duplicateProperties": "warning",
    "git.enableSmartCommit": true,
    "window.commandCenter": true,
    "git.autorefresh": false,
    "git.confirmSync": false,
    "files.autoGuessEncoding": true,
    "extensions.autoCheckUpdates": false,
    "update.enableWindowsBackgroundUpdates": false,
    "settingsSync.ignoredExtensions": [],
    "github.copilot.enable": {
      "*": true,
      "yaml": false,
      "plaintext": true,
      "markdown": true
    },
    // "editor.codeActionsOnSave": {
    //   "source.fixAll.stylelint": true
    // },
    // 关闭编辑器内置样式检查(避免与stylelint冲突)
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    // 配置stylelint检查的文件类型范围
    "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
    "volar.completion.autoImportComponent": false,
    "debug.onTaskErrors": "debugAnyway",
    "settingsSync.ignoredSettings": [],
    // "workbench.editor.wrapTabs": true,
    "workbench.colorTheme": "One Dark Pro",
    "gitlens.hovers.currentLine.over": "line",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "editor.formatOnSave": true,
    "vscodeMiniBook.bookPath": "/1.txt",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "ReadNovel.filePath": "D:\\chrome-download\\完美世界.txt",
    "z-reader.onlineSite": "笔趣阁",
    "volar.icon.splitEditors": true,
    "volar.doctor.checkVueTsc": true,
    "stylelint.packageManager": "pnpm",
    "volar.inlayHints.eventArgumentInInlineHandlers": false,
    "stylusSupremacy.insertColons": false,
    "stylusSupremacy.insertBraces": false,
    "stylusSupremacy.insertLeadingZeroBeforeFraction": false,
    "stylusSupremacy.insertParenthesisAroundIfCondition": false,
    // "editor.foldingStrategy": "indentation",
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.autoRevealExclude": {
      "": true,
      "**/node_modules": false
    },
    "gitlens.views.remotes.branches.layout": "list",
    "window.zoomLevel": -1,
    "vue.splitEditors.layout.left": ["script", "scriptSetup", "styles"],
    "vue.inlayHints.inlineHandlerLeading": true,
    "vue.server.vitePress.supportMdFile": true,
    "vue.inlayHints.missingProps": true,
    "vue.autoInsert.dotValue": true,
    "prettier.useEditorConfig": false
  }
 
{
    "explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
    "explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认
    "explorer.compactFolders": false, // >方式文件树
    "emmet.includeLanguages": {
      "wxml": "html",
      "javascript": "javascriptreact",
      "vue-html": ""
    },
    "javascript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格
    "typescript.updateImportsOnFileMove.enabled": "always", // 每次保存自动格式化
    "editor.formatOnType": false, // 控制编辑器在键入一行后是否自动格式化该行
    "editor.guides.bracketPairsHorizontal": true, // 输入一个括号自动补全
    "editor.detectIndentation": false, // 字体大小
    "editor.wordWrap": "on", // 根据视区宽度折行
    "editor.tabSize": 2, // 换行默认以tab缩进 4个字符
    "editor.colorDecorators": true, // 控制编辑器是否显示内联颜色修饰器和颜色选取器
    "editor.autoClosingQuotes": "always", // 控制编辑器是否在左引号后自动插入右引号
    "editor.autoClosingBrackets": "always", // 控制编辑器是否在左括号后自动插入右括号
    "editor.autoClosingDelete": "always", // 控制在删除时编辑器是否应删除相邻的右引号或右方括号
    "editor.autoClosingOvertype": "always", // 控制编辑器是否应改写右引号或右括号
    "editor.bracketPairColorization.enabled": true, // 控制是否启用括号对着色
    "editor.guides.bracketPairs": true, // 控制是否启用括号对指南
    // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
    "files.associations": {
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript",
      "*.vue": "vue",
      "*.cshtml": "html",
      "*.dwt": "html",
      "*.tsx": "typescriptreact",
      "*.ts": "typescript"
    },
    "[css]": {
      "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.validate.enable": true,
    "http.proxyStrictSSL": false, // 控制是否根据提供的 CA 列表验证代理服务器证书
    "workbench.enableExperiments": false, // 从 Microsoft 联机服务中获取要进行的实验。
    "workbench.settings.enableNaturalLanguageSearch": false, // 在更新后显示发行说明。发行说明将从 Microsoft 联机服务中获取。
    "html-css-class-completion.HTMLLanguages": [
      "html",
      "vue",
      "razor",
      "blade",
      "handlebars",
      "twig",
      "django-html",
      "php",
      "markdown",
      "erb",
      "ejs",
      "svelte"
    ],
    "workbench.colorCustomizations": {
      "editor.lineHighlightBackground": "#49b2b93d", //修改光标所在行的背景色
      "editor.lineHighlightBorder": "#ffffff30" //修改光标所在行的边框色
    },
    // 控制如何处理在受信任的工作区中打开不受信任的文件。此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。open: 始终允许不受信任的文件引入受信任的工作区,而不显示提示。
    "security.workspace.trust.untrustedFiles": "open",
    "volar.autoCompleteRefs": true,
    "compile-hero.disable-compile-files-on-did-save-code": false,
    "compile-hero.typescriptx-output-toggle": false,
    "compile-hero.typescript-output-toggle": false,
    "compile-hero.stylus-output-toggle": false,
    "compile-hero.scss-output-toggle": false,
    "compile-hero.sass-output-toggle": false,
    "compile-hero.pug-output-toggle": false,
    "compile-hero.less-output-toggle": false,
    "compile-hero.notification-toggle": false,
    "compile-hero.javascript-output-toggle": false,
    "compile-hero.jade-output-toggle": false,
    "diffEditor.codeLens": true,
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "liveServer.settings.port": 0,
    "security.workspace.trust.banner": "always",
    "security.workspace.trust.startupPrompt": "always",
    "security.workspace.trust.enabled": false,
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "editor.semanticTokenColorCustomizations": {
      "rules": {
        // "property": "#DCDCAA",
        // "variable": "#CE70D6",
        // "parameter": "#CE70D6",
      }
    },
    "emmet.triggerExpansionOnTab": true,
    "html-css-class-completion.enableEmmetSupport": true,
    "emmet.excludeLanguages": [],
    "emmet.showSuggestionsAsSnippets": true,
    "editor.inlineSuggest.enabled": true,
    "quokka.automaticRestart": true,
    // 左侧不折叠的标签,其余标签会折叠
    "volar.splitEditors.layout.left": ["template", "script", "scriptSetup"],
    // 右侧不折叠的标签,其余标签会折叠
    "volar.splitEditors.layout.right": ["styles", "customBlocks"],
    "openInExternalApp.openMapper": [
      {
        // represent file extension name
        "extensionName": "md",
        // the external applications to open the file which extension name is html
        "apps": [
          // openCommand can be shell command or the complete executable application path
          // title will be shown in the drop list if there are several apps
          {
            "title": "typora",
            "isElectronApp": true,
            // On MacOS, openCommand should be 'Google Chrome.app'
            "openCommand": "D:\\manager\\Typora\\Typora.exe"
          }
        ]
      }
    ],
    "workbench.editorAssociations": {
      "*.md": "milkdown.editor"
    },
    "auto-rename-tag.activationOnLanguage": ["*"],
    "liveSassCompile.settings.formats": [
      {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": null,
        "savePathReplacementPairs": null
      }
    ],
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on"
    },
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.tabCompletion": "on",
    "css.completion.triggerPropertyValueCompletion": false,
    "css.lint.duplicateProperties": "warning",
    "git.enableSmartCommit": true,
    "window.commandCenter": true,
    "git.autorefresh": false,
    "git.confirmSync": false,
    "files.autoGuessEncoding": true,
    "extensions.autoCheckUpdates": false,
    "update.enableWindowsBackgroundUpdates": false,
    "settingsSync.ignoredExtensions": [],
    "github.copilot.enable": {
      "*": true,
      "yaml": false,
      "plaintext": true,
      "markdown": true
    },
    // "editor.codeActionsOnSave": {
    //   "source.fixAll.stylelint": true
    // },
    // 关闭编辑器内置样式检查(避免与stylelint冲突)
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    // 配置stylelint检查的文件类型范围
    "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
    "volar.completion.autoImportComponent": false,
    "debug.onTaskErrors": "debugAnyway",
    "settingsSync.ignoredSettings": [],
    // "workbench.editor.wrapTabs": true,
    "workbench.colorTheme": "One Dark Pro",
    "gitlens.hovers.currentLine.over": "line",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "editor.formatOnSave": true,
    "vscodeMiniBook.bookPath": "/1.txt",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "ReadNovel.filePath": "D:\\chrome-download\\完美世界.txt",
    "z-reader.onlineSite": "笔趣阁",
    "volar.icon.splitEditors": true,
    "volar.doctor.checkVueTsc": true,
    "stylelint.packageManager": "pnpm",
    "volar.inlayHints.eventArgumentInInlineHandlers": false,
    "stylusSupremacy.insertColons": false,
    "stylusSupremacy.insertBraces": false,
    "stylusSupremacy.insertLeadingZeroBeforeFraction": false,
    "stylusSupremacy.insertParenthesisAroundIfCondition": false,
    // "editor.foldingStrategy": "indentation",
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.autoRevealExclude": {
      "": true,
      "**/node_modules": false
    },
    "gitlens.views.remotes.branches.layout": "list",
    "window.zoomLevel": -1,
    "vue.splitEditors.layout.left": ["script", "scriptSetup", "styles"],
    "vue.inlayHints.inlineHandlerLeading": true,
    "vue.server.vitePress.supportMdFile": true,
    "vue.inlayHints.missingProps": true,
    "vue.autoInsert.dotValue": true,
    "prettier.useEditorConfig": false
  }
 

左下角>设置>settings.json,进行vscode与各种插件的配置

如果当前项目有特定的vscode配置

当前项目新建.vscode>settings.json,其中的配置只在当前项目生效

资源管理器设置

json
"explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认
"explorer.compactFolders": false, // 控制资源管理器是否应以紧凑形式呈现文件夹
"explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认
"explorer.compactFolders": false, // 控制资源管理器是否应以紧凑形式呈现文件夹

emmet

json
 "emmet.triggerExpansionOnTab": true, // 按下TAB键,将展开Emmet缩写
 // 在默认不受支持的语言中启用 Emmet 缩写。在此语言和 Emmet 支持的语言之间添加映射。 例如: {"vue-html": "html", "javascript": "javascriptreact"}
 "emmet.includeLanguages": {
    "wxml": "html",
    "vue-html": "html",
    "javascript": "javascriptreact" // 用于支持react的jsx写法
  },
 "emmet.triggerExpansionOnTab": true, // 按下TAB键,将展开Emmet缩写
 // 在默认不受支持的语言中启用 Emmet 缩写。在此语言和 Emmet 支持的语言之间添加映射。 例如: {"vue-html": "html", "javascript": "javascriptreact"}
 "emmet.includeLanguages": {
    "wxml": "html",
    "vue-html": "html",
    "javascript": "javascriptreact" // 用于支持react的jsx写法
  },

js

json
"javascript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格
"typescript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
"javascript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格
"typescript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能

编辑器

json
  "editor.formatOnSave": true, // 每次保存自动格式化
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.guides.bracketPairsHorizontal": true, // 输入一个括号自动补全
  "editor.detectIndentation": false, // 控制是否在打开文件时,基于文件内容自动检测     
  // 每次保存的时候将代码按eslint格式进行修复
  // "editor.codeActionsOnSave": {
  //     "source.fixAll.eslint": true
  // },
  "editor.minimap.enabled": true, //是否显示缩略图
  "editor.fontSize": 14, // 字体大小
  "editor.wordWrap": "on", // 根据视区宽度折行
  "editor.tabSize": 2, // tab缩进 默认4个字符
  "editor.colorDecorators": true, // 控制编辑器是否显示内联颜色修饰器和颜色选取器
  "editor.autoClosingQuotes": "always", // 控制编辑器是否在左引号后自动插入右引号
  "editor.autoClosingBrackets": "always", // 控制编辑器是否在左括号后自动插入右括号
  "editor.autoClosingDelete": "always", // 控制在删除时编辑器是否应删除相邻的右引号或右方括号
  "editor.autoClosingOvertype": "always", // 控制编辑器是否应改写右引号或右括号
  "editor.bracketPairColorization.enabled": true, // 控制是否启用括号对着色
  "editor.guides.bracketPairs": true, // 控制是否启用括号对指南
  // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html",
    "*.tsx": "typescriptreact"
  },
  "editor.formatOnSave": true, // 每次保存自动格式化
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.guides.bracketPairsHorizontal": true, // 输入一个括号自动补全
  "editor.detectIndentation": false, // 控制是否在打开文件时,基于文件内容自动检测     
  // 每次保存的时候将代码按eslint格式进行修复
  // "editor.codeActionsOnSave": {
  //     "source.fixAll.eslint": true
  // },
  "editor.minimap.enabled": true, //是否显示缩略图
  "editor.fontSize": 14, // 字体大小
  "editor.wordWrap": "on", // 根据视区宽度折行
  "editor.tabSize": 2, // tab缩进 默认4个字符
  "editor.colorDecorators": true, // 控制编辑器是否显示内联颜色修饰器和颜色选取器
  "editor.autoClosingQuotes": "always", // 控制编辑器是否在左引号后自动插入右引号
  "editor.autoClosingBrackets": "always", // 控制编辑器是否在左括号后自动插入右括号
  "editor.autoClosingDelete": "always", // 控制在删除时编辑器是否应删除相邻的右引号或右方括号
  "editor.autoClosingOvertype": "always", // 控制编辑器是否应改写右引号或右括号
  "editor.bracketPairColorization.enabled": true, // 控制是否启用括号对着色
  "editor.guides.bracketPairs": true, // 控制是否启用括号对指南
  // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html",
    "*.tsx": "typescriptreact"
  },

格式化

json
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.arrowParens": "avoid", // 当箭头函数仅有一个参数时加上括号
  "prettier.bracketSpacing": true, // 控制对象字面量的空格输出
  "prettier.semi": false, // 是否在每行末尾添加分号
  "prettier.printWidth": 100, // 指定每行代码的最佳长度, 如果超出长度则换行
  // 尽可能控制尾随逗号的输出。 有效选项: '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号(对象,数组等) 'all' - 尾随逗号 尽可能(函数参数)
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true, // 如果为 true,将使用单引号而不是双引号
  "prettier.tabWidth": 2,  // 每个制表符占用的空格数
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.arrowParens": "avoid", // 当箭头函数仅有一个参数时加上括号
  "prettier.bracketSpacing": true, // 控制对象字面量的空格输出
  "prettier.semi": false, // 是否在每行末尾添加分号
  "prettier.printWidth": 100, // 指定每行代码的最佳长度, 如果超出长度则换行
  // 尽可能控制尾随逗号的输出。 有效选项: '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号(对象,数组等) 'all' - 尾随逗号 尽可能(函数参数)
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true, // 如果为 true,将使用单引号而不是双引号
  "prettier.tabWidth": 2,  // 每个制表符占用的空格数

workbench

json
 "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#49b2b93d", //修改光标所在行的背景色
    "editor.lineHighlightBorder": "#ffffff30" //修改光标所在行的边框色
  },
 "workbench.editor.enablePreview": false, // 打开文件时覆盖旧的tab
 "workbench.enableExperiments": false, // 从 Microsoft 联机服务中获取要进行的实验。
 "workbench.settings.enableNaturalLanguageSearch": false,  // 控制是否在设置中启用自然语言搜索。自然语言搜索由 Microsoft 联机服务提供
 "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#49b2b93d", //修改光标所在行的背景色
    "editor.lineHighlightBorder": "#ffffff30" //修改光标所在行的边框色
  },
 "workbench.editor.enablePreview": false, // 打开文件时覆盖旧的tab
 "workbench.enableExperiments": false, // 从 Microsoft 联机服务中获取要进行的实验。
 "workbench.settings.enableNaturalLanguageSearch": false,  // 控制是否在设置中启用自然语言搜索。自然语言搜索由 Microsoft 联机服务提供

性能设置

json
"http.proxyStrictSSL": false, // 控制是否根据提供的 CA 列表验证代理服务器证书
"update.showReleaseNotes": false, // 在更新后显示发行说明。发行说明将从Microsoft联机服务中获取
// 控制如何处理在受信任的工作区中打开不受信任的文件。此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。open: 始终允许不受信任的文件引入受信任的工作区,而不显示提示
"security.workspace.trust.untrustedFiles": "open",
"http.proxyStrictSSL": false, // 控制是否根据提供的 CA 列表验证代理服务器证书
"update.showReleaseNotes": false, // 在更新后显示发行说明。发行说明将从Microsoft联机服务中获取
// 控制如何处理在受信任的工作区中打开不受信任的文件。此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。open: 始终允许不受信任的文件引入受信任的工作区,而不显示提示
"security.workspace.trust.untrustedFiles": "open",

volar

json
// Auto-complete Ref value with `.value`.
"volar.autoCompleteRefs": true,
// Auto-complete Ref value with `.value`.
"volar.autoCompleteRefs": true,

Compile-hero

新版本vscode自带Compile-hero,会自动编译js文件,可以设置里进行关闭

js
  "compile-hero.disable-compile-files-on-did-save-code": false,
  "compile-hero.typescriptx-output-toggle": false,
  "compile-hero.typescript-output-toggle": false,
  "compile-hero.stylus-output-toggle": false,
  "compile-hero.scss-output-toggle": false,
  "compile-hero.sass-output-toggle": false,
  "compile-hero.pug-output-toggle": false,
  "compile-hero.less-output-toggle": false,
  "compile-hero.notification-toggle": false,
  "compile-hero.javascript-output-toggle": false,
  "compile-hero.jade-output-toggle": false,
  "compile-hero.disable-compile-files-on-did-save-code": false,
  "compile-hero.typescriptx-output-toggle": false,
  "compile-hero.typescript-output-toggle": false,
  "compile-hero.stylus-output-toggle": false,
  "compile-hero.scss-output-toggle": false,
  "compile-hero.sass-output-toggle": false,
  "compile-hero.pug-output-toggle": false,
  "compile-hero.less-output-toggle": false,
  "compile-hero.notification-toggle": false,
  "compile-hero.javascript-output-toggle": false,
  "compile-hero.jade-output-toggle": false,

完整

json
{
  "explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
  "explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认
  "explorer.compactFolders": false, // 控制资源管理器是否应以紧凑形式呈现文件夹
  "emmet.triggerExpansionOnTab": true, // 按下 TAB 键,将展开 Emmet 缩写
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue-html": "html",
    "javascript": "javascriptreact" // 用于支持react的jsx写法
  },
  "javascript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格
  "typescript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在 VS Code 中重命名或移动文件时自动更新导入路径的功能。
  "editor.formatOnSave": true, // 每次保存自动格式化
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.guides.bracketPairsHorizontal": true, // 输入一个括号自动补全
  "editor.detectIndentation": false, // 字体大小
  "editor.wordWrap": "on", // 根据视区宽度折行
  "editor.tabSize": 2, // 换行默认以tab缩进 4个字符
  "editor.colorDecorators": true, // 控制编辑器是否显示内联颜色修饰器和颜色选取器
  "editor.autoClosingQuotes": "always", // 控制编辑器是否在左引号后自动插入右引号
  "editor.autoClosingBrackets": "always", // 控制编辑器是否在左括号后自动插入右括号
  "editor.autoClosingDelete": "always", // 控制在删除时编辑器是否应删除相邻的右引号或右方括号
  "editor.autoClosingOvertype": "always", // 控制编辑器是否应改写右引号或右括号
  "editor.bracketPairColorization.enabled": true, // 控制是否启用括号对着色
  "editor.guides.bracketPairs": true, // 控制是否启用括号对指南
  // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html",
    "*.tsx": "typescriptreact",
    "*.ts": "typescript"
  },
  // 设置不同后缀的文件使用相应的格式化工具,主要还是使用prettier
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.arrowParens": "avoid", // 当箭头函数仅有一个参数时加上括号
  "prettier.bracketSpacing": true, // 控制对象字面量的空格输出
  "prettier.semi": false, // 是否在每行末尾添加分号
  "prettier.printWidth": 100, // 指定每行代码的最佳长度, 如果超出长度则换行
  // 尽可能控制尾随逗号的输出。 有效选项: '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号(对象,数组等) 'all' - 尾随逗号 尽可能(函数参数)
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true, // 如果为 true,将使用单引号而不是双引号
  "prettier.tabWidth": 2, // 每个制表符占用的空格数
  "http.proxyStrictSSL": false, // 控制是否根据提供的 CA 列表验证代理服务器证书
  "workbench.enableExperiments": false, // 从 Microsoft 联机服务中获取要进行的实验。
  "workbench.settings.enableNaturalLanguageSearch": false, // 控制是否在设置中启用自然语言搜索。自然语言搜索由 Microsoft 联机服务提供。
  "update.showReleaseNotes": false, // 在更新后显示发行说明。发行说明将从 Microsoft 联机服务中获取。
  "html-css-class-completion.HTMLLanguages": [
    "html",
    "vue",
    "razor",
    "blade",
    "handlebars",
    "twig",
    "django-html",
    "php",
    "markdown",
    "erb",
    "ejs",
    "svelte"
  ],
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#49b2b93d", //修改光标所在行的背景色
    "editor.lineHighlightBorder": "#ffffff30" //修改光标所在行的边框色
  },
  // 控制如何处理在受信任的工作区中打开不受信任的文件。此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。open: 始终允许不受信任的文件引入受信任的工作区,而不显示提示。
  "security.workspace.trust.untrustedFiles": "open",
  "volar.autoCompleteRefs": true,
  "compile-hero.disable-compile-files-on-did-save-code": false,
  "compile-hero.typescriptx-output-toggle": false,
  "compile-hero.typescript-output-toggle": false,
  "compile-hero.stylus-output-toggle": false,
  "compile-hero.scss-output-toggle": false,
  "compile-hero.sass-output-toggle": false,
  "compile-hero.pug-output-toggle": false,
  "compile-hero.less-output-toggle": false,
  "compile-hero.notification-toggle": false,
  "compile-hero.javascript-output-toggle": false,
  "compile-hero.jade-output-toggle": false,
}
{
  "explorer.confirmDragAndDrop": false, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
  "explorer.confirmDelete": false, // 控制资源管理器是否在把文件删除到废纸篓时进行确认
  "explorer.compactFolders": false, // 控制资源管理器是否应以紧凑形式呈现文件夹
  "emmet.triggerExpansionOnTab": true, // 按下 TAB 键,将展开 Emmet 缩写
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue-html": "html",
    "javascript": "javascriptreact" // 用于支持react的jsx写法
  },
  "javascript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在重命名或移动文件时自动更新导入路径的功能
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格
  "typescript.updateImportsOnFileMove.enabled": "always", // 启用或禁用在 VS Code 中重命名或移动文件时自动更新导入路径的功能。
  "editor.formatOnSave": true, // 每次保存自动格式化
  "editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行
  "editor.guides.bracketPairsHorizontal": true, // 输入一个括号自动补全
  "editor.detectIndentation": false, // 字体大小
  "editor.wordWrap": "on", // 根据视区宽度折行
  "editor.tabSize": 2, // 换行默认以tab缩进 4个字符
  "editor.colorDecorators": true, // 控制编辑器是否显示内联颜色修饰器和颜色选取器
  "editor.autoClosingQuotes": "always", // 控制编辑器是否在左引号后自动插入右引号
  "editor.autoClosingBrackets": "always", // 控制编辑器是否在左括号后自动插入右括号
  "editor.autoClosingDelete": "always", // 控制在删除时编辑器是否应删除相邻的右引号或右方括号
  "editor.autoClosingOvertype": "always", // 控制编辑器是否应改写右引号或右括号
  "editor.bracketPairColorization.enabled": true, // 控制是否启用括号对着色
  "editor.guides.bracketPairs": true, // 控制是否启用括号对指南
  // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html",
    "*.tsx": "typescriptreact",
    "*.ts": "typescript"
  },
  // 设置不同后缀的文件使用相应的格式化工具,主要还是使用prettier
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.arrowParens": "avoid", // 当箭头函数仅有一个参数时加上括号
  "prettier.bracketSpacing": true, // 控制对象字面量的空格输出
  "prettier.semi": false, // 是否在每行末尾添加分号
  "prettier.printWidth": 100, // 指定每行代码的最佳长度, 如果超出长度则换行
  // 尽可能控制尾随逗号的输出。 有效选项: '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号(对象,数组等) 'all' - 尾随逗号 尽可能(函数参数)
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true, // 如果为 true,将使用单引号而不是双引号
  "prettier.tabWidth": 2, // 每个制表符占用的空格数
  "http.proxyStrictSSL": false, // 控制是否根据提供的 CA 列表验证代理服务器证书
  "workbench.enableExperiments": false, // 从 Microsoft 联机服务中获取要进行的实验。
  "workbench.settings.enableNaturalLanguageSearch": false, // 控制是否在设置中启用自然语言搜索。自然语言搜索由 Microsoft 联机服务提供。
  "update.showReleaseNotes": false, // 在更新后显示发行说明。发行说明将从 Microsoft 联机服务中获取。
  "html-css-class-completion.HTMLLanguages": [
    "html",
    "vue",
    "razor",
    "blade",
    "handlebars",
    "twig",
    "django-html",
    "php",
    "markdown",
    "erb",
    "ejs",
    "svelte"
  ],
  "workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#49b2b93d", //修改光标所在行的背景色
    "editor.lineHighlightBorder": "#ffffff30" //修改光标所在行的边框色
  },
  // 控制如何处理在受信任的工作区中打开不受信任的文件。此设置也适用于通过 `#security.workspace.trust.emptyWindow#" 打开的空窗口中的文件。open: 始终允许不受信任的文件引入受信任的工作区,而不显示提示。
  "security.workspace.trust.untrustedFiles": "open",
  "volar.autoCompleteRefs": true,
  "compile-hero.disable-compile-files-on-did-save-code": false,
  "compile-hero.typescriptx-output-toggle": false,
  "compile-hero.typescript-output-toggle": false,
  "compile-hero.stylus-output-toggle": false,
  "compile-hero.scss-output-toggle": false,
  "compile-hero.sass-output-toggle": false,
  "compile-hero.pug-output-toggle": false,
  "compile-hero.less-output-toggle": false,
  "compile-hero.notification-toggle": false,
  "compile-hero.javascript-output-toggle": false,
  "compile-hero.jade-output-toggle": false,
}

使用管理员身份运行vscode

右键属性->兼容性->勾选管理员启动

可以避免一些操作权限不够的问题

管理员身份打开powershell

  1. 执行:get-ExecutionPolicy,返回Restricted
  2. 执行:set-ExecutionPolicy RemoteSigned
  3. 输入Y

提交git

新版的vscode,提交时不再弹出窗口,会进入一个等待时间(不会有任何结果)

正确的操作方法是,在左侧提交按钮上方的输入框写上提交信息,再点提交就能很快完成

更改文件编码

点击右下角的菜单栏,有一个信息显示当前文件的编码方式,如果打开文档发现很多乱码,那么说明文档编码不对。例如,当前编码是utf-8,文档显示乱码:

点击UTF-8, 选择reopen with encoding → 你想切换的编码方式。这个是时候文档就正常了

这个时候文档只是被用新的编码方式打开了。如果你想将转码的文档保存下来,令文档在utf-8下正常显示,点击GB-2312 → Save with encoding, 选择UTF-8

标签栏

假设打开很多文件,标签栏很多,鼠标悬浮标签栏,上下滚轮,可左右滚动

解决vscode右下角不再出现弹窗信息的问题

最近开发vscode插件时,发现vscode.window.showInformationMessage代码调用后右下角一直没有弹窗信息,后来发现右下角铃铛图标有一个斜杠,代表消息静默模式,有新弹窗消息只会铃铛图标右上角多一个点,点击铃铛图标后才会显示弹窗信息列表,而不会在vscode右下方弹窗,可以点击上方的铃铛来关闭消息静默模式

image-20230531113902420

Released under the MIT License.