VSCode 编辑器

一、下载并安装

二、安装插件

插件名	说明
Chinese	中文插件
atom one dark Theme One Dark Pro GitHub Plus Theme Winter is Coming Theme	颜色主题
VSCode Great Icons vscode-icons	文件夹图标
open in browser Live Sever	在浏览器中打开网页
auto rename tag	自动重命名标签 ps: 同步标签都已经内置。可通过设置 `"editor.renameOnType": true` 来开启。
Auto Close Tag	自动完成 HTML / XML …… 标签的闭合 ps: 自动补全关闭标签都已经内置，无须安装此插件了。
Easy LESS	自动编译 less 文件
Code Runner
ES7 React/Redux/GraphQL/React-Native snippets	主要用于 React 代码片段
Vetur	Vue2 配套的 VSCode 插件，对 Vue 单文件组件提供高亮、语法支持以及语法检测。
Volar 更名为：Vue - Official	随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。 ps: 使用时要禁用 Vetur 插件，避免冲突。
Vue VSCode Snippets Vue 3 Snippets	快速的生成 Vue 代码片段
Vue Peek	拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。
Vite	可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。
NPM Intellisense	自动补全引入 node_modules 里面所安装的依赖。 ps: npm Intellisense 已经内置到 vscode 中了。
Path intellisense Path Autocomplete	自动补全文件名。最常用的地方是，当我们去 import 其它文件的时候，能够对文件进行提示，快速补全要引入的文件名。为了使用 "Path Intellisense" 插件代替默认的路径自动补全，需要禁用 `typescript.suggest.paths` 和 `javascript.suggest.paths`。
vscode-styled-components
ESLint
Prettier-Standard - JavaScript formatter
Auto Import	自动导包
Bracket Pair Colorizer 2	为代码中的括号添上一抹亮色。 ps: Deprecated.
Bookmarks	可以让我们在代码中标记和命名位置。然后，可以在这些不同的书签之间跳转来提高我们的开发速度。为了找到某个特性，我们需要小心翼翼地上下滚动我们的文件，这样的日子一去不复返了。
会了吧	英文单词翻译与读

三、配置

1. 配置项

1）推荐设置

修改的配置项	解释	推荐值
Editor: Font Size	修改代码字体大小	16
Editor: Render Whitespace	空格的渲染方式	all
Diff Editor: Word Wrap	代码自动换行	on
Editor: Tab Size	代码缩进	推荐 2 个空格
Auto Save	自动保存	文件 ➡ 自动保存

文件空包折叠问题

搜索“Explorer: Compact Folders”或紧凑二字，取消勾选即可。

粘性滚动预览

关闭方法是搜索“sticky”二字，取消勾选即可。

更简单一点是右击粘性滚动预览窗口，勾选如下内容即可。

敲 !+tab 时，自动生成 HTML 基本结构。但 lang 属性是英文，怎么办？

搜索“Emmet: Variables”。添加如下内容。

保存页面的时候自动格式化代码 1）文件 👉【首选项】👉【设置】

2）打开 VSCode 配置文件

3）在 settings.json下的【工作区设置】中添加以下语句：

json

"editor.formatOnType": true,
"editor.formatOnSave": true

还可以这样操作，更简单（推荐）。

1）打开设置：可以通过点击左下角的齿轮图标，然后选择"设置"，或者使用快捷键 Ctrl+, 打开。

2）在搜索框中输入 editor.formatOnSave，然后在结果中找到 "Editor: Format On Save"。

3）将 "Editor: Format On Save" 的选项打勾，这样每次保存文件时，VS Code 就会自动格式化你的代码。

vscode 中的 jsconfig.json 文件首行报错

设置里搜索关键字“Check JS”。

很奇怪，勾选后又取消勾选，就不报错了 (啥都没改) ！！！

根据嵌套级别为代码中的括号对（包括圆括号、方括号和花括号）着色

json

// 不是必须的
"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#ffd700",
    "editorBracketHighlight.foreground2": "#da70d6",
    "editorBracketHighlight.foreground3": "#179fff",
    "editorBracketHighlight.foreground4": "#24d600",
    "editorBracketHighlight.foreground5": "#00d8d8",
    "editorBracketHighlight.foreground6": "#ee0255"
},
// ******************************************************************************************
// 必须的
// 开启原生括号着色
"editor.bracketPairColorization.enabled": true,
// 开启 active 时的代码块边缘导轨线着色（和 Bracket Pair Colorizer 行为一致）
"editor.guides.bracketPairs":"active"

2）一键配置

上面推荐设置的配置项需要一个个配置，有什么简单快捷的办法呢？直接把下面的配置扔到 settings.json 文件里面即可。

json

{
  "workbench.colorTheme": "Default Light Modern",
  "workbench.iconTheme": "vscode-great-icons",
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "update.mode": "none",
  "explorer.compactFolders": false,
  "editor.formatOnSave": true,
  "editor.fontSize": 16,
  "editor.renderWhitespace": "all",
  "editor.stickyScroll.enabled": false,
  "emmet.variables": {
    "lang": "zh-CN"
  },
  // 彩虹括号
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs":"active",
  // Path intellisense 插件配置
  "typescript.suggest.paths": false,
  "javascript.suggest.paths": false,
  "path-intellisense.mappings": {
    "/": "${workspaceFolder}", // 当在代码中输入以 "/" 开头的路径时，它会被映射到当前工作区的根目录。
    "lib": "${workspaceFolder}/lib", // 当在代码中输入 "lib/" 时，它会被映射到当前工作区下的 "lib" 目录。
  },
}

2. 代码片段

生成代码片段配置网站：snippet generator

3. 禁用自动更新

1）VSCode

第一步：文件 👉【首选项】👉【设置】

第二步：搜索栏里搜索“update: Mode”，把它设置为 none 即可。

2）插件

第一步：文件 👉【首选项】👉【设置】

第二步：搜索栏里搜索“Extensions: Auto Update”，把它设置为 false 即可。

四、常用快捷键

快捷键	说明
ctrl + /	添加注释
ctrl + d	先双击选定一个单词，然后按下 ctrl + d 可以往下依次选择相同的单词。这样同时修改相同的单词就非常方便。
ctrl + g	快速定位到某一行
ctrl + h	全局替换某些单词
ctrl + 加号或者减号	放大缩小整个编辑器界面
Ctrl + Alt + 上下方向键	添加多个光标
按住 shift + alt	可以选择一个区块进行操作
shift + alt + 上下方向键	复制光标所在行的代码到上一行或下一行。复制代码到下一行，还可以连续敲击 ctrl + c 与 ctrl + v 即可。
shift + alt + f	快速格式化代码
Shift + Alt + A	切换当前选中代码的注释状态
ctrl + enter	下方添加新行，且光标定位到这里

五、Emmet 语法

1. 快速生成HTML结构语法

元素：生成标签直接输入标签名。按 tab 键即可。比如 div，然后 tab 键，就可以生成 <div></div>。
子元素：使用 > 符号可以创建子元素。例如，div>p 会生成 <div><p></p></div>。
兄弟元素：使用 + 符号可以创建兄弟元素。例如，div+p 会生成 <div></div><p></p>。
乘法：使用 * 符号可以指定元素的数量。例如，ul>li*5 会生成一个包含五个列表项的无序列表。
分组：使用 () 符号可以进行分组。例如，div>(header+main+footer) 表示创建一个 div 元素，这个 div 元素包含三个子元素：header、main 和 footer。
ID 和类：如果生成带有类名或者 id 名字的，直接写 .demo 或者 #two，然后 tab 键就可以了。
属性：使用 [] 符号可以添加属性。例如，a[href="#"] 会生成 <a href="#"></a>。
自增符号：如果生成的 div 类名是有顺序的，可以用自增符号 $。例如： ‘ d i v . i t e m$ *3`，上述表达式会被扩展为如下。
html
```
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
```
1
2
3
文本：使用 {} 符号可以添加文本。例如，a{Click me} 会生成 <a>Click me</a>。

2. 快速生成CSS样式语法

CSS 基本采取简写形式即可。

比如 w200，按tab，可以生成 width: 200px;

比如 lh26px，按tab，可以生成 line-height: 26px;

VSCode 编辑器 ​

一、下载并安装 ​

二、安装插件 ​

三、配置 ​

1. 配置项 ​

1）推荐设置 ​

2）一键配置 ​

2. 代码片段 ​

3. 禁用自动更新 ​

1）VSCode ​

2）插件 ​

四、常用快捷键 ​

五、Emmet 语法 ​

1. 快速生成HTML结构语法 ​

2. 快速生成CSS样式语法 ​

VSCode 编辑器

一、下载并安装

二、安装插件

三、配置

1. 配置项

1）推荐设置

2）一键配置

2. 代码片段

3. 禁用自动更新

1）VSCode

2）插件

四、常用快捷键

五、Emmet 语法

1. 快速生成HTML结构语法

2. 快速生成CSS样式语法