Visual Studio Code

Visual Studio Code,简称 vscode，比德芙还丝滑的编辑器-_-

安装

直接官网下载安装

卸载

1、控制面板卸载软件安装，
2、删除扩展和配置信息
把以下两个目录删除即可c/users/users/vscode c/users/AppData/Roaming/Code

vscode 快捷键

  • 打开关闭快捷键：

    • Ctrl +”~” 打开终端
    • Ctrl+Shift+P,F1 展示全局命令面板
    • Ctrl+P 快速打开最近打开的文件
    • Ctrl+Shift+N 打开新的编辑器窗口
    • Ctrl+Shift+W 关闭编辑器
    • Ctrl + | 在新窗口打开当前文件

  • 编辑快捷键

    • Alt + up/down 移动行上下
    • Shift + Alt up/down 在当前行上下复制当前行
    • Ctrl + Shift + K 删除行
    • Ctrl + Enter 在当前行下插入新的一行
    • Ctrl + Shift + Enter 在当前行上插入新的一行
    • Ctrl + Shift + | 匹配花括号的闭合处，跳转
    • Ctrl + ] 或 [ 行缩进
    • Home 光标跳转到行头
    • End 光标跳转到行尾
    • Ctrl + Home 跳转到页头
    • Ctrl + End 跳转到页尾
    • Ctrl + up/down 行视图上下偏移
    • Alt + PgUp/PgDown 屏视图上下偏移
    • Ctrl + Shift + [ 折叠区域代码
    • Ctrl + Shift + ] 展开区域代码
    • Ctrl + / 添加关闭行注释
    • Shift + Alt +A 块区域注释
    • Alt + Z 添加关闭词汇包含

  • 导航快捷键

    • Ctrl + T 列出所有符号
    • Ctrl + G 跳转行
    • Ctrl + P 跳转文件
    • Ctrl + Shift + O 跳转到符号处
    • Ctrl + Shift + M 或 Ctrl + J 打开问题展示面板
    • F8 跳转到下一个错误或者警告
    • Shift + F8 跳转到上一个错误或者警告
    • Ctrl + Shift + Tab 切换到最近打开的文件
    • Alt + left / right 向后、向前
    • Ctrl + M 进入用 Tab 来移动焦点
    • Ctrl + F 查询
    • Ctrl + H 替换
    • F3 / Shift + F3 查询下一个/上一个
    • Alt + Enter 选中所有出现在查询中的
    • Ctrl + D 匹配当前选中的词汇或者行，再次选中-可操作

  • 多行光标快捷键

    • Alt + Click 插入光标-支持多个
    • Ctrl + Alt + up/down 上下插入光标-支持多个
    • Ctrl + U 撤销最后一次光标操作
    • Shift + Alt + I 插入光标到选中范围内所有行结束符
    • Ctrl + I 选中当前行
    • Ctrl + Shift + L 选择所有出现在当前选中的行-操作
    • Ctrl + F2 选择所有出现在当前选中的词汇-操作
    • Shift + Alt + right 从光标处扩展选中全行
    • Shift + Alt + left 收缩选择区域
    • Shift + Alt + (drag mouse) 鼠标拖动区域，同时在多个行结束符插入光标
    • Ctrl + Shift + Alt + (Arrow Key) 也是插入多行光标的[方向键控制]
    • Ctrl + Shift + Alt + PgUp/PgDown 也是插入多行光标的[整屏生效]
    • Esc Esc 连续按两次 Esc 键取消多行光标
    • Shift + Alt + F 格式化代码
    • F12 跳转到定义处
    • Alt + F12 代码片段显示定义
    • Ctrl + K F12 在其他窗口打开定义处
    • Ctrl + . 快速修复部分可以修复的语法错误
    • Shift + F12 显示所有引用
    • F2 重命名符号
    • Ctrl + Shift + . / , 替换下个值

  • 编辑器管理快捷键

    • Ctrl + F4, Ctrl + W 关闭编辑器
    • Ctrl + |切割编辑窗口
    • Ctrl + 1/2/3 切换焦点在不同的切割窗口
    • Ctrl + Shift + PgUp/PgDown 切换标签页的位置

  • 文件管理快捷键

    • Ctrl + N 新建文件
    • Ctrl + O 打开文件
    • Ctrl + S 保存文件
    • Ctrl + Shift + S 另存为
    • Ctrl + F4 关闭当前编辑窗口
    • Ctrl + W 关闭所有编辑窗口
    • Ctrl + Shift + T 撤销最近关闭的一个文件编辑窗口
    • Ctrl + Enter 保持开启
    • Ctrl + Shift + Tab 调出最近打开的文件列表，重复按会切换
    • Ctrl + Tab 与上面一致，顺序不一致
    • Ctrl + P 复制当前打开文件的存放路径
    • Ctrl + R 打开当前编辑文件存放位置【文件管理器】

  • 显示快捷键

    • F11 切换全屏模式
    • Ctrl + =/- 放大 / 缩小
    • Ctrl + B 侧边栏显示隐藏
    • Ctrl + Shift + E 资源视图和编辑视图的焦点切换
    • Ctrl + Shift + F 打开全局搜索
    • Ctrl + Shift + G 打开 Git 可视管理
    • Ctrl + Shift + D 打开 DeBug 面板
    • Ctrl + Shift + X 打开插件市场面板
    • Ctrl + Shift + H 在当前文件替换查询替换
    • Ctrl + Shift + J 开启详细查询
    • Ctrl + Shift + V 预览 Markdown 文件【编译后】
    • Ctrl + K v 在边栏打开渲染后的视图【新建】

  • 调试快捷键

    • F9 添加解除断点
    • F5 启动调试、继续
    • F11 / Shift + F11 单步进入 / 单步跳出
    • F10 单步跳过

  • 集成终端快捷键

    • Ctrl + ~ 打开集成终端
    • Ctrl + Shift + ` 创建一个新的终端
    • Ctrl + C 复制所选
    • Ctrl + V 复制到当前激活的终端
    • Shift + PgUp / PgDown 页面上下翻屏
    • Ctrl + Home / End 滚动到页面头部或尾部

  • Ememet 快捷语法

1
2
3
4
5
6
7
8
li*10 //创建10个li元素
div.className //创建<div class="className"></div>
div#idName //创建<div id="idNamw"></div>
div[attrName=name] //创建<div attrName="name"></div>
div>li>a //创建<div><li><a></a></li></div>
div+p+span //创建<div></div><p></p><span></span>
div{文本文字} //创建<div>文本文字</div>
div>(header>ul>li*2>a)+footer>p //括号用于在复杂的 Emmet 缩写中处理一组子树

常用插件推荐

常用插件

  • 中文（简体）语言包 Chinese (Simplified) Language Pack for Visual Studio Code
    将界面转换为中文
  • Settings Sync
    使用 GitHub Gist 同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。（这个插件是真的好用。 ——闰土）
  • Atuo Rename Tag
    修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改
  • beautify 格式化代码工具
    美化 javascript，JSON，CSS，Sass，和 HTML 在 Visual Studio 代码。
  • guides
    显示代码对齐辅助线，很好用
  • Indent-Rainbow
    用四种不同颜色交替着色文本前面的缩进
  • GitLens
    git 日志查看插件
    GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等
  • REST Client
    REST 客户端允许您直接发送 HTTP 请求并在 Visual Studio Code 中查看响应
  • Auto Close Tag
    自动闭合 HTML/XML 标签
  • Auto Rename Tag
    自动完成另一侧标签的同步修改
  • JavaScript(ES6) code snippets
    ES6 语法智能提示以及快速输入，除 js 外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含 js 代码文件的时间

代码提示类插件

  • HTML Snippets
    完整的 HTML 代码提示，包括 HTML5
  • HTML CSS Support
    在 html 标签上写 class 智能提示 css 样式
  • jQuery Code Snippets
    jQuery 代码提示
    超过 130 个用于 JavaScript 代码的 jQuery 代码片段。
    只需键入字母’jq’即可获得所有可用 jQuery 代码片段的列表。

VUE 插件

  • vetur 语法高亮、智能感知、Emmet 等
  • VueHelper snippet 代码片段
  • ESLint 将 ESLint JavaScript 集成到 VS 代码中。
  • prettier 代码规范性插件

VSCode 常见问题

1.代码折叠功能功能无效
问题描述：VSCode 的代码折叠功能失效，Folding 是开启状态也不生效。
解决：关闭屏幕阅读器优化功能 Accessibility Support 设置为 off

settings.json

settings.json,VSCode 配置文件

鼠标放在设置项左侧，点击出现的More Actions...图标，选择Copy Settings as JSON，该设置项会以 JSON 格式添加到粘贴板，可以复制到 settings.json 文件中方便修改设置

我的 settings.json 设置：

1
待更新