@emmetio/config

Emmet config resolver

Emmet config resolver

This module provides resolver for config that can be passed to Emmet abbreviation expanderas optionsargument. The config may contain global, syntax- and project-specific preferences like output format or snippets and config resolver creates final options payload with proper preferences overrides.

Config format

Config is a JSON file that contains global, syntax- and projects specific preferences. Currently, Emmet distinct two types of abbreviations: markup(for languages like HTML, XML, Slim etc.) and stylesheet(CSS, SASS, Less etc.), each of them has different settings and usage semantics. In order to globally configure all markup and/or stylesheet abbreviations, use globalskey with markupand stylesheetsubkeys accordingly:

{
    "globals": {
        "markup": {
            "profile": {
                // Output all tags in uppercase
                "tagCase": "upper"
            },

            // Add custom snippets to all markup-based syntaxes
            "snippets": {
                "site-nav": "nav>ul.nav>li.nav-item"
            }
        },
        "stylesheet": {
            // Add custom snippets to all stylesheet-based syntaxes
            "snippets": {
                "black": "color: black"
            }
        }
    }
}

For available options, see types.d.tsfile.

Sometimes you may want to add syntax-specific preferences. For example, you may want to customize SASS syntax with new snippets but don’t want to use them in CSS. In this case, you should use syntaxkey and a syntax name as a subkey:

{
    "syntax": {
        "sass": {
            // In syntax-specific config, `type` must be either "markup" or "stylesheet"
            "type": "stylesheet",
            "snippets": {
                "inc": "@include"
            }
        }
    }
}

Contents of syntax-specific config is the same as global config.

You may also want to configure Emmet specifically for a project. Use "project" top-level key with project ID as a subkey:

{
    "project": {
        "my-project1": {
            // Use `globals` and `syntax` sections as described above
            "globals": { ... },
            "syntax": { ... }
        }
    }
}

Resolver API

Config resolver is a function that takes JSON config and params that identify current context: abbreviation type, syntax and project.

import { expand } from '@emmetio/expand-abbreviation';
import resolveConfig from '@emmetio/config';

// Obtain config JSON somehow
const config = readFile('emmet-config.json');

// Identify current context
const params = {
    type: 'markup',
    syntax: 'html',
    project: 'my-project1'
};

const result = expand('ul>li', resolveConfig(config, params));

console.log(result);

Available context options:

  • type: type of abbreviation, either markupor stylesheet.
  • syntax: syntax name, a subkey of syntaxsection.
  • project: ID of project, a subkey of projectsection.

Config resolver will create a final options payload for abbreviation expander, depending on context params.

HomePage

https://github.com/emmetio/config#readme

Repository

https+https://github.com/emmetio/config


上一篇:@emmetio/field-parser
下一篇:@emmetio/variable-resolver

相关推荐

  • 配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大;呃呃。。。。

    1 个月前
  • 跨域编辑器的编码习惯editorConfig

    编辑器就是生产力,符合个人编程习惯和风格的编辑器能给开发带来轻松愉快的心情和生产力。前端开发中越来越多东西需要通过配置文件来进行配置,现在编辑器也使用了这一方法。 意义 存在的目的是项目代码在不...

    2 年前
  • 解决tsconfig.json配置paths, 却依然报错can't find module?

    NodeJs程序中若使用typescript经常会遇到一个问题, 即明明在tsconfig.json里配置了paths映射,为啥import使用路径别名,例如@test/a.ts时,会报错can't ...

    2 个月前
  • 理解webpack.config.js的四个核心概念

    webpack是需要自己编写自己需要的一个配置对象,取决你如何使用webpack,下面指定了所有的可用的配置选项。 参考文档:https://doc.webpackchina.org...(https...

    3 年前
  • 没有webpack.config.js如何配置less ??安装配置less必看

    首先我们最新创建的项目;无论是vue或者react项目,你都找不到webpack.config.js,甚至没有原来的build文件夹,那我们如何配置less或者jq这种插件呢?接下来进入正题 配置le...

    5 个月前
  • 微信公众号wx.config权限通不过config:invalid signature,显示无效签名

    一、vue引入weixinjssdk(yarn或npm) 二、大家可以尝试下官方的案例http://demo.open.weixin.qq.co...(http://demo.open.weix...

    10 个月前
  • 如何配置Web.config允许任何长度的要求

    djvsomebloodyfool(https://stackoverflow.com/users/832052/djv)提出了一个问题:How to configure the web.config...

    2 年前
  • 基于config-component转向面向数据的编程?

    面向数据编程 面向数据编程是什么样的体验? 其实是数据驱动式编程更向前走一步,我们知道现在MVVM框架,像React、vue、Angular这些给前端带来了很大的进步,更优雅的工程化体系结构,...

    10 个月前
  • 利用react-router4的react-router-config做路由鉴权

    一、reactrouterconfig 是一个帮助我们配置静态路由的小助手。 其源码就是一个高阶函数 利用一个map函数生成静态路由 //router.js 假设这是我们设置的路由数组(这种写法...

    2 年前
  • 了不起的 tsconfig.json 指南

    在 TypeScript 开发中,tsconfig.json 是个不可或缺的配置文件,它是我们在 TS 项目中最常见的配置文件,那么你真的了解这个文件吗?它里面都有哪些优秀配置?如何配置一个合理的 t...

    1 个月前

官方社区

扫码加入 JavaScript 社区