前端编码选择

微软家开源免费的编辑器，是的文本编辑器，但可以装扩展，并且非常丰富，目前已经是非常流行的前端IDE，也是我常用的前端编码工具，当然论专业或许还是：WebStorem，不过没用过就不说了~

但是VsCode的强大在于其灵活性，前端能写，python能写，...总之是一个很好的轻量文本编辑器，他足够轻量，启动响应快

Vscode便携版安装

vscode便携版，备份data目录即可（其中data目录下若存在tmp目录则会把缓存文件放到其中）

image-20240219213430025

解压，主要是数据目录Data

image-20240219213057727

如果是Windows或Linux在Code.exe同级目录下创建data目录，MacOs创建code-portable-data目录。(新安装的VSCode到这一步已经是便携版了)
各系统拷贝对应的Code目录到data目录（Mac下为code-portable-data目录）下并重命名为user-data:

  • Windows: %APPDATA%\Code
  • `Linux: $HOME/.config/Code
  • macOS: $HOME/Library/Application Support/Code

各系统拷贝插件目录extensions到data目录下：

  • Windows: %USERPROFILE%.vscode\extensions
  • Linux: ~/.vscode/extensions
  • macOS: ~/.vscode/extensions

在data目录下创建tmp目录，使临时文件也存储在data目录中。（临时文件不包含必要存储的数据，洁癖和强迫症患者可以做）

基础配置

一、基本设置

写在最前：更改插件安装路径(（如果你是安装版）

原因： VSCode的插件默认安装位置为C:\Users\{username}\.vscode\extensions，时间长了很占用C盘空间

解决方法：

  1. 使用Windows链接关联文件夹

    • 管理员权限打开cmd，利用mklink来创建目录符号链接
    • 把C:\Users\{username}\.vscode\extensions(默认插件位置)的extensions文件夹整个剪切到你想换的位置
      在cmd中输入mklink /D "C:\Users\{username}\.vscode\extensions" "剪切后的路径"(username即为你的账户的用户名)
      可能遇到的问题：“当文件已存在时，无法创建改文件”
      image-20211218115512708

    原因是：创建链接的时候，链接的地方（原文件夹）不应该有同名文件夹（在创建链接的时候会自己生成），被链接的地方（你准备链接的地方）应该有一个你要链接过去 的文件夹。

    即你要做的就是：【先建立一个文件夹，例如D:\vscode_extensions】

    Tip

    用mklink方法后，新文件夹能不能放在cscode的安装目录里面，因为在更新VSCode后会将VSCode安装目录里的所有文件删除

    Step1:先剪切在c盘里的C:\Users\{username}\.vscode 里的extensions文件夹 Step2:放到你想换的路径下面，即D:\vscode_extensions

    成功示例如图：
    image-20211218122243961

    建议

    安装好vscode后立刻进行配置，不然安装一大堆插件后需要剪切插件目录到更换目录下->耗时

  2. 其他方法：使用zip版

（一）汉化

  • 中文插件：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，安装重启
  • Ctrl+Shift+p：>language切换语言

（二）颜色主题

  • 快捷键Ctrl+T+K
  • 万能快捷键：Ctrl+Shift+P【搜索color theme】
  • File->preferences->Color theme

（三）字体

Note
  • Consolas是Win的默认字体
  • JetBrains Mono
    • 下载地址：官方下载地址
    • 安装：
      • Mac: 选择文件夹中的所有字体文件，然后双击它们。点击“安装字体”按钮。
      • Windows: 选择文件夹中的字体文件，右键单击其中任何一个，然后从菜单中选择“安装”。
      • Linux: 将字体解压缩为〜/ .local / share / fonts（或/ usr / share / fonts，以在系统范围内安装字体）并执行fc-cache -f -v
  • 字体大小：16
  • 字体系列：'JetBrains Mono',Consolas, 'Courier New', monospace
  • Tab Size：4

image-20211211134918846

（四）工作面板【根据喜好：简洁】

可以通过View->Appearance->下的区域进行部分显示/隐藏

image-20211212110630001

1、资源管理器

image-20211211143520207

  • 各种部件根据需要选择打开或隐藏 / 也可直接隐藏资源管理器【Ctrl+B】
  • 直接右键EXPLORER,可设置资源管理器显示在右侧

2、代码预览缩略图

Ctrl+Shift+P【搜索mini】快速打开/关闭，亦可手动设置快捷键

3、导航路径（面包屑）

image-20211211145323054

4、隐藏活动栏

隐藏时取消勾选Show Activity Bar或直接在活动栏右键隐藏；

打开时勾选Show Activity Bar

个人手动设置打开活动栏快捷键Shift+Q

5、文件预览

settings搜索preview，勾选Enable Preview

如此一来点击文件时会在当前窗口以预览状态打开（发生修改时会进入编辑状态），双击才会在新窗口打开编辑，有效避免打开大量窗口

image-20211211170835573

（五）空白启动页

settings搜索restor或startup，将Startup Editor设置为NULL

image-20211211163445067

（六）关闭Hot Exit

settings搜索hot exit，将Hot Exit设置为off

vscode退出时会自动记录未保存的文件，现将"热退出"功能关闭，保留传统记事本的退出保存提醒确保数据安全

image-20211211164553584

（七）平滑插入

settings->Text Editor->Cursor(光标)

image-20211211172358277

（八）自动空行

image-20211211175800968

二、常用配置及快捷键

注意的是所有修改在User中修改

（一）常用配置

配置通过settings修改

1、鼠标滚轮+Ctrl放大和缩小字体

settings->搜索moouse->选择Text Editor区域->下拉勾选Zoom the font of the editor when using mouse wheel and holding Ctrl.

image-20211211111007806

2、自动保存配置

settings->搜索save->选择Text Editor区域下的Files->切换保存模式为afterDelay并设置Auto Save Delay为500ms，设置间隔太短太快了不好，因为动态运行服务时自动保存会导致换行影响编写体验
image-20211211111121490

（二）功能快捷键

Tip
  • Show All Commands：Ctrl+Shift+P，又称万能快捷键。通过条件限定快速调出各个命令
  • 注意：F1同样是打开命令面板

1、常用快捷键

  • 设置【可通过File->preference（偏好设置）打开】
    • Ctrl+，：调出settings
    • Ctrl+S+K：调出Keyboard Shortcuts
  • 工作面板区
    • Ctrl+Q：显示活动栏（工作面板随活动栏）【自定义】
    • Ctrl+B：切换/隐藏左边工作区（可右键设置在左边）
    • Ctrl+Shift+E：切换工作区为explorer（探索者）
    • Ctrl+Shift+F：切换工作区为Search（搜索）
    • Ctrl+Shift+G：切换工作区为source control（源代码控制）
    • Ctrl+Shift+D：切换工作区为Run and debug
    • Ctrl+Shift+X：切换工作区为Extensions（插件面板）
  • 代码区
    • Ctrl+O:打开文件
    • Ctrl+R：打开最近编辑的文件
    • Ctrl+N：新建文件
    • ctrl+shift+P选择change language mode来修改文件类型
    • Ctrl+P：查找文件
      • 执行一些命令：比如ext install然后回车打开扩展管理
    • Ctrl+Z：后退
    • Ctrl+Y：前进
    • Ctrl+I：代码提示
    • Ctrl+J：打开运行面板
    • Ctrl+G：跳转到指定的行数
    • Shift+Alt+L：代码格式化【自定义】
    • Alt+Up 或 Alt+Down：向上或向下移动一行:
    • Shift+Alt+Up 或 Shift+Alt+Down：向上或向下复制一行
    • Ctrl+Enter：在当前行下方插入一行
    • Ctrl+Shift+Enter：在当前行上方插入一行
    • Ctrl+F2：选中当前相同代码，进行批量替换
    • Ctrl+X：删除当前行
    • Home/End：移动到首行/末行【笔记本关闭NumLock，7和1数字对应的键盘位】
    • Ctrl+Shift+[ 或 Ctrl+Shift+]：折叠/展开代码块【选中】
      • \1. 折叠所有区域代码的快捷键：ctrl+k, ctrl+0;
      • \2. 展开所有折叠区域代码的快捷键：ctrl +k, ctrl+J;
    • Alt+click（鼠标点击）：建立多个光标
    • Ctrl+K ，Z：禅模式（专注模式）【按下Ctrl+K 松手 按下Z】（附：F11全屏）

2、快捷键修改

快捷键修改：通过Keyboard Shortcuts修改，目的是延续IDEA的风格

（1）格式化代码块：Ctrl+Alt+L【搜索format document】

image-20211211110044205

（2）注释：【搜索comment】

  • Ctrl+/：单行注释
  • Ctrl+Alt+/：块注释

image-20211211110814251

（3）Quick Fix

Alt+Enter，沿袭IDEA的风格

（三）语法快捷键

语法 快捷键
input: 显示可能你想输入的input标签属性类型
输入!，然后按tab 自动补全html骨架

三、环境配置

直接编辑User下的setting.json【打开settings后点击右上方的Open Settings （JSON）图标切换UI和JSON视图】

（一）Java

1、下载安装JDK

2、配置系统变量

添加JAVA_HOME->环境变量Path->%JAVA_HOME%\bin

3、配置vscode

  1. 安装插件Java Extension Pack【本质上是一个插件合集】
  2. 在settings.json中配置java.home
注意：''是转义字符

"java.home": "D:\\Development\\java\\jdk-11.0.6"或者"java.home": "D:/Development/java/jdk-11.0.6"

（二）C

主要步骤

参见：

1、下载安装编译环境mingw

2、配置环境变量

添加一条环境变量Path->E:\mingw-w64\mingw32\bin\（安装的编译环境的地址）

3、配置vscode

  1. 安装c/c++扩展以及code-runner

在settings.json中可对code-runner拓展进行设置->编译运行时自动删除生成的exe文件

  1. 建立工作区：内部创建.vscode文件夹，新建json配置文件【运行时可以自动生成，自行配置参考上文】

（三）Python

  1. 安装python插件
  2. pip install flake8
  3. 编辑vscode的配置文件打开flake8语法检查
  4. 编辑vscode的配置文件设置python解释器的默认路径【重启生效】——>可以直接在命令行终端执行python文件

四、插件

插件配置页面：settings->Extemsions

善于使用筛选工具来限定条件搜索插件

（一）前端

语法类

Emmet插件

Emmet插件，又称蚂蚁，内置默认开启。

相关设置页面：

image-20211212094358510

Tab键补全缩写->tab键移动光标。

缩写示例如下：

image-20211212021646466

Vetur

令vscode增加vue类型文档语言，增强html——>支持css属性嵌套

工具类

预览插件

（1）open in browser

打开浏览器插件【快捷键Alt+B】

（2）Live Serve

文件夹项目下文件，右下角状态栏点击Go Live打开浏览器【实时同步html页面上的内容修改】值得一提的是Edge浏览器可以通过直接修改页面同步修改到vscode编辑器，此为实验性功能，有些不稳定）

原理：搭建了一个简易的实时服务器->故可设置ip和端口等

格式插件-Beautify

格式化——>美化展开经过压缩的代码 参考文档：

太长的一段作为一行可能格式化会失败，找到恰当的位置进行一定数量的回车后，再执行命令效果更佳

（二）开发相关

1、code-runner

终端运行调试各种代码

2、Comment Translate

许多优秀的项目，都有丰富的注释，使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言，会带来理解困难。

3、translateNamed

中文翻译成英文变量（支持大小驼峰，下划线，中线命名）

使用：

  • 选中中文， 右键菜单
  • ctrl(cmd)+shift+p 搜索 translate

参见：

4、Code Spell Checker

拼写检查，只支持英文

5、Git History

可视化Git版本控制历史记录，快捷键Alt+H

6、SQLite

微型嵌入式数据库sqlite的可视化工具

（三）Draw.io Integration

draw.io绘图工具vscode集成插件，适合流程图（不适合自由绘图）

网页在线版:diagrams.net

该插件默认情况下使用 Draw.io 的脱机版本【推荐】

基本使用

  • 只要新建扩展名为 .drawio、.dio 、.drawio.svg 文件即可进入编辑
    • Ctrl+N新建文件，Ctrl+Shift+P->change language mode->draw.io，Ctrl+S保存
    • Ctrl+O重新打开新建的文件即可进入编辑
    手动新建演示： dd4c051312fe3f1bbcab31fbc25b2fc7.gif
  • 支持同一个 *.drawio 文件同时用 Draw.io 编辑器和 xml 编辑器打开，不仅是同步的，而且可以根据需要在编辑器间进行切换。

打开文件后点击右上角分屏，在分屏业文件栏上右键选中文件重新选择编辑器打开

效果演示：

5e654d53fc983eb21c07bdc08a057db9.gif

保存：可以将 Draw.io 文件从 .drawio 转换为 .drawio.svg .drawio.png .drawio.svg 等文件，还可以装换成可嵌入HTML等格式的代码

（四）杂七杂八

1、vscode-icons

图标美化（文件夹）

2、leetcode

cookie登录，获取题目列表（没有办法获取到程序员面试指南和剑指Offer的题）

主要用于方便快速查阅练习，不要在vscode上敲，推荐网页原生提交

参见：

3、Marp

Marp是一款基于markdown开发的PPT软件，让我们专注于PPT的内容，而不再花费过多的时间排版，当然，其并不能像Office那样高自由度的排版，但满足日常汇报足够。 目前Marp已有单独的软件和VsCode插件 Marp官网：https://marp.app/, 使用参见：Markdown PPT_墨滴社区

五、技巧&帮助

（一）技巧

1、交互式演练场

Help->Edictor Playground

2、灵活运用代码片段

File->preferences->User Snippets

自定义代码片段（snippets）可以通过安装插件丰富代码片段

多光标查找匹配快捷键一览表Keyboard Shortcuts中搜索Find match

image-20211212134226449

3、编码

文件编码可通过右下方状态栏点击编码切换选择和保存为不同的编码格式

4、vscode代码运行配置

一劳永逸：因为VS需要为每一个文件夹做单独配置，所以建议把.vscode文件夹放到你常用的文件夹的顶层，这样就不用重复配置了。不用每个新cpp或.java文件等就要一套配置。这些配置在你配置好的文件夹内的所有子文件夹和文件都能使用。

5、分屏

将想要预览的窗口拖动到vscode右侧区域

例如：F5进入debug状态，将黑窗口拖到vscode界面右侧实现分屏，逐步运行代码查看值和输出（还可以拖到下方进行分屏）

7、压缩代码

按Ctrl + Shift + P调出命令窗口，输入join lines,确认执行就可以合并多行了。 注意首先要选中要合并一行的代码！ （代码注释和不良的代码习惯会产生一些影响） 例如：JS代码书写注意事项，JavaScript代码压缩后为什么报错？ - [JavaScript加密] (jsjiami.com)

8、包裹围绕外围代码⭐️

鼠标选中代码块，键入Ctrl+Shift+P打开命令行窗口，输入Emmet或者wrap
选中Wrap with Abbreviiation命令，之后按照Emmet语法输入快捷骨架生成语法就能在整块代码外围生成新的html骨架了
image.png

8、更多技巧

  1. 重构代码
  2. 自定义视图布局
  3. 快速调试代码
  4. 查看和更新符号的引用
  5. 符号导航
  6. 拆分编辑器
  7. 重命名终端
  8. Git 操作【内联视图与行暂存】
  9. 搜索结果快照
  10. 可视化搭建页面

（二）帮助

Interactive Graph
Table Of Contents
前端编码选择
Vscode便携版安装
基础配置
一、基本设置
写在最前：更改插件安装路径(（如果你是安装版）
（一）汉化
（二）颜色主题
（三）字体
（四）工作面板【根据喜好：简洁】
1、资源管理器
2、代码预览缩略图
3、导航路径（面包屑）
4、隐藏活动栏
5、文件预览
（五）空白启动页
（六）关闭Hot Exit
（七）平滑插入
（八）自动空行
二、常用配置及快捷键
（一）常用配置
1、鼠标滚轮+Ctrl放大和缩小字体
2、自动保存配置
（二）功能快捷键
1、常用快捷键
2、快捷键修改
（三）语法快捷键
三、环境配置
（一）Java
（二）C
（三）Python
四、插件
（一）前端
语法类
Emmet插件
Vetur
工具类
预览插件
（1）open in browser
（2）Live Serve
格式插件-Beautify
（二）开发相关
1、code-runner
2、Comment Translate
3、translateNamed
4、Code Spell Checker
5、Git History
6、SQLite
（三）Draw.io Integration
（四）杂七杂八
1、vscode-icons
2、leetcode
3、Marp
五、技巧&帮助
（一）技巧
1、交互式演练场
2、灵活运用代码片段
3、编码
4、vscode代码运行配置
5、分屏
7、压缩代码
8、包裹围绕外围代码⭐️
8、更多技巧
（二）帮助