关于前端：盘点一些好用的 WebStorm 插件配置

Plugins Summary Table

Plugin Name

Plugin Description

.env files support

[ 功能强化 | 配置 ] 配置文件支持

.ignore

[ 功能强化 | 配置 ] 版本管理工具的忽略文件插件

AI Assistant

[ AI | 编程助手 ] 人工智能助手 JetBrains 账号登录

该插件处于技术预览阶段，功能访问受到限制

Jetbrains推出AI Assistant，代码AI写，工资我来拿？

Atom Material Icons

[ 美化 | 图标 ] 图标插件

Better Comments

[ 美化 | 编程美化 ] 颜色注释插件

CamelCase

[ 快捷键 | 字符串处理 ] 驼峰字符串 Shift + Alt + U

ChatGPT - EasyCode

[ AI | 编程助手 ] ChatGPT

163 邮箱登录（已注册），需进行 OpenAI 设置

Chinese (Simplified) Language Pack / 中文语言包

[ 配置 ] 汉化-中文语言包

Code MinMap

CodeGlance

[ 美化 ] 代码缩略图插件/右侧小地图

Code MiniMap Not compatible with the version of IDE WebStorm 2023.2.3

CodeGPT

[ AI | 编程助手 ] ChatGPT

You.com（免费），Google 账号登录，可能服务器过载

CSV Editor

[ 功能强化 ] CSV 彩虹色表格和文本编辑器

Dart

[ 编程 | Dart ]Dart 编程语言

DevHelper

[ 开发助手 ] 开发助手插件

底部左侧栏新增 DevHelper 小图标，提供多种开发小功能，充当助手

Extra ToolWindow Colorful Icons

[ 美化 | 图标 ] 工具栏图标插件

File Expander

[ 编程 | Java] 文件编译插件

IDEA中打开jar/tar.gz文件，自动反编译

GitHub Copilot

[ AI | 编程助手 ] GitHub Copilot GitHub 账号登录， $10/month

Github Markdown Emojis

[ Markdown ]Markdown emoji 表情

Displays GitHub Emojis in markdown preview pane.

GitToolBox

[ Git 集成 ]Git 提交工具插件

HighlightBracketPair

[ 美化 | 编程美化 ] 括号对匹配高亮插件

i18n Ally

[ 国际化 ] 国际化插件

i18n support

[ 国际化 ] 国际化插件

IDE Eval Reset

[推荐查看文章]

IdeaVim

[ 编程 | Vim ]Vim 编辑器插件

ImagePreview

[ 功能强化 ] 图片预览插件

Import Cost

[ 数据分析 | JS&TS ] JS & TS 导入模块大小信息插件 参考文章

Indent Rainbow

[ 美化 | 编程美化 ] 彩虹缩进插件 ×

IntelliVue

[ 前端 | Vue | 编程 ]Vue 功能增强插件

安装后会在顶部工具栏新增一个【Vue】选项

JSON Sorter

[JSON] JSON 排序插件 -右键 JSON Sorter

JsonToTs

[JSON] JSON 类型转换插件 -右键 json 生成 ts 类

只需要复制一下Http等接口返回的json然后一键转换成TypeScript的类型定义

Key Promoter X

[ 快捷键 ] 快捷键插件

LeetCode Editor

[ 开源 ] 力扣刷题插件

File | Settings | Tools | LeetCode Plugin 配置 需要登录，可扫码

Markdown Editor

[ Markdown ] Markdown 编辑器插件

Markdown Image Support

[ Markdown ] Markdown 编辑器图片支持插件

Material Theme UI

[ 美化 | 主题 ] 主题插件

File | Settings | Appearance & Behavior | Material Theme UI

Changes the original appearance 常用主题 => Atom One Dark（Material）

MDX

[ 功能强化 ] MDX 支持插件

Modern React Snippets

[ React | 编程 ]

NPM Update Denpendencies

[ 功能强化 ] NPM 依赖包更新插件

Presentation Assistant

[ 快捷键 ] 快捷键展示插件

Preview.js

[ 编程 | React ] React 组件实时预览插件 Preview.js_Docs

need NodeJS 16.14.0+

Rainbow Brackets

[ 美化 | 编程美化 ] 彩虹括号提示配对插件

Randomness

[ 开发助手 ] 随机助手插件 Alt+ R

random numbers, strings, and UUIDs

React Buddy

[ React ]

Regex Rename Files

[ 工具 ] 文件正则批量重命名插件

利用正则给文件批量添加添加前后缀

Space

Space 插件

String Manipulation

[ 快捷键 _ 字符串处理 ] 驼峰字符串

Stylus

[CSS] Stylus 插件 支持 SVG 图片查看

SVGA Support

[SVGA] SVGA 支持插件

Tabnine: AI Code Completion & Chat in Java JS/TS Python & More 1.11.1 Tabnine

[ AI | 编程助手 ] Tabnine $12 ，备忘：QQ 邮箱注册登录

Tailwind Formatter

[ 格式化风格 ] 格式化插件

todo4me

[ 助手 ] 任务管理插件
任务状态分：TODO(待办)、DOING(进行中)、FINISH(已完成)
任务等级分：SS(重要紧急) > S(重要) > H(高) > M(中) > L(低)

TONGYI Lingma - Your AI Coding Assistant

[ AI | 编程助手 ] 通义灵码，智能编码辅助工具 阿里云登录

Translation

[ 编程助手 ] 翻译插件 Ctrl + Shift + Y

需自行配置， File | Settings | Tools | Translation

Unocss

[CSS] Unocss 插件

Vitesse Theme

[ 美化 | 主题 ] 主题插件 Vitesse Theme

Vlang

Vlang 支持插件

WakaTime

[ 助手 ] 高效编码时间管理插件 主页

需配置 api key

WebStorm Help

Wechat mini program support

[ 小程序 ] 微信小程序支持插件

.env files support 配置文件支持

Homepage_.env files support

可以给 .env 环境配置文件增加语法高亮与提示等

Features

  • Environment variables completion based on .env, Dockerfile and docker-compose.yml files.

  • Go to declaration(in .env file) and usages(in code), by Ctrl(Cmd)+click or hot key(Ctrl(Cmd)-B, etc.)

  • .env file syntax highlighter

.ignore 版本管理工具的忽略文件插件

Homepage_.ignore

.ignore 插件支持创建多种 .ignore 文件，也可以直接右键将文件加入到某个忽略文件中。

美化插件

Atom Material Icons 图标美化

Homepage_Atom Material Icons

Atom Material Icons 是一款好用的图标插件，同时也支持自定义配置 Custom File and IDE Icons for improved visual grepping

Better Comments 注释美化

Homepage_Better Comments

Better Comments help you create more human-friendly comments in your code.

Extra ToolWindow Colorful Icons 工具栏图标美化

Homepage_Extra ToolWindow Colorful Icons

……

字符串处理插件 CamelCase / String Manipulation

Homepage_CamelCase、Homepage_String Manipulation

CamelCase 插件比较轻量（861.3K），适用于需要字符串简易处理 的人，处理字符串在 kebab-case、SNAKE_CASE、PascalCase、camelCase、snake_case、space case 之间切换，操作快捷键 Shift + Alt + U 切换字符串命名。

Webstorm 自带切换大小写的快捷键是 Ctrl + Shift + U，不过此快捷键仅支持大小写之间的切换。

String Manipulation插件（3.7M），显然此插件大，更适用于需要大量字符串统一操作 的开发者，虽然此插件占用空间大，但是它支持更多的功能，如大小写切换、排序、筛选、递增、列对齐、正则、转义、编码等，鼠标右键选择 String Manipulation | 对应操作。

原文是这样叙述 String Manipulation 插件功能的： Case switching, sorting, filtering, incrementing, aligning to columns, grepping, escaping, encoding...

AI_ 编程助手 插件

ChatGPT - EasyCode

https://www.easycode.ai/

ChatGPT - EasyCode 文档/预览

File | Settings | Tools | OpenAI，需进行 OpenAI 配置，参考文，后续稳定使用还是得烧￥ → OpenAI | EasyCode 可用

CodeGPT

GPT 所有插件相关配置目前暂且有问题，好像是配置源失效还是啥的问题，反正不太管用。。。

CodeGPT 配置： File | Settings/Preferences | Tools | CodeGPT.

注意： OpenAI Service 可能连接不上，猜测可能是一些个配置错误或限制访问的原因；免费的 You.com 也可能服务过载无法响应。

TONGYI Lingma - Your AI Coding Assistant 通义灵码

通义灵码_帮助文档

通义灵码（阿里云登录），一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。

  • 兼容 Visual Studio Code、JetBrains IDEs 等主流 IDE；

  • 支持 Java、Python、Go、C/C++、JavaScript、TypeScript、PHP、Ruby、Rust、Scala 等主流编程语言。

CSV Editor CSV 彩虹色表格&文本编辑器

Homepage_CSV Editor、README

DevHelper 开发助手

Homepage_DevHelper

一个能够提高效率的开发助手插件，主要包括以下功能：

  • 生产密码：大小写字母、数字、特殊符号任意组合，长度任意指定，批量生成密码；

  • 生成序号：根据起始值、步长、位数生成一系列序号，并可添加前后缀；

  • Base64编码和解密，支持多种编码格式以及URL安全选项；

  • 散列哈希加密：支持MD5、SHA-1、SHA-224、SHA-256、SHA-384、SHA-512、HmacMD5、HmacSHA1、HmacSHA224、HmacSHA256、HmacSHA384、HmacSHA512的加密

  • 文本处理：可以对行文本进行格式化(去除空白、空行、重复行)、行编辑(合并、拆分、命名转换等)、行排序(按照字母或数据升序降序)

  • 生产UUID：支持大写/小写 UUID的生成，可以选择是否带有分隔符

  • 格式化：支持Json、xml、html的格式化

  • RSA非对称加解密：支持RSA的私钥/公钥分别进行加密或者解密，可以生成私钥和公钥对

Github Markdown Emojis Markdown emoji 表情

Homepage_Github Markdown Emojis

GitToolBox Git 提交工具

Homepage_GitToolBox