vscode的下载安装与配置【超详细】

news2024/12/30 3:34:42

1、下载

进入vscode官网
打开浏览器的下载内容管理，找到vscode下载任务，鼠标放在下载链接上并右击，点击复制链接地址

下载太慢？使用国内镜像

打开新窗口粘贴地址，并将域名改为：vscode.cdn.azure.cn（国内镜像，下载快）

2、安装

按顺序操作：

3、配置

vscode的配置：

插件配置

其他插件

常用插件：

Live Server：html开发本地服务器（方便开发效果预览）

HTML CSS Support：html中的css类名称提示

Auto Rename Tag：html成对标签自动修改

indent-rainbow：html标签匹配高亮显示

Prettier - Code formatter：代码格式化（细节需要自行配置）

VSCode Great Icons：一套好看的图标

Markdown相关：

Markdown All in One：Markdown文件编写插件

markdownlint：Markdown语法检测插件

Markdown Preview Enhanced：Markdown文件效果预览

Vue相关：

Vetur：vue2插件（和Volar只能启用一个）

Vue Language Features (Volar) ：vue3插件（和Vetur只能启用一个）

TypeScript Vue Plugin (Volar) ：用于支持在 TS 中 import .vue 文件

其他：

filesize：文件大小显示

Git Graph：git信息图形显示

Nested Comments：嵌套注释

CodeSnap：代码截图工具

background：编辑器背景图自定义

VSCode-Element-Helper：Element-UI代码提示

NGINX Configuration：Nginx语法高亮显示

nginx-format：Nginx配置文件代码格式化

naive-ui-helper：Naive-UI代码提示

Element Plus：Element-Plus代码提示（和VSCode-Element-Helper只能启用一个）

主题相关：

Dracula Official

Monokai Pro

全局配置：

参考配置（熟悉者可自行配置，根据需求取舍）

json
复制代码
{
  // 搜索排除文件
  "search.exclude": {
    "**/.vscode": true,
    "**/.git": true,
    "**/node_modules": true
  },
  // 不显示的文件
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true
  },
  // 当焦点离开时自动保存
  "files.autoSave": "onFocusChange",
  // 转换tab缩进为2个空格
  "editor.tabSize": 2,
  "editor.detectIndentation": true,
  "editor.insertSpaces": true,
  // html单行最大字符数量，配合prettier.htmlWhitespaceSensitivit配置可以避免较长的代码出现结束标签断行
  "html.format.wrapLineLength": 400,
  "prettier.htmlWhitespaceSensitivity": "strict",
  // 散文换行配置
  "prettier.proseWrap": "preserve",
  // javascript字符串变单引号（需要安装prettier插件）
  "prettier.singleQuote": true,
  // javascript行尾自动分号（需要安装prettier插件）
  "prettier.semi": true,
  // json项后面自动补逗号
  "prettier.trailingComma": "es5",
  // 换行符：crlf为windows平台，考虑跨平台可以修改了lf
  "prettier.endOfLine": "crlf",
  // html使用内置格式化功能
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  // css文件格式化功能为prettier（需要安装prettier插件）
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // javascript使用prettier格式化功能（需要安装prettier插件）
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // json使用prettier格式化功能（需要安装prettier插件）
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // vue文件格式化为prettier（需要安装prettier插件）
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // markdown文件格式化配置（需要安装markdown-all-in-one插件）
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  // json格式配置文件格式化功能为prettier（需要安装prettier插件）
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 关闭插件推荐提醒
  "extensions.ignoreRecommendations": true,
  // Dracula Official主题设置（需要安装Dracula Official插件）
  "workbench.colorTheme": "Dracula",
  // 文件图标主题设置（需要安装VSCode Great Icons插件）
  "workbench.iconTheme": "vscode-great-icons",
  // 启动时不要显示欢迎页也打开编辑页
  "workbench.startupEditor": "none",
}