下载安装 | 后盾人

# 下载安装

向军大叔每晚八点在抖音 (opens new window) 和 bilibli (opens new window) 直播

Microsoft 在 2015 年 4 月 30 日 Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。VSCode 是微软推出的跨平台、扩展组件丰富的文本编辑器。

官方提供稳定的发行版本 (opens new window) 与最新测试版本 (opens new window) 两个版本。

苹果M芯片电脑，记得选择 Apple silicon 版本，拥有更好的性能

# 彻底删除

有时编辑器安装插件过多，造成异常时就需要重置 VSCODE。

重置前将安装的插件和热键备份，在下次重装时就省很多事情，具体操作方式请看下面的章节

# mac

首先删除 vscode 软件（可以使用腾讯柠檬清理删除）

执行以下命令删除 vscode 本地数据

rm -rf ~/Library/Application\ Support/Code
rm -rf ~/.vscode

如果是 insider 版本执行以下命令删除本地数据

rm -rf ~/Library/Application\ Support/Code\ -\ Insiders/
rm -rf ~/.vscode-insiders/

# window

首先删除 vscode 软件
window 系统删除以下文件夹将houdunren 换成你的帐号

C:\Users\houdunren\.vscode
C:\Users\houdunren\AppData\Roaming\Code

# 风格界面

我们可以根据自己的审美，配置vscode的界面风格

# 中文语言

扩展中搜索 chinese 即中文语言包

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

也可以点击上面链接在浏览器中直播安装
重启 vscode 工具完成

# 设置风格

下面的两款风格插件都不错，里面有多个主题。

# 截屏模式

该模式可以将按钮与鼠标操作在屏幕上显示，非常适合讲解使用。

开启方式

开启方式为 ctrl+shift+p 后选择 screen

效果如下

配置选项

在设置>工作台>截屏模式中对截屏模式进行设置

# 其他设置

隐藏行号

设置 > 用户设置 > Line Numbers

导航设置

设置 > 工作台 > 导航路径 > (Breadcrumbs: Enabled & Breadcrumbs: File Path)

滚动缩放

文本编辑器 > Editor: Mouse Wheel Zoom

文件排序

资源管理器按最新修改排序

功能 > 资源管理器 > Sort Order[modified]

# prettier

代码格式化使用Prettier (opens new window) 处理，我们需要在项目根目录创建配置文件.prettierrc，记得将配置文件提交到版本库中，这样可以使项目成员使用统一的格式化配置。

下面是向军大叔的配置。

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "never",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": false
}

更多配置请参数官方文档 https://prettier.io/docs/en/options.html

# 代码片段

vscode 提供自定义代码片段功能，使用还是很方便的。

大叔平时用的比较少，主要问题是定义好的代码片段，只能在vscode中使用，大叔有计划开发一个跨平台、跨软件的代码片段工具，请关注 hdcms.com (opens new window)。

# 参数说明

prefix      :这个参数是使用代码段的快捷入口,比如这里的log在使用时输入log会有智能感知.
body        :这个是代码段的主体.需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.注意如果值里包含特殊字符需要进行转义.
　　　　　　　 多行语句的以,隔开
$1          :这个为光标的所在位置.
$2          :使用这个参数后会光标的下一位置将会另起一行,按tab键可进行快速切换,还可以有$3,$4,$5.....
description :代码段描述,在使用智能感知时的描述

# 操作实例

下面自定义一个代码片段，当输入 hd 并按 tab 键后自动输出 houdunren.com。

{
	"Print to console": {
		"prefix": "hd",
		"body": [
			"houdunren.com",
		],
		"description": "输出houdunren.com"
	}
}

结果如下

多段文字配置

{
	"表关联": {
		"prefix": "hd-foreign",
		"body": [
			"\\$table->unsignedBigInteger('package_id')->nullable()->comment('套餐编号');",
			"\\$table->foreign('package_id')->references('id')->on('packages')->onDelete('cascade');",
		],
		"description": "多表关联"
	}
}

# 平滑移动

vscode 中使用 vim 时，默认情况下移动光标会有卡顿延迟，下面来设置平滑移动光标。

在命令行执行以下命令

# For VSCode
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

# For VSCode Insiders
defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false

修改 系统偏好设置 > 键盘 更改 按键重复 与 重复前延迟

# 文件整理

在写项目时，vscode的资源管理器中，文件特别多，但有些文件不是经常使用的，我们可以在 .vscode/settings.json 文件声明将文件编成一组。

{
  ...
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "*.json, *.config.js, *.config.ts,*.cjs",
    "README.md": ".git*, .eslint*, .prettier*, .stylelint*, commitlint*, .editorconfig,LICENSE,pnpm*,.npm*"
  }
}

这时资源管理器就干净多了