下载

官方网站：https://code.visualstudio.com/

下载时注意拉到网站下方选择下载系统权限安装版本，因为这个版本才能够直接粘贴文件到文件夹里面

软件外设

主题

• GitHub Dark Classic theme

图标包

• Material Icon Theme

插件

• Auto Close Tag

• Auto Rename Tag

• Chinese (Simplified)

• Code Runner

• Easy LESS

• Live Preview

• Live Server

• Markdown Preview Enhanced - Markdown预览

• Path Intellisense - 路径提醒

• Prettier - Code formatter

---

vue插件

• Vetur - vue2代码提示

• volar - vue3代码提示

• VueHelper - vue代码片段

• Vue 3 Snippets

• WakaTime

• ztrans

• quokka.js

自定义配置

Setting.json

快捷键：Ctrl+Shift+P ，输入打开设置，然后回车就可以打开这个 VS Code 的配置文件了。

{
    "emmet.variables": {
        "lang": "zh-CN"
    },
    "explorer.confirmDelete": false,
    "editor.fontSize": 22,
    "code-runner.runInTerminal": true,
    "code-runner.preserveFocus": false,
    "editor.wordWrap": "on",
    "workbench.startupEditor": "none",
    "workbench.editor.enablePreview": false,
    "settingsSync.ignoredExtensions": [],
    "less.compile": {
        "compress": true, // true => remove surplus whitespace
        "sourceMap": true, // true => generate source maps (.css.map files)
        "out": true // false => DON'T output .css files (overridable per-file, see below)
    },
    "explorer.confirmDragAndDrop": false,
    "editor.inlineSuggest.enabled": true,
    "editor.unicodeHighlight.allowedCharacters": {
        "：": true
    },
    "emmet.triggerExpansionOnTab": true,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.unicodeHighlight.allowedLocales": {
        "zh-hans": true
    }, // 文件保存自动格式化
    // 使能每一种语言默认格式化规则
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 每个制表符占用的空格数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": false, // 句尾添加分号
    "prettier.singleQuote": true,
    "editor.detectIndentation": false,
    // 针对vue文件单独设置格式化配置
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "markdown-preview-enhanced.codeBlockTheme": "atom-material.css",
    "workbench.colorTheme": "GitHub Dark Classic",
    "workbench.colorCustomizations": {},
    "workbench.iconTheme": "material-icon-theme",
}

extensions.json

此配置是共享插件配置，也就是说在这个里面写入插件的名称，当我们点击扩展时，点击上面的筛选图标，接着点击推荐，就能一键安装推荐的这些插件了。

//.vscode/
{
    "recommendations": [
        "Vue.volar",
        "allanoricil.nuxt-vscode-extension"
        // 插件的名称哪里看呢，点击打开对应插件的官网，网址后面name的值就是了。
    ]
}

开启npm脚本

点击 VScode 中的资源管理器右边的三个小点，然后开启 npm 脚本这个选项，就可以了

完全卸载教程

卸载软件是第一步，这样删除还不够全面，我们还需要删除这款软件在C盘里的一些残留，分别是.vscode和Code，路径如下

1. C:\Users\你的账号\vscode文件夹

2. C:\Users\你的账号\AppData\Roaming\Code文件夹

删除完这几个文件夹后就彻底删除了该软件，我们在重新下载即可。

使用技巧

快速启动

code .

搜索文件

Ctrl + P

拆分窗口

Ctrl + \

批量重命名变量

F2

文件对比

右键文件名称，选择某个文件，然后右键另一个文件就可以进行文件的对比。

也可以使用命令行进行操作

code --diff 2.js app.js

开启代码提示

到搜索框里搜索“prevent”--->并取消此项的勾选

常用快捷键

Ctrl

Ctrl + Enter - 在下面插入行

Ctrl + I - 触发代码建议

Ctrl + B - 切换显示侧边栏

Ctrl + P - 快速打开文件

Ctrl K + F - 关闭工作区

Ctrl K + L - 折叠代码

Ctrl + / - 单行注释

Ctrl + Shift + P - 打开命令面板

Ctrl+L - 选中一行

Alt

Alt + Shift + A - 多行注释

Alt+↑ ↓ - 上下移动行

Shift

Shift + Alt + 方向下 - 复制当前这行上移或下移

Shift + Enter - 在上面插入行