vscode使用

发表于 2021-05-31 更新于 2021-10-31 分类于指南

本文字数： 3.3k 阅读时长 ≈ 6 分钟

官网：https://code.visualstudio.com/docs

快捷键

ctrl + shift + p / F1 ：打开命令面板。输入 ? 可以查看可使用的命令行列表。
ctrl + p ：打开文件
ctrl + shift + o ：定位到文件某个位置
ctrl + g ：定位到某一行
ctrl + Tab ：显示最近编辑的文件
ctrl + , ：打开 setting
ctrl + w ：关闭所有的编辑器界面
ctrl + 1 ：到最左边的编辑器界面
ctrl + 2 ：到中间的编辑器界面
ctrl + 3 ：到最右边的编辑器界面
ctrl + F4 ：关闭当前活动的编辑器界面
ctrl + shift + x ：打开插件界面。类目搜索如 @category:"theme" 进行筛选。
ctrl + d ：当前选中的元素，多选
ctrl + alt + down / up ：多行
ctrl + shift + alt + up / down ：多行选中
ctrl + shift + alt + left / right ：多行左右选中
ctrl + shift + alt + pageUp / pageDown ：page多行选中
ctrl + shift + l ：全选中当前选中的元素
alt + click ：点击自定义多选行和位置
ctrl + [ / ] ：控制缩进
ctrl + shift + [ / ] ：控制代码块折叠
ctrl + 0 ：代码块全部折叠
ctrl + / ：注释代码
alt + shift + f ：格式化代码
alt + shift + up ：复制一行到上一行
alt + shift + down ：复制一行到下一行
ctrl + alt + n ：运行当前文件

配置 setting.json

{
    // tabs
    "workbench.editor.showTabs": false, // 不使用tab
    "workbench.editor.openPositioning": "left", // tab order
    // preview mode 预览模式 单击进入预览模式 双击打开文件 关闭预览模式需要设置以下两个参数
    "workbench.editor.enablePreview": true, // 默认启用预览模式
    "workbench.editor.enablePreviewFromQuickOpen": false, // 快速打开文件，即单击打开文件 
    // 编辑器界面
    "workbench.editor.closeEmptyGroups": false, // 不关闭空的 editor group
    "workbench.editor.openSideBySideDirection": "down", // 预设打开新的编辑器界面的方向 默认为右边
    // 窗口配置 重启窗口 有效值为 on off default
    "window.openFoldersInNewWindow": "default", // 打开新的文件夹
    "window.openFilesInNewWindow": "default", // 打开新的文件
    // 主题
    "workbench.colorTheme": "Default Dark+",
    // 自定义主题 such as list & trees (File Explorer, suggestions widget), diff editor, Activity Bar, notifications, scroll bar, split view, buttons, and more 
    // https://code.visualstudio.com/api/references/theme-color
    "workbench.colorCustomizations": {
        "activityBar.foreground": "#00FFFF",
        ...
        // 或 对特殊主题设置
        "[Monokai]": {
            "sideBar.background": "#00FFFF"
        }
    },
    // 高亮 comments、function、keywords、numbers...
    "editor.tokenColorCustomizations": {
        "comments": "#FF9900",
        ...
        // 使用文件内容配置
        "textMateRules": [
            {
                "scope": "support.type.property-name.json",
                "settings": {
                    "foreground": "#00FFFF"
                }
            }
        ],
        // 对特殊主题设置
        "[Monokai]": {
            "comments": "#00FFFF"
        }
    }, // 更加详细的颜色配置 https://code.visualstudio.com/api/extension-guides/color-theme
    // 特殊语言的语义主题配置 https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide
    "editor.semanticTokenColorCustomizations": {
        "[Rouge]": {
            "enabled": true,
            "rules": {
                "*.declaration": { "bold": true }
            }
        }
    },
    // icon theme
  	"workbench.iconTheme": "vs-seti",
    
    // 特殊语言设置
    "[typescript]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true
      },
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.wordWrap": "on",
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off"
    }
}

使用

Emmet

添加 snippet : file -> preferences -> user snippets

snippet生成工具：snippet generator - https://snippet-generator.app/

参考文章：https://juejin.cn/post/6844903869424599053

常用插件

美观：

Dracula Official：暗黑主题
vscode-icons：vscode 文件图标

代码相关：

EsLint：一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
Prettier：代码格式化
Document This：标准代码注释格式
Bracket Pair Colorizer：括号匹配着色，可以查看括号是否匹配问题
IntelliSense for CSS class names in HTML：CSS类名智能感知提示
Code Spell Checker：代码拼写检查
TODO Highlight：TODO标注功能
Auto rename tag：自动匹配重命名标签
stylelint：css、scss、less格式化
vue相关：（二选一）
- vue 2.0：Vetur
- vue 3.0：Volar
- VueHelper：vue 语法提示工具，更多的Snippets
react相关：
- ES7 React/Redux/GraphQL/React-Native snippets：快速生成代码块。

调试相关：

LiveServer：web服务器，可以本地起服务，在浏览器进行实时调试
Code Runner：万能语言运行环境，避免搭建语言的开发环境
Debug Visualizer：调试可视化，可以进行代码算法可视化调试

Wang Wei's Blog

vscode使用

快捷键

配置 setting.json

使用

Emmet

常用插件

美观：

代码相关：

调试相关：

代码版本管理：

其他：

更多阅读：

工具