VSCode中值得推荐的常用的33个高效前端插件「效率篇」（三）

VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。

效率篇（33）

Indenticator

Indenticator : 直观地突出显示当前的缩进深度。此扩展可以单独使用，但建议与内置缩进指南一起使用（设置editor.renderIndentGuides）。这些在每个缩进上显示细灰线，而此扩展突出显示光标当前所在缩进深度上的缩进。

• 插件名：Indenticator
• 官方地址：Indenticator - Visual Studio Marketplace

Guides

Guides : Guides 只是添加各种缩进指南线的插件。

• 插件名：Guides
• 官方地址：Guides - Visual Studio Marketplace

Auto Import - ES6、TS、JSX、TSX

Auto Import : 自动导入 - ES6、TS、JSX、TSX（VSCode 扩展）。

• 插件名：Auto Import - ES6、TS、JSX、TSX
• 官方地址：Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace

JavaScript (ES6) code snippets

JavaScript (ES6) code snippets : 此扩展包含用于 Vs Code 编辑器的 ES6 语法中的 JavaScript 代码片段（同时支持 JavaScript 和 TypeScript。

• 插件名：JavaScript (ES6) code snippets
• 官方地址：JavaScript (ES6) code snippets - Visual Studio Marketplace

Paste JSON as Code

Paste JSON as Code : 从 JSON、JSON Schema 和 TypeScript 交互式生成类型和（反）序列化代码；将 JSON/JSON Schema/TypeScript 粘贴为代码。

• 插件名：Paste JSON as Code
• 官方地址：Paste JSON as Code - Visual Studio Marketplace

JSON to TS

 

JSON to TS : 将 JSON 对象转换为 TypeScript 接口。

• 插件名：JSON to TS
• 官方地址：JSON to TS - Visual Studio Marketplace
• 特征：

• • 从剪贴板转换（Shift + Ctrl + Alt + V）

• • • 

• • 从选择转换（Shift + Ctrl + Alt + S）

• • • 

• • 可选引号

• • • 

• • 转换器

• • • 数组类型合并（大交易）
    • 重复类型预防
    • 联合类型
    • 可选类型
    • 数组类型

Regex Previewer

Regex Previewer : 。

• 插件名：Regex Previewer
• 官方地址：Regex Previewer - Visual Studio Marketplace
• 特征：在并排文档中显示当前正则表达式的匹配项。Ctrl+Alt+M这可以用( )打开/关闭⌥⌘M。可以通过状态栏条目添加全局和多行选项以使用并排文档进行评估。当并排文档有多个要匹配的示例时，这可能很有用。

Sort Typescript Imports

Regex Previewer : 对 Typescript 代码中的导入语句进行排序。

• 插件名：Sort Typescript Import
• 官方地址：Sort Typescript Imports - Visual Studio Marketplace
• 特征：此可配置扩展允许您对 *.ts 或 *.tsx 文件中的所有导入进行排序

Turbo Console Log

Turbo Console Log : 此扩展通过自动化编写有意义的日志消息的操作使调试变得更加容易。

• 插件名：Turbo Console Log
• 官方地址：Turbo Console Log - Visual Studio Marketplace

Dot Log

Dot Log : 一个使用.log将参数记录到控制台的 vscode 扩展。

• 插件名：Dot Log
• 官方地址：Dot Log - Visual Studio Marketplace

Codelf

Codelf : 变量命名神奇。

• 插件名：Codelf
• 官方地址：Codelf - Visual Studio Marketplace
• 用法：

• • 选择文本，右键单击并选择“Codelf”

  • 

Code Runner

Code Runner : 运行多种语言的代码片段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F# Script、F#（ .NET Core)、C# 脚本、C# (.NET Core)、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml Script、R、AppleScript、Elixir、Visual Basic .NET、Clojure、Haxe、Objective-C , Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, Standard ML和自定义命令。

• 插件名：Code Runner
• 官方地址：Code Runner - Visual Studio Marketplace
• 特征：

• • 运行当前活动文本编辑器的代码文件
  • 通过文件资源管理器的上下文菜单运行代码文件
  • 在文本编辑器中运行选定的代码片段
  • 每个 Shebang 运行代码
  • 每个文件名 glob 运行代码
  • 运行自定义命令
  • 停止代码运行
  • 在输出窗口中查看输出
  • 设置默认语言运行
  • 选择要运行的语言
  • 通过在集成终端中运行代码来支持 REPL

• 用法：

• • 运行代码：

• • • 使用快捷方式Ctrl+Alt+N
    • 或按F1然后选择/键入Run Code,
    • 或右键单击文本编辑器，然后单击Run Code编辑器上下文菜单
    • 或单击Run Code编辑器标题菜单中的按钮
    • 或单击Run Code文件资源管理器上下文菜单中的按钮

• • 要停止正在运行的代码：

• • • 使用快捷方式Ctrl+Alt+M
    • 或按F1然后选择/键入Stop Code Run
    • 或单击Stop Code Run编辑器标题菜单中的按钮
    • 或右键单击输出通道，然后单击Stop Code Run上下文菜单

    • 

• • 要选择要运行的语言，请使用快捷方式Ctrl+Alt+J，或按F1然后选择/键入Run By Language，然后键入或选择要运行的语言：例如php, javascript, bat, shellscript...

• • • 

• • 要运行自定义命令，然后使用快捷方式Ctrl+Alt+K，或按F1然后选择/键入Run Custom Command

DotENV

DotENV : .env 文件的语法高亮。

• 插件名：DotENV
• 官方地址：DotENV - Visual Studio Marketplace

后续如有发现更多更好的插件将继续分享。安装太多的插件恐会影响 VSCode 的启动速度，同时增加内存的占用，可能影响开发效率，最终适得其反，所以建议只安装自己喜欢的、常用的即可。