UNPKG

remark-lint-fenced-code-flag-case

Version:

remark-lint rule to warn when fenced code blocks have an inconsistently-cased language flag

430 lines (322 loc) 12.7 kB
<!-- symbiote-template-region-start 1 --> <p align="center" width="100%"> <img width="300" src="https://raw.githubusercontent.com/Xunnamius/unified-utils/refs/heads/main/packages/remark-lint-fenced-code-flag-case/logo.png"> </p> <p align="center" width="100%"> <!-- symbiote-template-region-end --> remark-lint rule to warn when fenced code blocks have an inconsistently-cased language flag <!-- symbiote-template-region-start 2 --> </p> <hr /> <div align="center"> [![Black Lives Matter!][x-badge-blm-image]][x-badge-blm-link] [![Last commit timestamp][x-badge-lastcommit-image]][x-badge-repo-link] [![Codecov][x-badge-codecov-image]][x-badge-codecov-link] [![Source license][x-badge-license-image]][x-badge-license-link] [![Uses Semantic Release!][x-badge-semanticrelease-image]][x-badge-semanticrelease-link] [![NPM version][x-badge-npm-image]][x-badge-npm-link] [![Monthly Downloads][x-badge-downloads-image]][x-badge-downloads-link] </div> <br /> # remark-lint-fenced-code-flag-case <!-- symbiote-template-region-end --> This is a [remark-lint][1] rule to warn when fenced code blocks have inconsistent or improperly cased language flags. Also comes with full unicode support. This check is useful when using [a tool like prettier that formats fenced code blocks][2], since such tools do not consistently recognize uppercase or mixed-case code flags. That is: code fenced with the flag `typescript` or `markdown` will be formatted while code fenced with the flag `TypeScript` or `MARKDOWN` may be _silently ignored_, even as syntax highlighting still works, which results in a false sense of correctness. <!-- symbiote-template-region-start 3 --> --- <!-- remark-ignore-start --> <!-- symbiote-template-region-end --> <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> - [Install](#install) - [Usage](#usage) - [Via API](#via-api) - [Via remark-cli](#via-remark-cli) - [Via unified configuration](#via-unified-configuration) - [API](#api) - [Options](#options) - [Examples](#examples) - [`ok-missing.md`](#ok-missingmd) - [`ok-lower.md`](#ok-lowermd) - [`not-ok-mixed.md`](#not-ok-mixedmd) - [`not-ok-upper.md`](#not-ok-uppermd) - [Related](#related) - [Appendix](#appendix) - [Published Package Details](#published-package-details) - [License](#license) - [Contributing and Support](#contributing-and-support) - [Contributors](#contributors) <!-- END doctoc generated TOC please keep comment here to allow auto update --> <!-- symbiote-template-region-start 4 --> <!-- remark-ignore-end --> <br /> ## Install > Due to the nature of the unified ecosystem, this package is ESM only and > cannot be `require`'d. <!-- symbiote-template-region-end --> To install: ```shell npm install --save-dev remark-lint-fenced-code-flag-case ``` ## Usage For maximum flexibility, there are several ways this plugin can be invoked. ### Via API ```typescript import { read } from 'to-vfile'; import { reporter } from 'vfile-reporter'; import { remark } from 'remark'; import remarkLint from 'remark-lint'; import lintFencedCodeFlagCase from 'remark-lint-fenced-code-flag-case'; const file = await remark() .use(remarkLint) .use(lintFencedCodeFlagCase) .process(await read('example.md')); console.log(reporter(file)); ``` <!-- remark-ignore --> ### Via [remark-cli](https://xunn.at/docs-remark-cli) ```shell remark --use remark-lint --use lint-fenced-code-flag-case README.md ``` <!-- remark-ignore --> ### Via [unified configuration](https://xunn.at/docs-unified-configuration) In `package.json`: ```javascript /* … */ "remarkConfig": { "plugins": [ "remark-lint-fenced-code-flag-case" /* … */ ] }, /* … */ ``` In `.remarkrc.js`: ```javascript module.exports = { plugins: [ // … 'lint-fenced-code-flag-case' ] }; ``` In `.remarkrc.mjs`: ```javascript import lintFencedCodeFlagCase from 'remark-lint-fenced-code-flag-case'; export default { plugins: [ // … lintFencedCodeFlagCase ] }; ``` ## API Detailed interface information can be found under [`docs/`][x-repo-docs]. ### Options This rule supports [standard configuration][3] that all remark lint rules accept (such as `false` to turn it off or `[1, options]` to configure it). Additionally, this plugin recognizes the following options: #### `case` Valid values: `"lower"` | `"upper"` | `"capitalize"`\ Default: `"lower"` All code fence flags must be of the specified case. Code fences without flags are ignored. ## Examples ### `ok-missing.md` #### In ````markdown # Document ``` Text. ``` ```` #### Out No messages. ### `ok-lower.md` #### In ````markdown # Document ```js const str = 'string'; ``` ```javascript const str = 'string'; ``` ```` #### Out No messages. ### `not-ok-mixed.md` #### In ````markdown # Document ```Js const str = 'string'; ``` ```JavaScript const str = 'string'; ``` ```` #### Out ```text 3:1-5:4: Code fence flag "Js" should be "js" 7:1-10:5: Code fence flag "JavaScript" should be "javascript" ``` ### `not-ok-upper.md` #### In ````markdown # Document ```JS const str = 'string'; ``` ```JAVASCRIPT const str = 'string'; ``` ```` #### Out ```text 3:1-5:4: Code fence flag "JS" should be "js" 7:1-10:5: Code fence flag "JAVASCRIPT" should be "javascript" ``` ## Related - [remark-lint-fenced-code-flag][4] — warn when fenced code blocks occur without language flag. - [remark-lint-fenced-code-marker][5] — warn when fenced code markers violate the given style. <!-- symbiote-template-region-start 5 --> ## Appendix <!-- symbiote-template-region-end --> Further documentation can be found under [`docs/`][x-repo-docs]. <!-- TODO: additional appendix sections here --> <!-- symbiote-template-region-start 6 --> ### Published Package Details This is an [ESM-only package][x-pkg-esm-wine] built by Babel for use in Node.js versions that are not end-of-life. For TypeScript users, this package supports both `"Node10"` and `"Node16"` module resolution strategies. <!-- symbiote-template-region-end --> <!-- TODO: additional package details here --> <!-- symbiote-template-region-start 7 --> <details><summary>Expand details</summary> That means ESM source will load this package via `import { ... } from ...` or `await import(...)` and CJS source will load this package via dynamic `import()`. This has several benefits, the foremost being: less code shipped/smaller package size, avoiding [dual package hazard][x-pkg-dual-package-hazard] entirely, distributables are not packed/bundled/uglified, and a drastically less complex build process. The glaring downside, which may or may not be relevant, is that CJS consumers cannot `require()` this package and can only use `import()` in an asynchronous context. This means, in effect, CJS consumers may not be able to use this package at all. Each entry point (i.e. `ENTRY`) in [`package.json`'s `exports[ENTRY]`][x-repo-package-json] object includes one or more [export conditions][x-pkg-exports-conditions]. These entries may or may not include: an [`exports[ENTRY].types`][x-pkg-exports-types-key] condition pointing to a type declaration file for TypeScript and IDEs, a [`exports[ENTRY].module`][x-pkg-exports-module-key] condition pointing to (usually ESM) source for Webpack/Rollup, a `exports[ENTRY].node` and/or `exports[ENTRY].default` condition pointing to (usually CJS2) source for Node.js `require`/`import` and for browsers and other environments, and [other conditions][x-pkg-exports-conditions] not enumerated here. Check the [package.json][x-repo-package-json] file to see which export conditions are supported. Note that, regardless of the [`{ "type": "..." }`][x-pkg-type] specified in [`package.json`][x-repo-package-json], any JavaScript files written in ESM syntax (including distributables) will always have the `.mjs` extension. Note also that [`package.json`][x-repo-package-json] may include the [`sideEffects`][x-pkg-side-effects-key] key, which is almost always `false` for optimal [tree shaking][x-pkg-tree-shaking] where appropriate. <!-- symbiote-template-region-end --> <!-- TODO: additional package details here --> <!-- symbiote-template-region-start 8 --> </details> ### License <!-- symbiote-template-region-end --> See [LICENSE][x-repo-license]. <!-- TODO: additional license information and/or sections here --> <!-- symbiote-template-region-start 9 --> ## Contributing and Support **[New issues][x-repo-choose-new-issue] and [pull requests][x-repo-pr-compare] are always welcome and greatly appreciated! 🤩** Just as well, you can [star 🌟 this project][x-badge-repo-link] to let me know you found it useful! ✊🏿 Or [buy me a beer][x-repo-sponsor], I'd appreciate it. Thank you! See [CONTRIBUTING.md][x-repo-contributing] and [SUPPORT.md][x-repo-support] for more information. <!-- symbiote-template-region-end --> <!-- TODO: additional contribution/support sections here --> <!-- symbiote-template-region-start 10 --> ### Contributors <!-- symbiote-template-region-end --> <!-- symbiote-template-region-start root-package-only --> <!-- (section elided by symbiote) --> <!-- symbiote-template-region-end --> <!-- symbiote-template-region-start workspace-package-only --> See the [table of contributors][x-repo-contributors]. <!-- symbiote-template-region-end --> [x-badge-blm-image]: https://xunn.at/badge-blm 'Join the movement!' [x-badge-blm-link]: https://xunn.at/donate-blm [x-badge-codecov-image]: https://img.shields.io/codecov/c/github/Xunnamius/unified-utils/main?style=flat-square&token=HWRIOBAAPW&flag=package.main_remark-lint-fenced-code-flag-ca 'Is this package well-tested?' [x-badge-codecov-link]: https://codecov.io/gh/Xunnamius/unified-utils [x-badge-downloads-image]: https://img.shields.io/npm/dm/remark-lint-fenced-code-flag-case?style=flat-square 'Number of times this package has been downloaded per month' [x-badge-downloads-link]: https://npmtrends.com/remark-lint-fenced-code-flag-case [x-badge-lastcommit-image]: https://img.shields.io/github/last-commit/Xunnamius/unified-utils?style=flat-square 'Latest commit timestamp' [x-badge-license-image]: https://img.shields.io/npm/l/remark-lint-fenced-code-flag-case?style=flat-square "This package's source license" [x-badge-license-link]: https://github.com/Xunnamius/unified-utils/blob/main/LICENSE [x-badge-npm-image]: https://xunn.at/npm-pkg-version/remark-lint-fenced-code-flag-case 'Install this package using npm or yarn!' [x-badge-npm-link]: https://npm.im/remark-lint-fenced-code-flag-case [x-badge-repo-link]: https://github.com/Xunnamius/unified-utils [x-badge-semanticrelease-image]: https://xunn.at/badge-semantic-release 'This repo practices continuous integration and deployment!' [x-badge-semanticrelease-link]: https://github.com/semantic-release/semantic-release [x-pkg-dual-package-hazard]: https://nodejs.org/api/packages.html#dual-package-hazard [x-pkg-esm-wine]: https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed#esm-source-and-distribution [x-pkg-exports-conditions]: https://webpack.js.org/guides/package-exports#reference-syntax [x-pkg-exports-module-key]: https://webpack.js.org/guides/package-exports#providing-commonjs-and-esm-version-stateless [x-pkg-exports-types-key]: https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta#packagejson-exports-imports-and-self-referencing [x-pkg-side-effects-key]: https://webpack.js.org/guides/tree-shaking#mark-the-file-as-side-effect-free [x-pkg-tree-shaking]: https://webpack.js.org/guides/tree-shaking [x-pkg-type]: https://github.com/nodejs/node/blob/8d8e06a345043bec787e904edc9a2f5c5e9c275f/doc/api/packages.md#type [x-repo-choose-new-issue]: https://github.com/Xunnamius/unified-utils/issues/new/choose [x-repo-contributing]: /CONTRIBUTING.md [x-repo-contributors]: /README.md#contributors [x-repo-docs]: docs [x-repo-license]: ./LICENSE [x-repo-package-json]: package.json [x-repo-pr-compare]: https://github.com/Xunnamius/unified-utils/compare [x-repo-sponsor]: https://github.com/sponsors/Xunnamius [x-repo-support]: /.github/SUPPORT.md [1]: https://github.com/remarkjs/remark-lint [2]: https://prettier.io/blog/2017/11/07/1.8.0.html#support-markdown-2943httpsgithubcomprettierprettierpull2943-by-ikatyanghttpsgithubcomikatyang [3]: https://github.com/remarkjs/remark-lint#configure [4]: https://github.com/remarkjs/remark-lint/tree/main/packages/remark-lint-fenced-code-flag [5]: https://github.com/remarkjs/remark-lint/tree/main/packages/remark-lint-fenced-code-marker