本文是在 React 工程的 VS Code 插件及配置 基础上编写的,当时写的时候是 2018 年,至今项目组使用 React 开发已经两年多了,是时候更新一波 Visual Studio Code 插件使用文档了。本文主要以实用为目的,本着不折腾的原则,只挑选平时开发 React 工程用的顺手的插件、主题和字体,也欢迎同学们推荐好用的效率神器。
一、Windows 安装 VS Code 的小提示
在安装时推荐勾选下图两个标红的选项,这样安装成功后,鼠标单击右键文件夹或文件就可以直接使用 VS Code 打开了,非常方便。
若安装时没有勾选这两个选项的同学,是不是只能重装 VS Code 才能使用这个功能呢?当然不是,可以参考这篇文章:将 VS Code 添加到右击菜单,通过修改注册表的方式来实现。
二、VS Code 插件的离线安装
由于在银行软开,平时开发只能在内网进行,需要考虑插件的离线安装。参考了简单的 VSCode 插件离线安装方法,发现官方已经很贴心的提供了在线下载插件的功能,总结下来一共 3 步:
- 进入 Visual Studio Marketplace,搜索需要的插件
- 点击 Download Extension,下载下来的是
.vsix
格式文件 - 可视化安装 VS Code 插件的方法:如图点击左侧 EXTENSION 菜单,点击 ... 按钮,选择“从 VSIX 安装...” 即可安装。
另外求助一个问题,就是如何下载匹配 VS Code 版本的离线插件。项目的开发环境在内网,导致 VS Code 的版本只能固定在某一个版本,但是插件市场提供的插件离线下载包都是对应的当前最新版本 VS Code 的,如何能够下载到指定版本 VS Code 的离线插件。
2020-12-03 更新,找到了下载指定版本插件的方法,可以查看 Download Extension 请求的 url, 目前的是
https://marketplace.visualstudio.com/_apis/public/gallery/publishers/${publisher_name}/vsextensions/${extension_name}/${version}/vspackage
可以通过查看插件的 Changelog 下载指定的版本,但是插件版本与 VS Code 版本之间的关系目前只能是通过时间来对照查找,不知道有没有更方便的方法。
三、外观配置
VS Code 默认的外观确实不怎么好看,这里推荐两套个人比较喜欢的主题。
默认主题和字体预览:
1、配色主题:
- 下载量排名第一的 VS Code 主题插件:One Dark Pro
- 个人喜欢的主题:Material Theme,选择 Material Theme Palenight High Contrast
2、图标:Material Icon Theme
- 下载量排名第二的 Icon 插件,个人感觉比排名第一的 vscode-icons 更好看一些
3、英文字体:FiraCode
- 安装详见:Fira Code —— 专为编程而生的字体
- 推荐一个在线测试各种编程字体的网站:Programming Fonts
4、中文字体:思源黑体
最终的配置如下:
"workbench.colorTheme": "Material Theme Palenight",
"workbench.iconTheme": "material-icon-theme",
"editor.fontFamily": "'Fira Code','Source Han Sans CN'", // 设置的字体类型为 Fira Code 和思源黑体
"editor.fontLigatures": true, // 控制是否启用字体连字
"editor.fontSize": 16, // 字号
"editor.lineHeight": 24, // 行高
"editor.fontWeight": "500",// 字重
"editor.minimap.enabled": false, // 不显示右侧预览地图
"editor.renderIndentGuides": false, // 不显示缩进参考线
"editor.rulers": [120],// 在一定数量的等宽字符后显示垂直标尺。输入多个值,显示多个标尺。若数组为空,则不绘制标尺。
"editor.wordWrap": "on",// 自动换行
One Dark Pro 预览:
Material Theme Palenight High Contrast 预览:
四、实用插件
-
Chinese (Simplified) Language Pack for Visual Studio Code:
- 适用于 VS Code 的中文(简体)语言包
- 英文好的同学可以不必安装本插件
-
- 使用 ESLint 进行代码检查,本插件必备
- 安装后可以看到在 node 上启动了一个 ESLint server
-
- 格式化插件,Opinionated 格式化工具的代表,少些纠结,按照它的约定来就行了
- 支持语言: JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML
- 可以搭配 ESLint、StyleLint,详见官网文档
-
- 增强了 VS Code 内置的 Git 功能
- 使用 Git 托管的项目必备本插件
-
[已经内置,不再需要安装该插件] Debugger for Chrome:
- 已经合并入 vscode-js-debug
- 从 VS Code 1.46 版本开始内置
-
- 路径自动补全插件
- 虽然 VS Code 自带了自动补全路径功能,html文件没有问题,但是在 JSX 里有些文件无法智能提示(比如 JSX 里面的 img 的 src ),本插件很好用,相对路径绝对路径都没有问题
-
- 格式化JSON很方便,只需两个快捷键: 格式化JSON
Ctrl(Cmd)+Alt+M
, 压缩JSONAlt+M
- 格式化JSON很方便,只需两个快捷键: 格式化JSON
-
IntelliSense for CSS class names in HTML
- CSS 智能提示插件
- 本插件已经支持
className
和class
(TypeScript React, JavaScript and JavaScript React language modes) - 暂不支持 css module 智能提示
-
- CSS Module 智能提示
- 本插件可以解决 IntelliSense for CSS class names in HTML 不支持 css module 智能提示的功能
- 可以实现 css 自动补全、转到定义位置
-
- 括号颜色匹配插件,已经升级到了第 2 版,使用与 VS Code 一致的括号分析引擎,速度更快,准确性更高
- 使用颜色来配对括号
-
- 将常用的位置添加到书签,可以极大提高效率
- 快捷键: Ctrl + Alt + K / Commond + Option + K
-
- 简单快速生成漂亮的代码截图,非常推荐
- 简单快速生成漂亮的代码截图,非常推荐
-
-
使用 AI 对代码进行自动补全和提示,用了一段时间,按照习惯补全代码还是很香的
-
离线也能使用
-
五、关于格式化
ESLint + Prettier 应该是标配,具体配置会在下一篇文章。
六、Webpack 别名在 VS Code 中无法跳转到对应文件
在项目根目录创建 jsconfig.json
文件,比如在 webpack 配置了 @src
的别名,配置如下:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@src/*": ["./src/*"]
}
}
}