hex-color-replacer README
目前功能点
替换当前 vscode 打开的项目中的所有 less 文件中的 16 进制颜色为主题色
PS:使用说明
- (先配置需要映射的字典)打开 setting.json,添加项目字典配置
// 例如手动配置
"hexColorReplacer.variables":{
"@white": "#fff",
"@red": "#ff0000",
}
// 也可以直接在右键点击插件,然后选中拓展设置进行配置
// 不过还是推荐直接使用快捷键 `ctrl+shift+p` 或者 `cmd+shift+p` 呼出指令输入框;然后输入 hex-color-replacer.editConfig 会弹出本插件的输入框,填写json数据后回车即可完成配置
- 使用快捷键
ctrl+shift+p 或者 cmd+shift+p 呼出指令输入框
- 输入 hex-color-replacer.replacer 会弹出本插件的指令
PS:支持的替换的颜色
- 支持字典和用户 less 文件 16 进制缩写,以及确保匹配时大小写不敏感
- 例如 #FFF、#fff、#FFFFFF、#ffffff、#FfF
目录结构
├── .eslintrc.json // eslint 配置
├── .vscode // vscode 调试配置
| ├── extensions.json
| ├── launch.json
| ├── settings.json
| └── tasks.json
├── .vscodeignore // 发布忽略内容
├── CHANGELOG.md // 修改日志
├── README.md // 插件发布后,插件主页内容
├── package-lock.json
├── package.json // vscode 从这里识别插件贡献点
├── images // 静态图片文件夹
├── src // 核心源码内容
| ├── extension.ts // 入口文件
| └── test //测试文件
├── tsconfig.json // ts 配置文件
├── vsc-extension-quickstart.md
├── webpack.config.js // wepack 配置
└── ABOUT.md // 项目相关备注
待拓展内容
[ ] 支持更多的文件类型
当前的代码只会搜索 .less 文件。可以通过修改文件搜索模式,支持更多的文件类型,如 .scss、.css、.sass 等。
[ ] 支持更多的替换方式
当前的代码只支持使用配置文件中的变量替换十六进制颜色值。可以添加其他替换方式,如使用 CSS var() 函数替换十六进制颜色值。
[ ] 支持多语言翻译
插件可以通过添加多语言支持,使得插件可以在多个语言环境下工作,并且可以帮助更多的开发者更容易地使用插件。
[x] 可以添加一个可视化的界面
可以通过添加一个可视化的界面,使得用户可以更容易地配置变量列表,而不是手动修改配置文件。
[ ] 可以添加自动备份和恢复功能
可以添加自动备份和恢复功能,以便在更新配置时不会丢失用户的自定义配置。
[ ] 可以添加自动格式化代码的功能
可以添加自动格式化代码的功能,以便在替换颜色值后可以自动格式化代码,以便更容易阅读和维护。
| |