前言

工欲善其事，必先利其器

前端开发工具有很多，类似HBuilder、WebStorm、Visual Studio Code...等，其中vscode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。

编辑器汉化

  • 方式一：Ctrl+Shift+P，输入configure language回车，在打开的语言配置文件中将en-us修改为zh-cn，Ctrl+S保存设置，重启生效。

  • 方式二：插件安装。打开扩展搜索Chinese (Simplified) (简体中文) Language Pack安装，重启生效。

vscode 推荐的用户设置

左下角设置图标，点击，选择设置，搜索设置，设置以下内容(推荐)。或者直接Ctrl+Shift+P搜索setting.json，直接在文件中编辑修改，界面化操作的设置最终也会同步到该文件中。

关闭vscode的自动更新

配置是否接收自动更新，更改后需要重新启动。

update mode:none

默认行尾字符

windows系统环境下的换行方式默认为CRLF: \r\n，linux系统环境下的换行方式默认为LF: \n。配置行位字符为\n。

Eol: \n

自动保存

避免一些不可逆的异常关闭导致数据丢失。onFocusChange-文件焦点变化时自动保存。

autoSave: onFocusChange

tab相关

配置一个制表符等于的空格数以及是否启用tab补全。

Tab Size: 2

Tab Completion: on

‘括号对’着色和匹配

Bracket Pair Colorization插件弃用，插件功能已经被vscode内置。直接设置就可以控制每个括号类型是否具有自己的独立颜色池。

Bracket Pair Colorization: Enabled

Bracket Pair Colorzation: Independent Color Pool Per Bracket Type

Bracket Pairs: active

其他配置项

设置字体大小

Font Size: 14

控制在删除括号或者引号时编辑器是否应删除相邻的右引号或右方括号。

Auto Closing Delete: always

在保存文件时自动运行ESLint的自动修复命令eslint --fix，修改setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // 尝试自动修复代码中的 Eslint 问题
    "eslint.autoFixOnSave": true // 保存时自动应用 Eslint 的修复建议
  }
}

超出显示范围，自动换行（只是显示效果上，并没有真正换行）

word Wrap: on

在Word Wrap为wordWrapColumn或bounded时，控制编辑器的折行列。（与word Wrap: on相悖，根据自己喜好设置）

Word Wrap Column: 100

差异编辑器是否忽略前导空格或尾随空格中的更改。

Ignore Trim Whitespace: false

插件(plugins)推荐

Guides

带色竖线提示所属区域块，效果如下：

vscode-setting-and-plugins-p1

ESLint-代码语法规范校验

该扩展使用安装在打开的工作区文件夹中的ESLint库。如果该文件夹没有提供一个，则扩展程序会查找全局安装版本。(需要先安装-一般安装在项目的devDependenice)

配置文件：添加.eslintrc，或者终端Create ESLint configuration，如果你在全局安装了ESLint，执行eslint --init。

Prettier - Code formatter-代码风格格式化

为不同文件配置默认的格式化程序。

  • 可通过界面操作（右键 -> 使用…格式化文档 -> 配置默认格式化程序 -> 选择prettier）

  • 在setting.json文件中添加字段配置。

{
  // ... 其他配置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

prettier相关配置项，可通过下面两种方式设置。

  • 方式一，添加全局用户配置（vscode设置）
# 使用单引号。
singleQuote: true

# 尽可能控制尾随逗号的输出。
trailingComma: all

# 指定每行代码的最佳长度，如果超出长度则换行。
printWidth: 100

# 当箭头函数仅有一个参数时加上括号。
arrowParens: always
  • 方式二：项目的package.json种添加prettier字段配置。

Document This-js/ts-注释生成

可以自动为TypeScript和JavaScript文件生成详细的JSDoc注释。使用：

  • 方式一：，光标指中需要注释的函数体，按两次Ctrl + Alt + d即可。

  • 方式二：打开命令行方式Ctrl + Shift + p输入document this。

TODO Highlight-高亮提示

代码行添加TODO字样，高亮效果提示。突出尚未完成的功能或者事情。

GitLens — Git supercharged和Git Graph

前者：

  • 查看单个文件的提交记录
  • 代码行尾浅色的commit-message
  • 鼠标覆盖到代码块上，可以查看更详细的提交信息和commit-id，更甚至能跳转到当次记录查看详细提交
  • git命令界面化操作
  • 其他的侧边栏视图和功能

后者：

  • 图形化展示所有分支及结构，可选择性过滤分支再查看
  • 可直接选择某一次的提交节点右键执行某些操作（revert/cherryPick/createBranch/drop?/checkOut/addTag等）
  • 点击节点，查看当次提交的详细文件修改，进行代码审查
  • 单击一个提交，CTRL/CMD单击另一个提交比较任何两个提交
  • 其他功能

Search node_modules-node_modules文件搜索

Ctrl + Shift + p，或者Ctrl + p 输入 > 或者按下 F1。在打开的面板中输入或者选择Search node_modules。点击查询出来的Search node_modules后，会根据当前的工作区文件夹查找node_modules并打开，支持类似Ctrl + f对路径的文件夹或者文件进行搜索。

DotENV-.env文件代码高亮

Import Cost-内联显示导入的包文件大小

Template String Converter-字符串与模板字符串的自动转换

TypeScript Barrel Generator-ts文件导出到index

允许通过或者自动导出某个文件夹（模块）的所有export至index.ts，使用时直接引入index即可。

使用：

  • 方式一：右键文件夹，选择Typescript: export all modules

  • 方式二：手动创建index.ts，如下：

// 例如 folder/a、folder/b 都 export 了一些变量或者函数
// 创建 folder/index.ts
export * from './a';
export * from './b';

Code Runner-代码运行器

点击编辑器右上角类似 |> 的按钮，即可执行当前文件代码片段，并在编辑器内输出结果。

Path Intellisense-路径感知

输入路径时，智能提示，帮助自动完成文件名填充。

Better Comments-注释美化

根据特殊字符前缀标识不同类型的注释。

Auto Rename Tag和Auto Close Tag

前者：标签重命名时，成对的另外一半标签会自动重命名。

后者：输入前半个标签<div>，会自动生成另外一半用于关闭的标签</div>

Error Lens

通过使诊断更加突出来增强语言诊断功能，突出显示语言生成的诊断的整行，并内联打印消息。

Pretty TypeScript Errors

使 VSCode 中的 TypeScript 错误更加美观且易于阅读。

Markdown All in One-Markdown 所有功能支持

在typora开始收费后，发现的一款markdown插件。.md文件的右上角类似窗口扩展的查看图标，点击后会在右侧窗口打开Markdown的预览效果页面。

open in browser-浏览器打开文件

在写html文件的时候，方便快速在浏览器打开该文件。Alt + b快捷键打开，或者右键 open in browser。对应还有一个插件View In Browser，不过作者已经不再维护了。

Color Highlight-颜色代码效果实时预览

如果你不仅仅是想预览颜色，而是需要类似picker的颜色选择器来对已有的颜色进行修改，可以安装另外一个插件Flutter Color，又或者你可以两者一起使用。

Code Spell Checker-单词拼写检测

自动捕获常见的（单词）拼写错误，同时降低误报，适用于驼峰式代码。

filesize-实时观测文件bundle

在状态栏中显示当前文件大小，点击状态栏中的文件大小时，会在OUTPUT中输出Gzip大小。

json2ts-将剪贴板内容转为ts-interface

简直yyds...，实际开发过程中，如果你使用到了ts，可以为你省去很多定义类型的时间。~~比如：将接口返回的数据转为 interface ~~

除了这个插件以外，你也可以到 http://json2ts.com/ 实现更完整的转换（因为插件只会提取json内容进行转换）

[koroFileHeader or fileheader]-在文件头生成作者信息

感觉很鸡肋的一个功能 git 的 文件变更记录同样可以查看，且更加强大 …目前没怎么用到，不排除别的项目组有这种爱好…

vscode-pdf-预览pdf

LeetCode

LeetCode 在 VS Code 中刷题。（如果你觉得有必要）

CodeGeeX-代码自动补全

功能没有 github Copilot 强大，但胜在免费，可以白嫖…

GitHub Repositories-在 vscode 中打开 github 项目

方便查阅库源码…

Jest-Jest 测试工具

此扩展支持 vscode 环境中的完整 jest 功能，使测试更加直观和有趣。如果扩展程序可以找到 jest 命令，默认情况下它将在启动时自动运行并监视监视模式下的所有测试，并且您应该在 TestExplorer 和编辑器中看到测试、状态、错误、覆盖率（如果启用）

框架相关

ES7+ React/Redux/React-Native snippets-React代码片段

集成了ES7标准及一下的语法片段…意味着例如JavaScript (ES6) code snippets提供的片段，也是支持的…

Vue 3 Snippets-Vue代码片段

基于Vue 2 Snippets开发的兼容适配Vue 3的插件。另外一个片段插件VueHelper。

TypeScript Vue Plugin (Volar)-Ts-Vue 插件

用于让 TS 服务器识别 *.vue 文件。

  • 在 *.ts 文件中查找引用时，您还可以从 *.vue 文件中获取结果
  • 在 *.ts 文件中重命名时，对 *.vue 文件的引用也会进行调整
  • 当输入 import 语句时，*.vue 文件也会出现以进行自动补全

Vue Language Features (Volar)-Vue 语言扩展

为Vue template提供原生的TypeScript语言服务。推荐在Vue3项目中开启。

Vetur-Vue2相关支持

推荐在Vue2项目中使用，Vue3项目请禁用。

  • 语法、语义高亮
  • Vue代码片段
  • 格式化相关代码
  • 智能感知及debug
  • 错误检测
  • 其他功能

主题相关

One Dark Pro和Material Theme-vscode主题

Material Icon Theme-vscode文件图标主题

常用快捷键

以下组合键 + 代表组合的意思…

缩放视口

Ctrl + + or Ctrl + - 分别表示放大/缩小

跳转到代码行

Ctrl + g或者Ctrl + p输入:，再输入行号回车，即可完成行跳转

文件搜索

Ctrl + p输入文件名，回车。文件內搜索Ctrl + f

打开最近工作区或者文件（夹）

Ctrl + r 选择你的工作区，按住Ctrl点击打开，会新开一个vscode打开。不加Ctrl会在当前窗口替换并打开。

新建文件和新开vscode

Ctrl + n新建文件，Ctrl + Shift + n新开vscode。

新键行

Ctrl + 回车，效果类似在行尾按下回车。带来的便捷就是不需要先将光标移动到行尾。

打开文件Ctrl + o，打开、关闭终端Ctrl + ~

代码行快速复制、剪贴

当需要对整行代码操作时，无需选中直接Ctrl + c即可复制，Ctrl + x即可剪贴。

同时按住Shift + Alt + 方向键（上/下），可实现基于当前行的向上向下复制粘贴。

缩进调整

Tab向后缩进，Shift + Tab向前缩进。

批量选中

按住Shift，鼠标左键点击开头结尾（或者方向键），即可选中。Ctrl + a选中所有。选中变量or函数后Ctrl + d持续使用即可批量查找该函数或变量。

修改引用

鼠标点击变量或者函数，按下F2，输入你要更改的名称，回车即可同步修改所有用到该变量的名称。

添加注释

单行注释Ctrl + /，多行注释Shift + Alt + a。

多光标

按住Alt键，鼠标左键每次点击都会生成一个新的光标。或者Ctrl + Alt + 方向键创建多个光标。

窗口拆分

Ctrl + \，在右侧开一个编辑器。

窗口视图移动（滚轮效果）

按住Ctrl，点击方向键上下，即可实现滚动。

代码行移动

按住Alt，点击方向键上下，即可完成光标代码行的移动，如行 11 移动到行 19。

代码debug

  • 方式一：可以选择侧边栏的调试按钮，选择配置进行调试。

  • 方式二：F5运行调试。

代码格式化

(Code 快捷键 Shift + Alt + F) 格式化工具使用 prettier

(Code 快捷键 Shift + Alt + O) 整理 import 引用