Atom Pigments 插件使用教程

Atom Pigments 插件使用教程

atom-pigmentsAn Atom package to display colors in project and files.项目地址:https://gitcode.com/gh_mirrors/at/atom-pigments

项目介绍

Pigments 是一个为 Atom 编辑器设计的插件，主要功能是在代码中实时显示颜色值，并构建出项目级别的颜色调色板。通过扫描项目文件，Pigments 能够找出所有颜色，无论是变量还是硬编码的颜色值，然后将这些颜色以直观的方式展示出来。

项目快速启动

安装

使用 Atom 包管理器 apm 命令行安装：

apm install pigments

或者直接在 Atom 的设置视图中搜索 "pigments" 进行安装。

基本配置

安装完成后，Pigments 默认会在所有文件中高亮显示颜色。你可以通过设置限制在特定类型文件生效，自定义配置如下：

"*":
  pigments:
    fileTypes: [
      "css"
      "scss"
      "less"
    ]
    excludeScopes: [
      ".comment"
      ".string"
    ]

应用案例和最佳实践

案例一：前端开发中的颜色管理

在前端开发中，颜色管理是不可或缺的一部分。使用 Pigments 可以：

• 在 CSS 或预处理器文件中快速定位颜色。
• 创建项目级颜色调色板，便于管理和调整颜色主题。
• 在代码中直观地查看颜色值，无需频繁切换到设计工具或浏览器。

最佳实践

• 自定义配置：根据项目需求，设定哪些文件类型开启颜色高亮，以及排除某些特定作用域（如注释或字符串）。
• 动态变量解析：如果颜色值依赖于无法解析的变量，Pigments 可创建一个 pigments 默认文件来存储关键变量值。
• 快捷命令：使用 Pigments 提供的多种命令，包括显示调色板、查找颜色、颜色转换等，方便快捷操作。

典型生态项目

Atom Beautify

Atom Beautify 是一个代码格式化工具，可以与 Pigments 配合使用，确保代码风格统一的同时，颜色显示也更加直观。

Atom HTML Preview

Atom HTML Preview 允许你在 Atom 中实时预览 HTML 文件，结合 Pigments，可以更直观地看到颜色在实际页面中的效果。

Atom Ternjs

Atom Ternjs 是一个 JavaScript 代码智能提示工具，与 Pigments 一起使用，可以提升前端开发的效率和体验。

通过以上介绍和实践，相信你能更好地利用 Pigments 插件，提升你的开发效率和代码质量。

atom-pigmentsAn Atom package to display colors in project and files.项目地址:https://gitcode.com/gh_mirrors/at/atom-pigments