以下是推荐的 VS Code 扩展:
语言包
Chinese (Simplified) Language Pack for Visual Studio Code
VS Code 原生为英文,本插件为 VS Code 提供简体中文支持,会更改页面为简体中文。
外观
indent-rainbow
为代码中的缩进上色,更容易判断缩进层数。
Material Icon Theme
为 VS Code 文件图标应用安卓的 Material 主题。
以下是推荐的 VS Code 扩展:
VS Code 原生为英文,本插件为 VS Code 提供简体中文支持,会更改页面为简体中文。
为代码中的缩进上色,更容易判断缩进层数。
为 VS Code 文件图标应用安卓的 Material 主题。
提示
在完成 VS Code 安装并首次打开 VS Code 的时候,右下角会提示安装简体中文扩展,请点击安装。
如果忘记点击或没有弹窗,请到侧边栏扩展搜索找到 "Chinese (Simplified) Language Pack for Visual Studio Code" 扩展进行安装,即可将 VS Code 改为中文页面。
在 官网下载地址 下载最新版安装包(Window User 64bit, 那个大的蓝色按钮就是)。
双击安装包打开
同意用户协议。
安装选项中,请务必 全选 以下选项:
勾选 添加到目录上下文菜单、添加到文件上下文菜单、将 code 注册为受支持的文件编辑器、添加到 path。
在 VS Code 初次启动后,若未提前安装 Git 可能会提示未找到 Git 软件,忽略即可
推荐立即执行简体中文扩展安装以保证界面语言为简体中文。
提示
当您安装 VS Code 并第一次打开的时候,VS Code 会自动检测当前系统语言并在右下角推荐您安装对应语言的扩展,点击按钮即可自动安装。
Visual Studio Code 是一个轻量级但功能强大的源代码编辑器,可在您的桌面上运行,并且可用于 Windows,macOS 和 Linux。它具有对 JavaScript,TypeScript 和 Node.js 的内置支持,并具有丰富的其他语言 (例如 C ++,C#,Java,Python,PHP,Go) 和运行时 (例如 .NET 和 Unity) 扩展的生态系统。由微软出品,因其开源,可扩展和众多插件成为全球最受欢迎的代码编辑器。
智能代码补全
使用 IntelliSense 可以更智能地编写代码、变量,方法和导入模块的完成。
热门扩展
启用其他语言,主题,调试器,命令等。
这是 Mr.Song 个人使用的 VS Code 设置,部分设置是这里的插件配置
将下面内容拷贝至 setting.json 以更改 VS Code 设置
{
// 编辑器配置
"editor.accessibilitySupport": "off",
"editor.bracketPairColorization.enabled": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true,
"editor.cursorSmoothCaretAnimation": true,
"editor.detectIndentation": false,
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.guides.bracketPairs": true,
"editor.inlineSuggest.enabled": true,
"explorer.incrementalNaming": "smart",
"editor.mouseWheelZoom": true,
"editor.rulers": [80],
"editor.quickSuggestions": {
"comments": true,
"strings": true,
"other": true
},
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "boundary",
"editor.smoothScrolling": true,
"editor.stickyScroll.enabled": true,
"editor.suggestSelection": "first",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.experimental.pasteActions.enabled": true,
// emmet 包含 wxml 视为 html
"emmet.includeLanguages": {
"wxml": "html",
"axml": "xml"
},
"emmet.variables": {
"lang": "zh-CN",
"charset": "UTF-8"
},
// 文件相关
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"explorer.fileNesting.enabled": true,
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.wxml": "wxml"
},
"files.autoSave": "off",
"files.eol": "\n",
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"files.maxMemoryForLargeFilesMB": 4096,
// 编辑器窗口设置
"window.closeWhenEmpty": true,
"window.commandCenter": true,
"window.dialogStyle": "custom",
"window.newWindowDimensions": "inherit",
"breadcrumbs.enabled": true,
// 工作台设置
"workbench.activityBar.visible": true,
"workbench.colorTheme": "One Dark Pro",
"workbench.commandPalette.preserveInput": true,
"workbench.editor.scrollToSwitchTabs": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"security.workspace.trust.untrustedFiles": "open",
"material-icon-theme.folders.associations": {
"global-components": "Global",
"node": "Node",
"about": "Command",
"intro": "Command",
"file": "Public",
"github": "GitHub",
"composables": "Include",
"service-worker": "config",
"store": "Vuex-store",
"demo": "Examples",
"basic": "Helper",
"vuex": "Vuex-store",
"module": "plugin",
"router": "Routes",
".vuepress": "vue",
"vuepress": "vue",
"node-js": "Node",
"react": "React-components",
"workflows": "Ci",
"guide": "content",
"git": "Git",
"mysql": "DataBase",
"software": "App",
"tool": "Tools",
"vscode": "VSCode",
"en": "I18n",
"zh": "I18n",
"types": "typescript"
},
// 提示设置
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"problems.showCurrentInStatus": true,
// 在线服务设置
"telemetry.telemetryLevel": "error",
// 终端设置
"terminal.external.linuxExec": "bash",
"terminal.integrated.confirmOnExit": "hasChildProcesses",
"terminal.integrated.copyOnSelection": true,
"terminal.integrated.enableBell": true,
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.defaultProfile.linux": "bash",
"terminal.integrated.env.linux": {
"NODE_OPTIONS": "--max_old_space_size=4096"
},
"terminal.integrated.env.windows": {
"NODE_OPTIONS": "--max_old_space_size=4096"
},
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"overrideName": true,
"icon": "terminal-powershell",
"args": ["-NoLogo"]
}
},
"terminal.integrated.shellIntegration.enabled": true,
"terminal.integrated.smoothScrolling": true,
"terminal.integrated.tabs.enabled": true,
// git
"diffEditor.ignoreTrimWhitespace": true,
"diffEditor.renderSideBySide": true,
"git.autofetch": true,
"git.confirmSync": false,
"git.enableSmartCommit": true,
"git.mergeEditor": true,
"merge-conflict.autoNavigateNextConflict.enabled": true,
// npm 设置
"npm.enableRunFromFolder": true,
"npm.packageManager": "pnpm",
"npm.scriptExplorerAction": "run",
"npm-intellisense.importQuotes": "\"",
"npm-intellisense.packageSubfoldersIntellisense": true,
"npm-intellisense.scanDevDependencies": true,
"npm-intellisense.showBuildInLibs": true,
// 特定格式文件设置
"[cpp]": {
"editor.defaultFormatter": "ms-vscode.cpptools"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[dart]": {
"editor.formatOnType": true,
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": true,
"editor.suggestSelection": "recentlyUsed",
"editor.tabCompletion": "on",
"editor.wordBasedSuggestions": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[latex]": {
"editor.defaultFormatter": "James-Yu.latex-workshop"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[matlab]": {
"files.encoding": "gb2312"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[xml]": {
"editor.defaultFormatter": "DotJoshJohnson.xml"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// typescript 配置
"javascript.format.semicolons": "insert",
"javascript.referencesCodeLens.enabled": true,
"javascript.suggest.completeFunctionCalls": true,
"javascript.preferences.quoteStyle": "double",
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.locale": "zh-CN",
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.format.semicolons": "insert",
"typescript.preferences.quoteStyle": "double",
"typescript.referencesCodeLens.enabled": true,
"typescript.suggest.completeFunctionCalls": true,
"typescript.updateImportsOnFileMove.enabled": "always",
// php 设置
"php.validate.enable": true,
"php.validate.run": "onType",
// c++ 设置
"C_Cpp.default.cppStandard": "c++23",
// 需要根据自己情况设置
"C_Cpp.default.includePath": [
// "C:/Program Files/mingw-w64/lib/gcc/x86_64-w64-mingw32/8.1.0/include",
// "C:/Program Files/mingw-w64/lib/gcc/x86_64-w64-mingw32/8.1.0/include-fixed",
// "C:/Program Files/mingw-w64/x86_64-w64-mingw32/include"
],
"C_Cpp.clang_format_fallbackStyle": "Google",
// dart
"dart.debugSdkLibraries": false,
"dart.openDevTools": "flutter",
"java.jdt.ls.java.home": "c:\\Program Files\\Java\\jdk-18.0.1",
"python.languageServer": "Pylance",
// css颜色提示配置
"colorInfo.fields": ["hex", "rgb", "alpha", "css-color-name", "preview"],
"colorInfo.languages": [
{
"selector": "vue",
"colors": "css"
},
{
"selector": "css",
"colors": "css"
},
{
"selector": "sass",
"colors": "css"
},
{
"selector": "scss",
"colors": "css"
},
{
"selector": "less",
"colors": "css"
}
],
// eslint
"eslint.packageManager": "pnpm",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
],
// Git Lens 设置
"gitlens.defaultDateFormat": "YYYY-MM-DD HH:mm",
"gitlens.defaultDateShortFormat": "YYYY-MM-DD",
"gitlens.defaultTimeFormat": "HH:mm",
"gitlens.gitCommands.closeOnFocusOut": true,
"gitlens.views.repositories.branches.layout": "list",
"gitlens.advanced.messages": {
"suppressCommitNotFoundWarning": true,
"suppressRebaseSwitchToTextWarning": true
},
// markdown 设置
"markdown.extension.orderedList.marker": "one",
"markdown.validate.enabled": true,
"markdown.extension.print.imgToBase64": true,
// markdownlint 设置
"markdownlint.config": {
"default": true,
"MD003": {
"style": "atx"
},
"MD004": {
"style": "dash"
},
"MD013": false,
"MD024": {
"allow_different_nesting": true
},
"MD035": {
"style": "---"
}
},
// 根据自己情况设置
"markdown-pdf.executablePath": "C:/Users/mister-hope/AppData/Local/Google/Chrome/Application/chrome.exe",
// XML工具设置
"xmlTools.enforcePrettySelfClosingTagOnFormat": true,
"xmlTools.removeCommentsOnMinify": true,
// 微信小程序
"minapp-vscode.disableAutoConfig": true,
"minapp-vscode.wxmlFormatter": "prettier",
"minapp-vscode.prettier": {
"parser": "html",
"printWidth": 80
},
// liveshare 设置
"liveshare.audio.joinCallBehavior": "accept",
// 项目管理器
"projectManager.sortList": "Saved",
"projectManager.ignoreProjectsWithinProjects": true,
"projectManager.any.ignoredFolders": [
"dist",
"node_modules",
"out",
"typings",
"test",
"__tests__"
],
"projectManager.git.baseFolders": ["C:/Projects/"],
// TODO Highlight 配置
"todohighlight.keywords": ["WARNING: "],
// stylelint 设置
"stylelint.packageManager": "pnpm",
// Java
"redhat.telemetry.enabled": false,
// github copilot
"github.copilot.enable": {
"*": true,
"yaml": true,
"plaintext": true,
"markdown": true
}
}
通过快捷键,Visual Studio Code 可让您直接从键盘执行大多数任务。
提示
以下这些快捷键建议大家熟练掌握,能够很大程度提高开发效率。
在当前行的位置,鼠标三击,可以选中当前行。
用鼠标单击文件的行号,可以选中当前行。
在某个行号的位置,上下移动鼠标,可以选中多行。
这是一款微软的代码编辑器,因其开源,可扩展和众多插件成为全球最受欢迎的代码编辑器。
在官网下载地址下载最新版 Win64User 安装包,双击安装包打开同意用户协议,一直下一步即可。
在 VS Code 初次启动后,若未提前安装 Git 可能会提示未找到 Git 软件,忽略即可;若提示安装简体中文扩展,请点击安装以保证界面语言为简体中文。
本质上,Visual Studio Code 是代码编辑器。像许多其他代码编辑器一样,VS Code 在左边采用通用的用户界面和资源管理器布局,以显示您有权访问的所有文件和文件夹,而在右边的编辑器则显示您已打开文件的内容。
VS Code 具有简单直观的布局,可最大程度地为编辑器提供空间,同时为浏览和访问文件夹或项目的整个上下文留出足够的空间。用户界面分为五个区域:
打开 欢迎使用 页面,开始使用 VS Code 的基础知识。帮助 > 欢迎
在 欢迎 页面的右下角,有一个指向 交互式游乐场 的链接,您可以在其中交互式地试用 VS Code 的功能。帮助 > 交互式游乐场
VS Code 具有强大的命令行界面(CLI),可让您自定义启动编辑器以支持各种情况的方式。
确保 VS Code 可执行文件已经添加到您的环境变量。只需键入 code
即可启动 VS Code。
# 使用 code 打开当前文件夹
code .
# 在最近使用面板
code -r .
# 打开新窗口
code -n
# 改编当前语言
code --locale=es
# 打开文件比较器
code --diff <file1> <file2>
# 打开文件并跳转到指定的行(和列)
code --goto package.json:10:5
# 查看帮助选项
code --help
# 禁用所有扩展
code --disable-extensions .